We have compiled a list of extensions that will make using Visual Studio Code more fun.
table of contents
Hello.
I'm Mandai, in charge of Wild on the development team.
I would like to introduce an extension that will make using Visual Studio Code (VSCode) a fun typing companion.
lint
This is an introduction to lint, which performs grammar and format checks.
markdownlint
markdownlint is literally Markdown's lint.
By default, you are required to write fairly stoic Markdown, so it may be quite difficult at first, but once you get used to it, you will be able to write proper Markdown.
I, too, am glad that I installed this extension and was able to correct various things.
When you're writing in Markdown, it's constantly monitoring it, and if something goes wrong, it puts a squiggly line on the spot, so it's easy to notice, and it's convenient because you don't have to run lint from the command palette every time. That's what I think.
# To install, use quick open (Ctrl + p) ext install vscode-markdownlint
docker
docker is an extension that provides the functionality necessary to use docker with VSCode.
In addition to lint, you can use docker to automatically create docker-compose.yml, IntelliSense (code hints), launch docker commands from the command palette (although this does not seem to cover everything), syntax highlighting, etc. It is an all-in-one package that has all the necessary functions above.
There are some situations where docker commands are required, so for light usage, you can run them from the command palette, and if the command palette is not enough, you can call up the terminal with "Ctrl + @". .
# To install, use quick open (Ctrl + p) ext install vscode-docker
eslint
eslint is a JavaScript lint extension.
It doesn't work as a standalone item, and you need to install eslint globally via npm, etc., but it's a proven module, so I think you can feel safe.
By creating a separate ".eslintrc.json", you can control eslint's behavior and share it within your team.
# To install, use quick open (Ctrl + p) ext install vscode-eslint
theme
Introducing extensions that can change the look of VSCode and customize it to make you want to use it even more.
Simple icon theme
Simple icon theme is an icon theme.
What icon? Some people may think this, but there is a function to display icons in Explorer, which can be displayed by pressing "Shilt + Ctrl + E", and when you type ">icon theme" in the command palette, the command is displayed. When you select , you can select an icon.
At first, there were only "minimal" and "seti" (or so I think. I don't know because I put too many, but it's correct!), but you can also search for them in the extension marketplace and install them.
If you display the extension with "Ctrl + Shift + x" and search for "icon", you will find many more, so just install the icon theme you like and you can use it right away.
# To install, use quick open (Ctrl + p) ext install vscode-simple-icons
Ayu
Ayu is an extension that is a set of color themes and icons.
I like the icon set and it's easy to see, so I recommend it.
It is also possible to install this extension and use only the icons, so why not install it in various ways and try it out?
# To install, use quick open (Ctrl + p) ext install ayu
snippet
Gulp Snippets
Gulp Snippets is an extension with snippets useful when creating gulpfile.js.
If you type gulp in gulpfile.js, all the snippets will be displayed, so there is nothing to remember to use them.
What I think is really cool is that if you type pipe, a snippet of ``.pipe(name('file'))'' will appear, which I have to say is convenient.
If you use gulp, this is an extension that is worth installing.
# To install, use quick open (Ctrl + p) ext install vscode-gulp
WordPress Snippet
WordPress Snippet is an extension that turns Wordpress methods and constants into snippets.
This is a useful extension when developing WordPress plugins or creating small programs to be included in functions.php.
# To install, use quick open (Ctrl + p) ext install wordpress-snippet
useful tools
JSON Tools
JSON Tools is an extension that minifies and formats JSON strings for easy viewing.
For better or worse, this is the only feature available, but it will be extremely useful for developers!
You only need to memorize the shortcuts "ctrl + m" and "ctrl + alt + m" (just search for json in the command palette and you'll find it right away!), so it's a friendly design that's easy on your brain.
# To install, use quick open (Ctrl + p) ext install json-tools
Tera term language support
Tera term Language Support is an extension that supports the creation of TTL, a macro language for TeraTerm that it is no exaggeration to say that all server engineers have.
# To install, use quick open (Ctrl + p) ext install vscode-teraterm-lang
PHP IntelliSense
PHP IntelliSense provides functions such as code hints and code jumps that become more desirable as the scale of PHP development on VSCode increases. The original VSCode cannot be called easy to develop, but with this extension, the situation changes all at once.
If you want to use Eclipse + PDT for development using a framework, this is a must-have extension. You can do (almost) the same thing as this combination.
Please note that a PHP7 execution environment is required for execution, so PHP5ers can also use this as an opportunity to update their environment, making this an extension that's twice as delicious (it's up to you whether you think so or not). .
It would be very helpful if the version could be updated to support multiple PHP execution environments.
# To install, use quick open (Ctrl + p) ext install php-intellisense
PHP DockBlocker
PHP DocBlocker](https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker) is an extension that automatically generates a simple comment block that follows the PHPDocumemtor format.
Currently (March 16, 2017), it is treated as an alpha version, and what can be done is limited, but I am looking forward to future developments, so I will introduce it as a 21st century frame.
# To install, use quick open (Ctrl + p) ext install php-docblocker
Easy Sass
Easy Sass is an extension that automatically compiles sass/scss files into css when you save them.
I think most of the main users of VSCode compile sass/scss by writing a gulp or grant task and watching it, but if you install this extension, the compilation task No additional work is required.
When developing with multiple people, it is more efficient to define tasks using a task runner, and it is easier to distribute tasks, but when developing a small product, such as when developing by one person, it is better to reduce the number of steps. I think so.
# Install with quick open (Ctrl + p) ext install easysass
Encode Decode
Encode Decode is an extension that summarizes processing related to encoding/decoding.
Select the string you want to convert and enter "convert selection" in the command palette. A list of possible conversion processes will be displayed, so just select the desired conversion method.
Encoding/decoding to base64 is not something you use often, but it is a useful extension to have.
# To install, use quick open (Ctrl + p) ext install ecdc # The extension name is cool!
That's it.