![Shibajuku](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="177" height="32"><rect fill-opacity="0"/></svg>)
2019年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します
-
この記事を書いた人：
こんにちは、実は久しぶりの投稿の、どうもしばおです。
さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。
僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有していますw
![Shibajuku](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800"><rect fill-opacity="0"/></svg>)
そもそも、VSCode（Visual Studio Code）って？
VSCode（Visual Studio Code）はMicrosoft社が開発したオープンソースのテキストエディタです。
最近様々な高機能テキストエディタが登場していますが、その中でもこのVS Codeはかなり便利な機能がデフォルトで付いていて、かつ軽量なので、インストールするだけでも結構使えます。
そこに、プラグインを入れることで更に便利になるんですよね、 なので、今回は僕がで使っているおすすめのプラグインを紹介したいと思います。
プラグイン(拡張機能)
僕はあまりたくさんのプラグインを入れたくない派かのですが、それでもいくつか便利なプラグインを入れています。
Japanese Language Pack for Visual Studio Code
VSCodeって昔は最初から日本語に対応されてたのですが、最近ではこのプラグインを入れないと日本語化されません。
なので、日本語で使いたーい！ってかたは必須のプラグインなのではないでしょうか。
Japanese Language Pack for Visual Studio Codeのページ
Auto Rename Tag
これは、HTMLの編集時に、開始タグを変更したら、自動で終了タグも編集してくれるプラグインです。
開始タグを変更すると同時に、終了タグを変更してくれるので、変更忘れなどが防げていいですね。
Autoprefixer
CSSでまだ勧告されてないプロパティなどを先行実装する際に、ベンダープレフィックスというものをつけたりしますよね？
これは、そんなベンダープレフィックスを必要に応じて、自動で付けてくれるプラグインです。
Gulpなどのタスクランナーでもよく使われているものなんですが、それのVSCodeのプラグイン版ですね。
ファイル保存時に自動でAutoprefixerを実行して、ベンダープレフィックスをつけるようにも設定できますが、僕は手動でAutoprefixerを実行するようにしています。
具体的にはショートカットキーは割り当ててますが、コマンドパレット（「Shift」+「command（Ctrl）+「P」」）から、「Autoprefixer CSS」を実行してます。
ちなみに僕は、settings.jsonに以下のような設定をしていて、比較的古いブラウザにも対応するようにしています。
僕の設定
CSS Peek
これは、bracket というAdobe社のテキストエディターではデフォルトで出来るのですが、HTMLのソースコード上に、その要素に当てられているスタイル（CSS）を表示してくれるプラグインです。
これを使うことで、HTML上からスタイルを参照する際に、いちいちCSSファイルを開いて該当するセレクターを探す手間が省けます。
CSScomb
CSScombは、実行するとCSSをフォーマットし、プロパティーの並び順を変更するプラグインです。
これも、Autoprefixerと同様で、Gulpなどのタスクランナーでもよく使われているものなんですが、それのVSCodeのプラグイン版ですね。
フォーマットのルールや、並び順も自由に設定できるので、コーディングのルールによって柔軟に対応できるのがいいですね。
これも保存時に自動でフォーマットしてくれるように出来るのですが、僕はショートカットキーは割り当ててますが、コマンドパレット（「Shift」+「command（Ctrl）+「P」」）から、「CSScomb: Format Styles」を実行してます。
CSSTree validator
CSSTree validatorはCSSの構文チェックを行ってくれるプラグインですね。
このプラグインを入れるとCSSの記述が間違っている箇所に波線を引いて、エラーログを表示してくれるので、ミスに気づきやすくなります。
Highlight Matching Tag
Highlight Matchingは、HTMLの開始タグと対応する終了タグをわかりやすく表示してくれるプラグインです。
HTMLは終了タグが離れた位置にあるとき、どの開始タグに対応したタグなのかがわかりにくくなります。
とくに<div> タグなんかは、</div>地獄になります。
こんな時でもこのプラグインを活用すると、対応するタグをわかりやすく表示してくれるので、ありがたいですね。
HTMLHint
HTMLの構文チェックをしてくれるプラグインです。
HTMLの構文が間違っている箇所に波線を引いてくれるのでミスに気づきやすいですね。
まぁ、これでエラーが無かったからといってHTMLの要素が適切かどうかは全く別の話なので、タグの妥当性などは自分でチェックしましょう。
IntelliSense for CSS class names in HTML
これはCSSのクラス名を 補完してくれるプラグインです。
予めCSSファイルにclassを作っておけば、HTMLを記述しているときに、class名を保管しくれて非常に便利です。
IntelliSense for CSS class names in HTML
Live Sass Compiler
Sass を CSSに自動でコンパイルしてくれるVSCodeのプラグインです。
このプラグインをインストールすると、VSCodeの下部に「Watch Sass」というボタンが追加されるので、このボタンを押すだけで、SassファイルをWatchすることができます。
Sassのコンパイルは、VSCodeのプラグインを使わず、Gulpなどでコンパイルすることもあるのですが、ちょっと手軽にSassファイルをコンパイルするときに、このプラグインを使っています。
VSCodeには、このLive Sass Compiler以外にもSassをコンパイルしてくれるプラグインがあるのですが、パーシャルファイルをコンパイルしてくれなかったりするんですよね。
その点このLive Sass Compilerは、パーシャルファイルのコンパイルも出来るので、非常に便利です。
僕の設定
Live Server
HTMLのリアルタイムプレビューを行えるプラグインです。
（上記「Live Sass Compiler」を入れると自動でインストールされる）
これも、bracket というAdobe社のテキストエディターではデフォルトで出来るのですが、VSCodeの場合は、このプラグインを入れることで実現できます。
これをインストールすると、VSCodeの下部に「Go Live」ボタンが追加され、それをクリックすることで、ブラウザが起動します。
僕は、Chromeで開いてほしいので、settings.jsonにChromeで開くように記述しています。
僕の設定
settings.jsonに書いてる設定
さて、プラグインを沢山紹介してきましたが、ここからは設定に関することを紹介したいと思います。
結論から言えば、インストールしたばかりの、まっさらなVSCodeにでも、以下の設定をするだけで十分使えます。
なので、とりあえず自分の環境じゃなくても、そこにVSCodeがあれば、この設定をするだけで僕はわりとハッピーです。
HTMLのフォーマットも設定さえすればデフォルトで十分できますし、EmmetやGitに関してもとくにプラグインなくても問題ないですね。
で、実際には上記のプラグインの設定も合わせて記述しているのですが、結構長いので、Githubにアップしてますので、よかったらご参考になさって下さい。
僕のGithubのVSCodeのsettings.jsonのリポジトリ
さてどうでしょうか？
すでに知ってるわって感じなのがほとんどだと思いますが、少しでも参考になればうれしいです。
うちのオンラインサロン「Shibajuku」でもVSCodeをガンガン使って、VSCodeを布教しまくってますw
去年まではAtom使ってたんですけどねw
では。