2020年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します

こんにちは、実は久しぶりの投稿の、どうもしばおです。
さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。
(2020年10月05日更新)
僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有していますw
そもそも、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を実行するようにしています。
具体的にはショートカットキーは割り当ててますが、コマンドパレット(⌘Win:Ctrl + Shift + P)から、「Autoprefixer CSS」を実行してます。

ちなみに僕は、settings.jsonに以下のような設定をしていて、比較的古いブラウザにも対応するようにしています。(2020年10月05日に仕様変更に基づき記述方法を変更しました)
僕の設定
"autoprefixer.browsers": [
"> 1%",
"last 2 versions",
"Firefox ESR"
],
CSS Peek
これは、bracket というAdobe社のテキストエディターではデフォルトで出来るのですが、HTMLのソースコード上に、その要素に当てられているスタイル(CSS)を表示してくれるプラグインです。
これを使うことで、HTML上からスタイルを参照する際に、いちいちCSSファイルを開いて該当するセレクターを探す手間が省けます。

CSScomb(開発終了)
CSScombは、実行するとCSSをフォーマットし、プロパティーの並び順を変更するプラグインです。
これも、Autoprefixerと同様で、Gulpなどのタスクランナーでもよく使われているものなんですが、それのVSCodeのプラグイン版ですね。
フォーマットのルールや、並び順も自由に設定できるので、コーディングのルールによって柔軟に対応できるのがいいですね。
これも保存時に自動でフォーマットしてくれるように出来るのですが、僕はショートカットキーは割り当ててますが、コマンドパレット(「Shift」+「command(Ctrl)+「P」」)から、「CSScomb: Format Styles」を実行してます。
拡張機能の開発終了に基づき利用を停止しました。
Prettier – Code formatter
(2020年10月05日 追加)
「Prettier」は定番のコードフォーマッターですね。
普段は「npm」でインストールした「Prettier」を使ってコードをフォーマット(綺麗に)してるんですが、「CSSComb」の開発停止に伴いVSCodeのプラグイン版をインストールしてみました。
VSCodeの "editor.formatOnSave"
の設定にも対応してるので、保存時に自動的にコードを綺麗にしてくれるのが便利ですね。
また、デフォルトのフォーマッターを「Prettier」に設定しておけば他のフォーマッターより優先して利用されます。
僕の設定
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
対応言語も多くて、HTMLやCSS、JavaScriptなどさまざまな言語に対応しているので、コードのフォーマットにはこの「Prettier」ひとつあれば結構いい感じです。
しかも、ただコードを綺麗にしてれるだけじゃなく、例えばCSSの行末に「;
」を記述忘れしていた時とかは、「わ!セミコロン忘れてはるやん!も〜しゃーないなー」って言って自動でつけてくれたりもします。
フォーマットのルールはいろんな方法で設定できます。
VSCodeの設定ファイルでも設定は可能ですが、定番は開発してるコードのルートディレクトリに「.prettierrc.json」などの設定ファイルを配置して設定するのが一般的ですかね。
ただ、「Prettier」だけではコードフォーマットのルールがちょっと物足りないので、下記の「stylelint」と組み合わせるといい感じです。
stylelint
(2020年10月05日 追加)
「stylelint」はCSSのルールをチェックしてくれる拡張機能です。(類似のものが多いですが、公式のものがおすすめです。)
これも普段は「npm」でインストールして使ってるのですが、CSSがコーディングルールに沿っているかをチェックしてくれて、ルールを逸脱している箇所をエラーとして表示してくるプラグインになります。

