VSCode 12のプラグイン & 基本設定

使うプラグインを整理してみた。

おすすめ 12のプラグイン一覧

Japanese Language Pack for Visual Studio Code

言わすもがなの表示を日本語にしてくれるプラグイン。

これは英語の苦手な　我には必須。

Live Server

html や css を確認するときに重宝する。

変更した部分がすぐに反映される。

SCSS Everywhere

phpファイルでもクラス名やID名を保管してくれる。

サポートしている言語が多い。

Auto Rename Tag

開始タグを修正したら終了タグも一緒に修正してくれる。

Highlight Matching Tag

対応するタグがハイライトされる。

indent-rainbow

タブが色付けされ階層構造が分かりやすくなる

Path Intellisense

パスを表示してくれる。

DartJS Sass Compiler and Sass Watcher

Sassをコンパイルしてcssを作ってくる。

WordPress Snippets

WordPress の 候補を出してくれる。

PHP Intelephense

phpの補完機能がでる。エラーチェックもしてくれる。コードジャンプができる。

GitLens — Git supercharged

git を使っている人は必須

Material Icon Theme

アイコンを変えられる。可愛い。

VSCode の おすすめ設定

設定: autosave

afterDelay に変更する。

設定: BracketPairs

「Bracket Pair Colorizer 2」はVS Code に組み込まれているので設定を変更する。

検索窓に「BracketPairs」と入れて検索　該当項目を「true」または「active」にする。

設定: settings.json

閉じタグの後にコメントを記載する

"emmet.syntaxProfiles": {
  "html": {
    "filters": "html,c"
  }
},
"emmet.preferences": {
  "filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
},

スニペットの言語を英語から日本語に変える

  "emmet.variables": {
    "lang": "ja"
  },

Editor : Format On Save

チェックする。