CSSを書く際に必ず意識している

僕がおすすめするVSCodeのプラグインまとめ

TAK / Web Creator.

Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。

おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。

(※2019.11.14 追記)当記事が「はてなブックマーク」テクノロジーカテゴリーの人気エントリーに掲載されました。ありがとうございます。

# Japanese Language Pack for Visual Studio Code

VSCodeを日本語化してくれるプラグイン。

僕は英語弱者なので真っ先にインストールした。

---

# Auto Rename Tag

開始タグを修正したときに終了タグも自動修正してくれるプラグイン。

わりと閉じタグの修正は忘れがちだし、わざわざ閉じタグを修正するのも面倒くさいので入れとくと便利。

---

# htmltagwrap

タグで囲みたい範囲を選択し、Option(Alt) + W を打つと自動的にpタグで囲んでくれる。

そのままの状態で任意のタグ名を打てばそのタグに切り替わる。

結構使う。

---

# Highlight Matching Tag

対応するタグを黄色い下線で強調表示してくれるプラグイン。

長めのHTMLのdivタグなど、結構迷子になるので結構役に立ってる。

---

# Bracket Pair Colorizer

対応するカッコに色付けしてくれるプラグイン。

コードの視認性を高めるためにほぼ必須。

---

# indent-rainbow

インデントに色付けしてくれるプラグイン。

インデントがわかりやすくなるのに加えて、崩れが発生したら強調表示してくれる。

---

# vscode-icons

ファイルアイコンを分かりやすくしてくれるプラグイン。

---

# EvilInspecto

全角スペースを検出し強調して表示してくれるプラグイン。

アイコンがめっちゃ悪そう。

---

# Color Highlight

カラーコードをその色でマーキングしてくれるプラグイン。

---

# Regex Previewer

正規表現をチェックする拡張機能。エディタ内でチェックできるのは便利。

---

# Better Comment

指定したワードや記号から始まるコメントに色をつけることができる。

一時的につけたコメントや重要なコメントを、通常のそれらと視覚的に区別することができる。

---

# Bookmarks

コード内にブックマークをつけることができる。作業箇所の目印を付けるなどに。

---

# SVG Viewer

SVGファイルを画像として見ることが出来る。

他のツールを使わずにエディタ上で完結できるのは利点。

---

# WordPress Snippet

WPのスニペットプラグイン。

WP関数の最初の数文字を入力後Command(Ctrl) + Spaceで補完してくれるので、関数うろ覚えでも安心。

---

# GitLens

コードにいつ誰がコミットしたかの概要を表示したり、ブランチやタグ間の差分を表示することができるプラグイン。

Git使うなら入れといたほうがいい。

---

# Git History

Gitの変更を表示することができるプラグイン。

条件からソートして表示することも可能。

---

# EJS language support

僕はテンプレートエンジンにEJSを使っているので。

VSCodeはデフォルトだとEJSをサポートしていない為、EJSに対応させるために入れる。

---

# Prettier

コードフォーマッター。コードのスタイルの一貫性を保つためにこういったフォーマッターはほぼほぼ必須だと思っている。

Stylelintと併用の時は従来の「prettier.stylelintIntegration」が非推奨になってしまったので別の方法を試す必要がある。

設定のやり方は以下のQiitaがわかりやすいかも。

---

# vscode-php-cs-fixer

PHPのコードフォーマッター。

利用する際は設定ファイルを参照する必要がある。

---

# EditorConfig

複数の人が関わるプロジェクトの場合にエディタの設定を統一しておく。

外部設定ファイル(.editorconfig)が必要となるけれど、検索すればいくつかおすすめの設定例がヒットするはず。

僕の設定はこんな感じだった。

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.{html,ejs,scss,css,js,svg}]
indent_style = space
indent_size = 2

---

# VSCodeThemes

プラグインではないけれど、VSCodeのデフォルトのテーマが気にくわないならVSCodeThemesから好きなテーマをインストールする。

僕はOne Dark Proを使っている。

---

そのうちコンテンツを追加します。ここで記事は終了ですが、もし更新した際の通知を受け取りたい方がいらっしゃいましたら、課金よろしくお願いいたします。

Twitterでも有益な情報をちょくちょく発信しています。


ここから先は

35字

¥ 100

愛と平和