こんにちは、実は久しぶりの投稿の、どうもしばおです。

さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。
（2020年10月05日更新）

僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有していますw

フロントエンド系Webクリエーター養成所 「Shibajuku」

そもそも、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の編集時に、開始タグを変更したら、自動で終了タグも編集してくれるプラグインです。

開始タグを変更すると同時に、終了タグを変更してくれるので、変更忘れなどが防げていいですね。

Auto Rename Tagのページ

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"
],

Autoprefixerのページ

CSS Peek

これは、bracket というAdobe社のテキストエディターではデフォルトで出来るのですが、HTMLのソースコード上に、その要素に当てられているスタイル（CSS）を表示してくれるプラグインです。

これを使うことで、HTML上からスタイルを参照する際に、いちいちCSSファイルを開いて該当するセレクターを探す手間が省けます。

CSS Peakのページ

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のページへ

ただ、「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」などの設定ファイルを配置して設定するのが一般的ですかね。

記述方法やルールは公式サイトをご確認ください。

stylelintのページへ

CSSTree validator（利用停止）

CSSTree validatorはCSSの構文チェックを行ってくれるプラグインですね。

このプラグインを入れるとCSSの記述が間違っている箇所に波線を引いて、エラーログを表示してくれるので、ミスに気づきやすくなります。

CSSTree validatorのページ

「stylelint」と役割がかぶる部分があるので利用を停止しました。

Highlight Matching Tag

Highlight Matchingは、HTMLの開始タグと対応する終了タグをわかりやすく表示してくれるプラグインです。

HTMLは終了タグが離れた位置にあるとき、どの開始タグに対応したタグなのかがわかりにくくなります。

とくに<div> タグなんかは、</div>地獄になります。

こんな時でもこのプラグインを活用すると、対応するタグをわかりやすく表示してくれるので、ありがたいですね。

Highlight Matchingのページ

HTMLHint

HTMLの構文チェックをしてくれるプラグインです。

HTMLの構文が間違っている箇所に波線を引いてくれるのでミスに気づきやすいですね。

まぁ、これでエラーが無かったからといってHTMLの要素が適切かどうかは全く別の話なので、タグの妥当性などは自分でチェックしましょう。

HTMLHintのページ

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 Sass Compiler のページ

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 などからプレビューを見ることも可能です。

やり方は、以下の記事にも書きましたので良かったらどうぞ。

Visual Studio Code のLive Serverを使って実機（iPhoneなど）でプレビューする方法。（PHPなども可能）

Live Serverのページ

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

フロントエンド系Webクリエーター養成所 「Shibajuku」

去年まではAtom使ってたんですけどねw

では。