はじめに
エンジニアにおすすめのVSCodeの拡張機能を紹介します。
参考に筆者はwebエンジニアで、言語はJavaScript、TypeScript、PHP、Python、フレームワークはLaravel、Vue.jsを使っています。
入力補完
Auto Close Tag
自動でHTMLタグを補完してくれる拡張機能です。
開始タグを書き終わると同時に終了タグが自動で補完されます。
Auto Rename Tag
HTMLの開始タグをRenameすると自動で終了タグもRenameしてくれる拡張機能です。
Path Autocomplete
パス入力中にワークスペース内のディレクトリやファイル名を予測して出してくれる拡張機能です。入力間違いでファイルが読み込めないミスの防止や入力スピードをアップすることができます。
Auto Import
TypeScriptとtsxのimportを自動で追加する拡張機能です。
IntelliCode
AIが入力候補を出してくれる確報機能です。
現在、以下の言語に対応しています。
- Java
- JavaScript および TypeScript
- Python
- SQL
prettier
空白や改行を自動的に綺麗に整形してくれます。
使うにはVSCodeの設定で以下を設定する必要があります。
- Format On Saveを有効にする
- Default FormatterをPrettierに設定する
Docker
Dockerfile、docker-composeの入力補完をしてくれる拡張機能です。
Laravel Blade Snippets
bladeテンプレートファイルの自動補完をしてくれる拡張機能です。
ES7+ React/Redux/React-Native snippets
Reactのスニペットの拡張機能です。jsxファイル、tsxファイルで使えます。
視認性向上
indent-rainbow
インデントに色をつけてコードを見やすくする拡張機能です。
Color Highlight
カラーコードを入力すると、その色を可視化してくれる拡張機能です。
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
構文チェック
Code Spell Checker
英単語のスペルをチェックしてくれる拡張機能です。
zenkaku
全角スペースをハイライトしてくれる拡張機能です。
入力ミスに気付きやすくなります。
ESLint
リアルタイムでコード解析できる拡張機能です。
前提としてnpmでeslintをインストールする必要があります。
その他
Japanese Language Pack for Visual Studio Code
VSCodeを日本語にできる拡張機能です。
Import Cost
JavaScript、TypeScriptでimport、requireで読み込むサードパーティのライブラリの容量を表示する拡張機能です。
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
GitLens
VSCode内のGitの状態（リポジトリ、ブランチ等）を視覚的に操作できる拡張機能です。
Markdown Preview Mermaid Support
JavaScriptベースのMarkdown構文で書ける作図ツールのMermaidのプレビューができる拡張機能です。
REST Client
VSCode上でHTTPリクエストを送信し、VScode上でレスポンスを確認できる拡張機能です。
最後に
VScodeは便利な拡張機能が多く、使用目的に合った拡張機能を追加することで、最適な開発環境を構築することができます。
この記事で紹介した拡張機能が参考になったら幸いです。