VSCode で使っているプラグイン 2020年最新版
今まで、Sublime Text 3 をずっと使っていました。
使い始めた当時は、超軽いし、動作早いし、便利なプラグインあるしでもうメロメロでした。
しかし、すごくVSCodeがとてもシェアを増やしていったので、気になり今年に入ってついにVSCodeを使い始めました。
すると、SublimeTextを触った時に感じたあの恋に落ちる感じを感じることができました。てかもうメロメロです(笑)
今回はウェブサイトを製作するうえでおすすめする、Visual Studio Codeのプラグインを紹介します。
エディタ関係のプラグイン
Japanese Language Pack for Visual Studio Code
VSCodeを日本語にするプラグインです。
入れるだけで日本語にしてくれる優れもの。
vscode-icons
Visual Studio Code をアイコンで装飾することができるプラグインです。
![demo](https://raw.githubusercontent.com/vscode-icons/vscode-icons/master/images/screenshot.gif)
Live Server
静的・動的ページのライブリロード機能を備えたローカル開発サーバーを立てることのできるプラグインです。
![Live Server Demo VSCode](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif)
Bracket Pair Colorizer 2
一致するカッコを色で識別できるようにしてくれるプラグインです。
![Bracket Pair Colorizer Screenshot](https://github.com/CoenraadS/Bracket-Pair-Colorizer-2/raw/master/images/example.png)
Path Autocomplete
![demo gif](https://raw.githubusercontent.com/ionutvmi/path-autocomplete/master/demo/path-autocomplete.gif)
コーディング関係のプラグイン
htmltagwrap
選択範囲をHTMLタグで囲むことのできるプラグインです。
使用するには、1つまたは複数のコードを選択し、”Alt + W”(Macの場合は “Option + W”)を押します。
![](https://github.com/bgashler1/vscode-htmltagwrap/raw/master/images/screenshot.gif)
Easy Sass
保存時にSASS/SCSSファイルを自動的に.cssと.min.cssにコンパイルしてくれるプラグインです。
また、プロジェクト内のすべてのSCSS/SASSファイルを素早くコンパイルすることができます。
![Demo](https://github.com/wojciechsura/easysass/raw/master/demo.gif)
Auto Rename Tag
1つのHTML/XMLタグの名前を変更すると、ペアになったHTML/XMLタグの名前を自動的に変更してくれるプラグインです。
![Usage](https://github.com/formulahendry/vscode-auto-rename-tag/raw/master/images/usage.gif)
Prettier – Code formatter
HTMLやJavaScriptなどのソースファイルをルールに沿った形に整形してくれるプラグインです。
![](https://sakuyasan.net/wp-content/uploads/2020/04/save.png)
設定から画像のように設定すれば保存をしたときに自動でコードを成型してくれます。
さいごに
デフォルトでもEmmetが入っていたり、補完機能が充実していてびっくりしました。
間違いなく初心者におすすめのエディタは?と聞かれればVSCodeというでしょう。
また、今回はGit系はまだ使っていないので紹介していませんが、ものすごく便利そうなのでいずれ追加しようと思います。