VSCodeにインストールしている拡張機能を紹介

前提

今回は、これからフロントエンドを学ぶ方向けに、実際に私が使っているVSCodeのおすすめ拡張機能を紹介します。

開発環境や使用言語によって拡張機能は変わってくるので、前提として、ざっくりと私の主な開発環境や言語なども挙げておきます。

一言で言えば、ECサイトやアプリ開発をするフロントエンドエンジニアという感じです。

• ・Windows11にて仮想環境（WSL2、Linux、Ubuntu）
• ・HTML、CSS（Sass、Scss）、JavaScript、TypeScript、React、Liquid（Shopify）...

汎用性の高い拡張機能

まずは、開発環境などに関わらず便利な汎用性の高い拡張機能を紹介します。

Auto Rename Tag

開始タグを書き換えた際に、閉じタグも同時に修正してくれます。

Bracket Pair Colorizer 2

括弧を色分けして、階層を視覚的に分かりやすくしてくれます。

indent-rainbow

インデントを色分けして、階層を視覚的に分かりやすくしてくれます。

Japanese Language Pack for Visual Studio Code

VSCodeを日本語化してくれます。

Trailing Spaces

いつの間にか入っている無駄なスペースを可視化し、保存時に削除できるようになります。

Remote - WSL

WSLで開発するための拡張機能です。

フォーマット・補完系の拡張機能

次に、フォーマットや補完を強化するための拡張機能です。

HTML CSS Support

HTML・CSSの補完を強化します。

Sass

Sass（Scss）のハイライトやフォーマットなど基本的な機能を追加します。

ES7 React/Redux/GraphQL/React-Native snippets

Reactで開発する際に便利なスニペットをまるっと使えるようになります。

vscode-styled-components

styled-componentsのハイライトなどの機能を追加します。

Liquid

Shopify独自の言語であるLiquidのハイライトやスニペットを追加します。

Shopify Liquid Template Snippets

Liquidのスニペットを強化します。

ESLint

ファイルの保存時にESLintを走らせるなどの連携ができるようになります。

stylelint-plus

ESLintと同じようにVSCodeとstylelintを連携させる拡張機能です。

Prettier - Code formatter

ESLintと同じようにVSCodeとPrettierを連携させる拡張機能です。

テーマ・アイコン

こちらは完全に好みなので、番外編的な感じです。

Gruvbox Material

マッド感のある色合いが好みで、目に優しいので、長い間使っています。

Gruvbox Material Icon Theme

ファイルなどのアイコンもテーマに合わせたものをインストールしています。

それぞれのVSCodeがある

拡張機能には、インストールしただけでは効果を発揮しないものがあったり、様々な設定を細かくカスタマイズできるのですが、今後はそのあたりも深堀りしていこうと思います。

いつかVSCodeの設定ファイルとか紹介したりされたりする会を開けたら・・なんて思ってます。

ちなみに、フォントはFira Codeというプログラミングフォントを使用しています。