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

Visual Studio Codeのプラグインや設定

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

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

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

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

Usage
Auto Rename Tag のページより

Auto Rename Tagのページ

Autoprefixer

CSSでまだ勧告されてないプロパティなどを先行実装する際に、ベンダープレフィックスというものをつけたりしますよね?

これは、そんなベンダープレフィックスを必要に応じて、自動で付けてくれるプラグインです。

Gulpなどのタスクランナーでもよく使われているものなんですが、それのVSCodeのプラグイン版ですね。

ファイル保存時に自動でAutoprefixerを実行して、ベンダープレフィックスをつけるようにも設定できますが、僕は手動でAutoprefixerを実行するようにしています。

具体的にはショートカットキーは割り当ててますが、コマンドパレット(「Shift」+「command(Ctrl)+「P」」)から、「Autoprefixer CSS」を実行してます。

VS Code plugin
Autoprefixerのページより

ちなみに僕は、settings.jsonに以下のような設定をしていて、比較的古いブラウザにも対応するようにしています。

僕の設定

settings.json
"autoprefixer.browsers": [
  "> 1%",
  "last 2 versions",
  "Firefox ESR",
  "ie 8",
  "ie 9"
],

Autoprefixerのページ

CSS Peek

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

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

working
CSS Peek のページより

CSS Peakのページ

CSScomb

CSScombは、実行するとCSSをフォーマットし、プロパティーの並び順を変更するプラグインです。

これも、Autoprefixerと同様で、Gulpなどのタスクランナーでもよく使われているものなんですが、それのVSCodeのプラグイン版ですね。

フォーマットのルールや、並び順も自由に設定できるので、コーディングのルールによって柔軟に対応できるのがいいですね。

これも保存時に自動でフォーマットしてくれるように出来るのですが、僕はショートカットキーは割り当ててますが、コマンドパレット(「Shift」+「command(Ctrl)+「P」」)から、「CSScomb: Format Styles」を実行してます。

CSScombのページ

CSSTree validator

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

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

CSSTree validator のページより

CSSTree validatorのページ

Highlight Matching Tag

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

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

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

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

demo
Highlight Matching Tag のページより

Highlight Matchingのページ

HTMLHint

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

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

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

hero
vscode-htmlhint のページより

HTMLHintのページ

IntelliSense for CSS class names in HTML

これはCSSのクラス名を 補完してくれるプラグインです。

予めCSSファイルにclassを作っておけば、HTMLを記述しているときに、class名を保管しくれて非常に便利です。

IntelliSense for CSS class names in HTMLのページより

IntelliSense for CSS class names in HTML

Live Sass Compiler

Sass を CSSに自動でコンパイルしてくれるVSCodeのプラグインです。

App Preview
Live Sass Compiler のページより

このプラグインをインストールすると、VSCodeの下部に「Watch Sass」というボタンが追加されるので、このボタンを押すだけで、SassファイルをWatchすることができます。

Sassのコンパイルは、VSCodeのプラグインを使わず、Gulpなどでコンパイルすることもあるのですが、ちょっと手軽にSassファイルをコンパイルするときに、このプラグインを使っています。

VSCodeには、このLive Sass Compiler以外にもSassをコンパイルしてくれるプラグインがあるのですが、パーシャルファイルをコンパイルしてくれなかったりするんですよね。

その点このLive Sass Compilerは、パーシャルファイルのコンパイルも出来るので、非常に便利です。

僕の設定

settings.json
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../css/"
  }
],
"liveSassCompile.settings.autoprefix": [
  "> 1%",
  "last 2 versions",
  "Firefox ESR",
  "ie 8",
  "ie 9"
],

Live Sass Compiler のページ

Live Server

HTMLのリアルタイムプレビューを行えるプラグインです。
(上記「Live Sass Compiler」を入れると自動でインストールされる)

これも、bracket というAdobe社のテキストエディターではデフォルトで出来るのですが、VSCodeの場合は、このプラグインを入れることで実現できます。

Live Server Demo VSCode
Live Server のページより

これをインストールすると、VSCodeの下部に「Go Live」ボタンが追加され、それをクリックすることで、ブラウザが起動します。

僕は、Chromeで開いてほしいので、settings.jsonにChromeで開くように記述しています。

僕の設定

settings.json
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.CustomBrowser": "chrome",

Live Serverのページ

settings.jsonに書いてる設定

さて、プラグインを沢山紹介してきましたが、ここからは設定に関することを紹介したいと思います。

結論から言えば、インストールしたばかりの、まっさらなVSCodeにでも、以下の設定をするだけで十分使えます。

settings.json
{
  "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

では。