ただ、これは正直「npm」を利用できる方はそっちで利用するほうがおすすめかもしれません。
ルールの設定を継承したり「stylelint」の拡張機能を利用するのには「npm」のほうが楽です。
ただ、基本的はCSSのルールチェックは拡張機能だけでも十分できるので、単純にCSSのコーディングルールに沿ってコーディングしたい場合はこれでいい感じにできます。
CSSのルールはめちゃくちゃ細かく設定ができます。
「値が0の時単位は不要」とか「フォントは必ずダブルクォーテーションで囲わなきゃダメ」「!importatを使っちゃだめ」とか色々できます。
また、簡易的な間違いは自動的に修正するようにもできます。
便利でしょ?
保存時に自動で stylelint を実行するようにしてればとても便利です。
あ、デフォルトのバリデーターをオフにしておかないと、2重でチェックされることもあるので、デフォルトのバリデーターをオフにするのもおすすめです。
僕の設定
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true,
},
"css.validate": false,
"less.validate": false,
"scss.validate": false,
これで、チームで開発する時に、みんなでルールを統一しながらコーディングできますね。
ルールの設定は「Pretter」同様、開発してるルートディレクトリに「.stylelintrc.json」などの設定ファイルを配置して設定するのが一般的ですかね。
CSSTree validator(利用停止)
CSSTree validatorはCSSの構文チェックを行ってくれるプラグインですね。
このプラグインを入れるとCSSの記述が間違っている箇所に波線を引いて、エラーログを表示してくれるので、ミスに気づきやすくなります。

「stylelint」と役割がかぶる部分があるので利用を停止しました。
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は、パーシャルファイルのコンパイルも出来るので、非常に便利です。
僕の設定
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
}
],
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions",
"Firefox ESR"
],
Live Server
HTMLのリアルタイムプレビューを行えるプラグインです。
(上記「Live Sass Compiler」を入れると自動でインストールされる)
これも、bracket というAdobe社のテキストエディターではデフォルトで出来るのですが、VSCodeの場合は、このプラグインを入れることで実現できます。

これをインストールすると、VSCodeの下部に「Go Live」ボタンが追加され、それをクリックすることで、ブラウザが起動します。
僕は、Chromeで開いてほしいので、settings.jsonにChromeで開くように記述しています。
僕の設定
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.CustomBrowser": "chrome",
また、Live Serverを使うとローカルサーバーが立ち上がるので、同じwifiネットワークに接続した iPhone などからプレビューを見ることも可能です。
やり方は、以下の記事にも書きましたので良かったらどうぞ。
settings.jsonに書いてる設定
さて、プラグインを沢山紹介してきましたが、ここからは設定に関することを紹介したいと思います。
結論から言えば、インストールしたばかりの、まっさらなVSCodeにでも、以下の設定をするだけで十分使えます。
{
"files.autoSave": "onWindowChange",
"files.autoGuessEncoding": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"editor.fontSize": 16,
"editor.renderWhitespace": "all",
"editor.fontFamily": "'SourceHanCodeJP-Medium', 'Source Han Code JP', Consolas, 'Courier New', monospace",
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.formatOnPaste": true,
"editor.tabSize": 2,
"editor.renderLineHighlight": "all",
"editor.renderControlCharacters": true,
"editor.cursorBlinking": "smooth",
"editor.smoothScrolling": true,
"editor.minimap.showSlider": "always",
"window.openFoldersInNewWindow": "on",
"window.title": "${activeEditorMedium}${separator}${rootName}",
"workbench.editor.labelFormat": "short",
"workbench.editor.tabSizing": "shrink",
"breadcrumbs.enabled": true,
"html.autoClosingTags": false,
"html.format.extraLiners": "",
"html.format.maxPreserveNewLines": 2,
"html.format.wrapLineLength": 0,
"html.format.unformatted": null,
"html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p",
"css.validate": false,
// "php.validate.executablePath": "C:/xampp/php/php.exe", // Windows
// "php.validate.executablePath": "/usr/bin/php", // Mac
"git.ignoreMissingGitWarning": true,
"emmet.showSuggestionsAsSnippets": true,
"emmet.triggerExpansionOnTab": true,
"emmet.variables": {
"lang": "ja"
},
}
なので、とりあえず自分の環境じゃなくても、そこにVSCodeがあれば、この設定をするだけで僕はわりとハッピーです。
HTMLのフォーマットも設定さえすればデフォルトで十分できますし、EmmetやGitに関してもとくにプラグインなくても問題ないですね。
で、実際には上記のプラグインの設定も合わせて記述しているのですが、結構長いので、Githubにアップしてますので、よかったらご参考になさって下さい。
僕のGithubのVSCodeのsettings.jsonのリポジトリ
さてどうでしょうか?
すでに知ってるわって感じなのがほとんどだと思いますが、少しでも参考になればうれしいです。
うちのオンラインサロン「Shibajuku」でもVSCodeをガンガン使って、VSCodeを布教しまくってますw
去年まではAtom使ってたんですけどねw
では。