環境
- VsCode 1.63.2
拡張機能
Quokka.js
変数の中身などをデバッグしながらplaygroundすることができるめちゃめちゃ必須級の機能です。JavaScriptとTypeScriptどちらも対応しています。console.logをいちいち書かなくてもいいので、最高です。
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
Template String Converter
あの厄介なテンプレートリテラルを自動変換してくれる優れもの!
${と入力すると、ダブルクォーテーションを勝手にバッククォートに変換してくれる
https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/cc3ff0e33a314a04ad6294ccc0579aa7/img_644de914cb783.gif)
Auto Rename Tag
htmlの開始タグと終了タグを同期してくれます(片方を修正したら、もう片方も自動的に修正される)
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/35557a30846741d1aaf06e88708e4b17/img_616d2727afcb0.gif)
change-case
文字列のスタイル(キャメル、パスカル、スネークなど)を変換できる
https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/22f03d5294ff4a15af4300c752400864/img_644e2376dcf2a.gif)
Eslint
コードの静的解析ツールです。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/f2353b3fd96c4f67ae334407b1e8f290/img_613d68ef14d94.png)
Prettier
コードの自動フォーマット。
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/3021bf7a044544569c6fc8a454aaedb1/img_613d693b7c381.gif)
JavaScript(ES6) code snippets
特定の文字を入力したら、以下のような定型を自動で補完してくれるようなスニペットが色々使える拡張機能です。
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
array.forEach(currentItem => {
})
ES7 React/Redux/GraphQL/React-Native snippets
useEffectやuseStateなどのreact特有の記述が一気に補完できるのでreactを使用するのであれば、必須です。
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/15bc9936ecbb4d90ac35c994ebffa093/img_616d3aa6e3d1d.gif)
CodeMetrics
特定のコードの複雑性を数値化し、その複雑性を生じさせているコードを教えてくれる
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-codemetrics
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/163b0149cd8340e297d3ce803724db12/img_644e2ae160a86.gif)
Add jsdoc comments
jsDocの入力を支援してくれます
https://marketplace.visualstudio.com/items?itemName=stevencl.addDocComments
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/96e209c2fd5e4179a7a2ea37c9580080/img_6173acdba70c3.gif)
Better Comments
コード内のコメントの種類ごとに色を付けることができ、見やすくなります
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/b292103d654347c68130687c6bcbedc1/img_616d5bb4bf94c.webp)
axe Accessibility Linter
アクセシビリティに関するエラーを可視化してくれる。一例としてimgタグにaltを指定しない場合は以下のような表示
https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/961e695355784a64856c109338e4ea01/image.png)
Highlight Matching Tag
対になる開始タグと終了タグをハイライトする事ができる
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/05768ca77edd495e81b60bf2618780c2/img_616d60d5cbde9.gif)
Tailwind CSS IntelliSense
Tailwind CSSの補完が効くようになります。Tailwind使うなら必須級!
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/7dd4dcb172a24c819446343c877ed3ff/img_61cac08555a6b.gif)
CSS Navigation
html上のクラス名やID名から該当のcssやscssへジャンプすることが可能
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/683bbc35de8f4ab68fbd39e0d4c1a809/img_644e17ba49ca5.gif)
Color Highlight
HTMLやCSS等で指定されたRGB値に対応する色をつけて可視化してくれるプラグインです
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/60fb96b284b0407daaf4e23b56759384/image.png)
以上です。
まとめ
いかがでしたでしょうか。本記事では、主にフロントエンド開発において、VsCodeに入れるべき必須の便利拡張機能について紹介しています。コーディングの量を必要最小限に抑えて開発効率をあげてくれるものや、ハイライト表示等の開発補助をしてくれるものを紹介していますので、ぜひ参考にしてみてください。