【マークアップ向け】VSCODEの拡張機能

【2021年版】VSCODE拡張機能で入れておきたいもの厳選

共通

Japanese Language Pack for Visual Studio Code
VSCODE日本語化

Indent-rainbow
インデントに色を付ける

Color highlight
カラーコード可視化

Code Spell Checker
クラス名や変数名などスペルミスを波線で知らせてくれます
参考リンク

HTML

Auto close tag
タグを自動で閉じてくれるもの

Auto rename tag
開始タグと終了タグを書いてくれるもの

bracket pair colorizer
カッコ内に色を付ける

Prettier – Code formatter
コーディングルールに沿った形に整形してくれるツール
HTMLの構造を規則正しくしてくれる
※一貫性のあるコーディングを求められる際には、必ず使う

Intelligence for css class names in HTML
CSSクラスを指定するときに、入力補完してくれる

W3C Validation
適切なタグが何かをいちいち調べるのも手間だと思います。
そこでW3CサイトでHTMLのソースを貼り付けて、いたかと思いますが、実はVSCodeのプラグインでやってくれるようなプラグインがあります。
参考リンク

CSS

CSScomb
PrettierのCSS版

CSSCombの導入方法

1. Ctrl + Shift + X 　…　拡張機能表示する
  「CSSComb」と検索し、インストールする

2. CSSCombの設定ファイルの格納先を決める
　格納場所としては、setting.jsonファイルの近くのパスに格納するのがよいと思ってます。
　下記のパスで作りましょう。

/Users/【Macのアカウント名】/Library/Application Support/Code/User/csscomb.json

ファイル名は、csscomb.jsonで作成しましょう。

3. setting.jsonファイルに追記しましょう

"csscomb.formatOnSave": true,
"csscomb.preset": "/Users/【Macのアカウント名】/Library/Application Support/Code/User/csscomb.json"

4. csscomb.jsonに記載しましょう

{
  "remove-empty-rulesets": true,
  "always-semicolon": true,
  "color-case": "lower",
  "block-indent": "  ",
  "color-shorthand": true,
  "element-case": "lower",
}

【ルール一覧】
・remove-empty-rulesets
プロパティ、コメントのないスコープ削除
・always-semicolon
常にプロパティにはセミコロンを付けるようにする
・color-case
カラーコード書く際に大文字(Upper)か、小文字(Lower)で記述するかを統一する
・block-indent
インデントの入れ方を統一させる
・color-shorthand
カラーコードを3桁か、6桁で統一させる
・element-case
要素セレクターの文字が大文字(Upper)か、小文字(Lower)で統一させる

とひとまずこのくらい入れてれば、よい気がします。

5. 対象のCSSで保存をかけてみて、ルール通り形成されれば成功です。
※setting.jsonの"csscomb.formatOnSave": trueを指定することにより、保存すると自動で処理が実行されます

ちなみにルールをカスタマイズしたい場合、下記リンクで調べて使ってください
https://github.com/csscomb/csscomb.js/blob/master/doc/options.md