アジェンダ
私的、フロントエンドの凡ゆる案件で使用可能であることが多く、最低限度あると便利だと考えているVSCodeの拡張機能だけを厳選して紹介したいと思います。
厳選拡張機能
Japanese Language Pack for Visual Studio Code
言わずと知れた、VSCodeの言語を日本語にしてくれる定番拡張機能。
Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace
Prettier - Code formatter
コードを整形してくれる拡張機能です。
HTML、CSS、Markdownなどを書く際に重宝します。
Prettier - Code formatter - Visual Studio Marketplace
ESLint
JavaScriptとTypeScriptのコードのエラーを検出し、コードの質を高めることに役立ちます。
ESLint - Visual Studio Marketplace
HTML CSS Support
CSSの定義を参照し、HTMLコードを補完してくれます。
classやidなどの自動補完をしてくれます。
HTML CSS Support - Visual Studio Marketplace
JavaScript (ES6) code snippets
JavaScriptのコードを書く際に、重宝するコードスニペットが揃った拡張機能です。
JavaScript (ES6) code snippets - Visual Studio Marketplace
ES7+ React/Redux/React-Native snippets
Reactで開発を行う際に、重宝するスニペットを使えるようにできます。
ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace
Live Server
ページを手動で更新して変更を確認する必要があるところを自動化されたローカルホスト (localhost) を起動して、ブラウザー上で動作させることができます。
Live Server - Visual Studio Marketplace
indent-rainbow
インデントを色付けしてくれることで、HTMLのタグやJSの中括弧 ({})の範囲を把握しやすくなります。
indent-rainbow - Visual Studio Marketplace
VSNotes
VSCodeに統合されているので、開発環境を離れることなくメモの作成や編集、検索が可能で非常に重宝します。
使用方法に関しましては、こちらでも紹介しております。
VSNotes - Visual Studio Marketplace
Bookmarks
よく参照したいコードだけ、これでブックマークしてます。
Bookmarks - Visual Studio Marketplace
今後追加予定
- CSSPeek
- Material Icon Theme
- TODO Highlight
- Path Intellisense
- GitLens
- SVG Preview
- Trailing Spaces
- Better Comments
- Auto Close Tag