Visual Studio Codeの必須プラグインまとめ

じょじお

Visual Studio Codeをインストールしたら入れるべき拡張機能をまとめている記事です。

VS Codeとは？

VSCode（ブイエスコード）はMicrosoftが提供する無料の高機能テキストエディタです。高機能なのに動作が軽快で使いやすいです。VSCodeはVisualStudio Codeの略です。

VS Codeのインストールはこちら

VS Codeインストール

VS Codeのおすすめ拡張機能

HTML・CSS・Python・Jsonを扱う人向けの拡張機能です。

カテゴリ	拡張機能名	機能説明	設定メモ	補足
Python	Python	インタープリタの選択などの簡略化
全般	Japanese Language Pack	VSCodeの日本語化
Python	autopep8	コードをPEP 8のコーディング規約に沿った形に自動整形	python.formatting.provider	Pythonコードの整形に何を使用するか
Python	flake8	コードがPEP 8のコーディング規約に沿っていなかったら破線で注意を促してくれる	python.linting.flake8Enabled	Whether to lint Python files using flake8にチェック
全般	indent-rainbow	インデントに色付け
Python	AREPL for python	VSCode上でリアルタイムデバッグできます。
多数言語に対応	Code Runner	範囲選択している部分のコードをVSCode上で実行
全般	Trailing Spaces	行末の空白文字を表示。（追記：VS Codeの基本設定で同じことができるらしいのでこの拡張機能は不要かも）
全般	Bookmarks	コードの好きな位置にブックマークをつけることができる
多数の言語に対応	Better Comments	コメントアウトを色分けできる。
	GitLens	gitのcommit間の差分を見やすく
HTML	LiveServer	簡易ローカルサーバーを起動し、HTMLやCSSの更新を検知してライブプレビューしてくれます。
CSS	Autoprefixer	各ブラウザでCSS3を正常に動作させるための記述（ベンダープレフィックス）を自動で記入してくれます。
全般	zenkaku	コード中の全角スペースをハイライトして教えてくれる
全般	Bracket Pair Colorizer	ペアになる ( ) や { } のカッコに色をつけて分かりやすくしてくれる
CSS	IntelliSense for CSS class names in HTML	CSSのクラス名/id名を入力補完してくれます。
CSS	HTML CSS Support	CSSの入力補完をしてくれる。
HTML・CSS	CSSTree validator	HTMLとCSSのコード検証をしてくれる
HTML	Auto Rename Tag	開始タグ名を修正したとき、終了タグ名も修正してくれる
多数の言語に対応	Code Spell Checker	コードのスペルミスを教えてくれる
JSON	Json Editor	JSONをツリー表示してくれる