🌳
【日々更新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）
Visual Studio Code（VsCode）本体のインストール
まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。
VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点）
私が導入しているVsCodeのプラグインを紹介します。
フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。
共通
| プラグイン名 | 機能 |
|---|---|
| Japanese Language Pack for Visual Studio Code | VsCode本体の日本語化 |
| Path Autocomplete | パスの自動補完 |
| Live Server | ライブリロード機能を備えた開発ローカルサーバーを起動 |
| Better Comments | TODOコメントなどをハイライト表示する。 |
| Trailing Spaces | 末尾のスペースを強調表示 |
| indent-rainbow | テキストの前のインデントを4つの異なる色に交互に色付けして階層を見やすくする |
| Figma for VS Code | Figmaの画面を開いてCSSをコピーできたりします。コーディング効率化待ったナシです |
HTML関連
| プラグイン名 | 機能 |
|---|---|
| ApacheConf | htaccess等Apache構成ファイルの構文ハイライト |
| Auto Close Tag | HTML閉じタグの自動補完 |
| Auto Rename Tag | HTML閉じタグの自動リネーム |
| Auto Complete Tag | ↑のAuto Close TagとAuto Rename Tagの機能を組み合わせるためのプラグイン |
| htmltagwrap | 選択したhtmlタグをラップして新たなHTMLを生成可能にする |
| Insert <br> Tag | shift+enter で<br>タグを挿入する |
CSS関連
| プラグイン名 | 機能 |
|---|---|
| CSS Peek | HTMLのid、classから記載元のCSSの該当箇所を参照できる |
| CSS Variable Autocomplete | CSS(Sass)内でcss変数の予測補完と参照が可能になる |
| Control Snippets | VsCodeの組み込みスニペットと拡張機能から手動でインストールされたスニペットを無効または有効にできる |
| intelliSense for CSS class names in HTML | workspace内のCSSに記述されたクラス名を入力候補に出力する |
| Tailwind CSS IntelliSense | Tailwind CSSにおけるオートコンプリート、構文の強調表示等の機能追加 |
EJS・PUG・PHP(WordPress)・その他ファイル関連
| プラグイン名 | 機能 |
|---|---|
| EJS Beautify | EJSファイルをいい感じにフォーマットしてくれる |
| EJS Language Support | EJSファイルのハイライト |
| pug | pugのコードスニペット |
| Convert HTML to Pug | 構文を右クリックでhtmlからPugに変換できる |
| WordPress Snippet | WordPressのコードスニペット |
| DotENV | .envファイルの構文ハイライト |
| SVG Viewer | SVGファイルのプレビュー表示 |
Format・Error・Lint(静的解析ツール)関連
| プラグイン名 | 機能 |
|---|---|
| EditorConfig for VS Code | VsCode内で.editorconfigの設定を有効化する |
| Error Lens | エラー内容をファイル内で表示（インライン表示）してくれる |
| Prettier - Code formatter | コードフォーマッター |
| Stylelint | stylelint（CSSのための静的検証ツール、構文ミスチェック等）の利用を可能にする |
| ESLint | ESLint（JavaScriptのための静的検証ツール、構文ミスチェック等）の利用を可能にする |
| Formatting Toggle | クリックするだけでフォーマット設定のONとOFFを切り替えられる |
| Format Files | 現在のワークスペースもしくは選択したフォルダー内のすべてのファイルをフォーマットできる |
| axe Accessibility Linter | アクセシビリティに関するエラーを明示化してくれる |
Git関連
| プラグイン名 | 機能 |
|---|---|
| Git Graph | 各リポジトリのGitグラフを表示し、グラフからGitアクションを簡単に実行できる |
| Git History | 各ディレクトリ、ファイルごとのgitログの表示および検索を可能にする |
| GitHub Pull Requests and Issues | Githubでのプルリクエスト実行からレビューまでVsCode内で完結できる |
| GitHub Repositories | GitHub上の任意のリモートリポジトリを参照、検索等を可能にする |
| Gitmoji | コミットメッセージに絵文字を追加しやすくする |
React(JSX)・Next.js関連
| プラグイン名 | 機能 |
|---|---|
| next.js | next.jsで扱うjsxファイル内のCSSハイライト |
| Next.js snippets | next.jsののコードスニペット |
| vscode-styled-components | jsxファイル内でCSSのハイライトと予測補完を実現する |
| Import Cost | importしたnpmパッケージの容量を表示させることができる |
| MDX | mdx言語サポート（シンタックスハイライト等） |
Markdown関連
| プラグイン名 | 機能 |
|---|---|
| Markdown All in One | VsCode内でMarkdownを書くのが諸々便利になる（ショートカットキ−を使えるようになる等） |
| Markdown All in One | VsCode内でMarkdownを書くのが諸々便利になる（ショートカットキ−を使えるようになる等） |
| Markdown Preview Github Styling | VsCodeでGithub調のMarkdownのプレビューを表示できる |
| テキスト校正くん | 日本語の文章をチェックしてくれます |
AI関連
| プラグイン名 | 機能 |
|---|---|
| ChatGPT - Genie AI | ChatGPTを開かずともVsCodeでGPTとやりとりできます |
| GitHub Copilot | コードを提案してくれたりします。もうこれナシでは考えられない |
| GitHub Copilot Chat | リポジトリのファイルを読み取った上で質問に回答してくれます。GPT-4なので中々優秀です。 |
その他
| プラグイン名 |
|---|
| GraphQL for VSCode |
| Playwright Test for VSCode |
| Postman |
随時更新予定です。
ここまで読んでいただきありがとうございます🙆♂️
Discussion