English | 日本語
These are the recommended extensions for Visual Studio Code.
Within each section, the recommended extensions are listed in order from the top.
- This extension displays an icon according to the file extension or directory name.
- This makes it easier to understand what kind of files and directories they are.
- vscode-icons is more popular, but this extension covers a wider range of topics.
- This extension allows you to see the commit history, file diffs, etc. in the activity bar.
- This extension also allows the commit message to be showed at the end of the line.
- This extension allows you to see the commit history, file diffs, etc.
- The Git logs are showed as a tree diagram. This makes it easier to keep track of your logs.
- This extension allows you to check GitHub Pull Requests in the activity bar.
- You can also check the changed files and differences.
- This extension your code searches for annotations like TODO and FIXME, and displays them in the activity bar.
- Found annotations can be highlighted in the open file.
- Highlight TODO, FIXME and other annotations.
- You may not need this extension if you have Todo Tree.
- This extension allows you to manipulate Docker containers, images, etc. in the activity bar.
- You can also control Docker by right-clicking on the docker-compose file in the sidebar.
- There is also a completion function for Dockerfile and docker-compose.
- This extension allows you to perform various operations such as calling AWS Lambda in the activity bar.
- You can also generate a template for AWS SAM.
- This extension is code formatter that supports various types of files.
- This extension does not work just by installing it; you need to edit the VSCode settings (settings.json).
- This extension performs code formatting based on the set rules, but does not perform syntax checking. It is recommended that this extension be used in conjunction with an extension that performs syntax checking for the language you use.
- This extension catches spelling errors and displays them with squiggly underline. It is recommended to install it to prevent typos.
- The detected words also appear in the problems tab of the panel.
- This extension allows you to type command + . (Ctrl + .) to see the suggested words and convert the target word.
- This extension colorizes brackets. Pairs of brackets have the same color.
- A line of the same color as the bracket will also be showed between the brackets.
- This extension makes it easier to see which brackets are paired with each other.
- This is provided in VSCode, so you do not need to install it.
- This extension provides AI-powered input completion. Candidates selected by prediction are marked with ★.
- It colors the indentations. The colors changes depending on the depth of the indentation.
- This extension makes it easier to see how deep the indentation is.
- If the indentation is not aligned or tabs and spaces are mixed, it highlights them.
- This extension automatically converts the paired tags when renaming HTML/XML tags.
- This extension also works when HTML/XML format strings are written as variable values in JavaScript, etc.
- It highlights paired tags in HTML/XML files.
- This extension also works when HTML/XML format strings are written as variable values in JavaScript, etc.
- That highlighting is a little hard to see with the default settings, so you may want to change the highlighting style.
- This extension allows you to convert words into CamelCase, PascalCase, SnakeCase, and other notations.
- If you type ">" in an HTML/XML file, it will automatically add the closing tag.
- HTML can be configured to add closing tags automatically by turning on "Auto Closing Tags" in the VSCode setting. In that case, this extension is not necessary.
- It highlights spaces at the end of lines.
- By turning on "trimTrailingWhitespace" in the VSCode settings, you can set it to automatically remove it when saving. In that case, this extension is not necessary.
- This extension enables real-time collaborative editing and debugging with multiple people (Microsoft or GitHub account required).
- You can also text chat and voice chat (You need to install the extension named "Live Share XXX" separately).
- It makes pair programming easier.
- Since the guest accesses the environment of the host machine, there is no need to build the environment on the guest side.
- For CSV / TSV development. It shows each column in a different color.
- Tooltip for number of columns and header when hovering the cursor over them.
- Click "Align" in the status bar to adjust the column width and align the vertical start position.
- Click "Query" in the status bar to view the data in table format. You can also extract data as if you use SQL.
- This extension allows you to use useful shortcut keys when writing Markdown.
- Sample: Ctrl + B for bold。Alt + S for
strikethrough。
- This extension allows you to edit Markdown while viewing a preview of it.
- You can also view the preview in Markdown All in One, but the layout is different, so you may want to use this one if you prefer.
- For XML development.
- This extension allows you to convert XML to JSON.
- This extension allows you to shows JSON in a tree format.
- This extension allows you to generate classes and functions for Java, TypeScript, etc. from JSON.
- For .sql file development.
- It does not behave well, for example, it does not recognize "for update".
- For .env file development.
- For unit file development.
- For PlantUML development. This extension allows you to edit while viewing a preview.
- It requires a java runtime environment.
- For developing ER diagrams in PlantUML.
- It requires a java runtime environment.
- For Draw.io development.
- There are some differences from the web browser version.
- This extension adds color highlighting to log files.
- If the default behavior is sufficient, this extension is not necessary.
- This extension allows you to send HTTP requests based on what you write in the editor.
- It also supports cURL requests and GraphQL requests.
- This extension automatically generates the code to send a request according to various languages by typing command + option + C (Ctrl + Alt + C).
- Syntax highlighting and code completion support is available by setting the text file extension to .http or .rest.
- You can use variables in the file. (only if it is .http or .rest)
- The sample file is here.
- If you hover over the CSS color code, it shows you the picker.
- You can also change the color with the picker.
- This extension allows you to open HTML files in your browser. This is good if you want to check it quickly on the spot.
- Files that need to be compiled, such as .vue files, cannot be opened.
- This extension allows you to start a local server by clicking "Go live" in the status bar.
- Start it at http://127.0.0.1:5500 .
- You will not use it if you start a local server using Docker and check HTML, etc.
- HTML Snippet Pack.
- This is provided in VSCode, so you do not need to install it.
- For more information on snippets, see here.
- JavaScript Snippet Pack. This does not contain snippets for JavaScript in ES6 syntax or later.
- For more information about the snippets provided in VSCode, see here.
// Sample:
// Type ae
document.addEventListener('load', function (e) {
// body
});
// Type pr
object.prototype.method = function(arguments) {
// body
}
// Type gi
document.getElementById('id');
// Type jp
JSON.parse(obj);
// Type us
'use strict';- JavaScript Snippet Pack. This contains snippets for JavaScript in ES6 syntax.
// Sample:
// Type imp
import moduleName from 'module';
// Type req
const packageName = require('packageName');
// Type ecl
export default class className {
};
// Type nfn
const name = (params) => {
}
// Type dob
const {propertyName} = objectToDestruct;
// Type prom
return new Promise((resolve, reject) => {
});
// Type thenc
.then((result) => {
}).catch((err) => {
});- jQuery Snippet Pack.
// Sample:
// Type jqClick
$(selector).click(function (e) {
e.preventDefault();
});
// Type jqGet
$.get("url", data,
function (data, textStatus, jqXHR) {
},
"dataType"
);- For JavaScript development. This extension allows you to generate a documentation comment template by typing /** and then Enter, or control + option + D (Ctrl + Alt + D) twice.
- Documentation comments are also provided in VSCode from the beginning, but it does not behave well, for example, @return is not generated, so it is recommended to disable it and use this extension. (The default documentation comments can be disabled by turning off the VSCode setting "completeJSDocs".)
- This extension executes and evaluates JavaScript or TypeScript code in real time.
- You will need to write the JavaScript code in the file opened by typing command + K → J (Ctrl + K → J). If command + K → J (Ctrl + K → J), then TypeScript code.
- This is good if you want to try out a small piece of code to see how it works.
- You can also check the coverage of the code you have written.
- The disadvantage is the high frequency of notifications.
- For Vue.js development.
- This extension allows you to run npm scripts defined in package.json.
- You can also check if a module is already installed.
- There is also a yarn version of this.
- It shows the size of the imported file in JavaScript or TypeScript.
- For Perl development.
- For Python development.
- For more information about the snippets provided, see here.
- For Python development. This extension allows you to generate a documentation comment template by typing " three times and then Enter.
- You can also change the documentation comments to Google style or numpy style.
- For Python development. It shows you more input suggestions.
- If you also install python snippets, you will get a large number of input suggestions.
- Python Snippet Pack.
- However, it is better to think of it as the extension that displays usage examples rather than a regular snippet.
# Sample:
# Type built_in.type=>
a = ('apple', 'banana', 'cherry')
b = 'Hello World'
c = 33
x = type(a)
y = type(b)
z = type(c)
# Type for=>
fruits = ['apple', 'banana', 'cherry']
for x in fruits:
print(x)
# Type list.comp=>_5
x = [double(x) for x in range(10) if x%2==0]
print(x)
# Type class=>with_attribute_1
class Parrot:
# class attribute
species = 'bird'
# instance attribute
def __init__(self, name, age):
self.name = name
self.age = age
# instantiate the Parrot class
blu = Parrot('Blu', 10)
woo = Parrot('woo', 15)
# access the class attributes
print('Blu is a {}'.format(blu.__class__.species))
print('Woo is also a {}'.format(woo.__class__.species))
# access the instance attributes
print('{} is {} years old'.format( blu.name, blu.age))
print('{} is {} years old'.format( woo.name, woo.age))- For Ruby development.
- For developing .erb files in Ruby.
- This extension allows you to easily check the behavior of regular expressions
