We have compiled a list of extensions that will make using Visual Studio Code more fun.

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.