Visual Studio Code（VsCode）本体のインストール

まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。

https://code.visualstudio.com/

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

随時更新予定です。

ここまで読んでいただきありがとうございます🙆‍♂️