デスクワークを超絶快適にするおすすめギアたち詳しく見る

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

じょじお

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

目次

VS Codeとは?

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

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

VS Codeインストール

VS Codeのおすすめ拡張機能

HTML・CSS・Python・Jsonを

目的拡張機能名機能説明設定メモ補足
PythonPythonインタープリタの選択などの簡略化
全般Japanese Language PackVSCodeの日本語化
Pythonautopep8PEP 8のコーディング規約に沿った形に自動整形python.formatting.providerPythonコードの整形に何を使用するか
Pythonflake8PEP 8のコーディング規約に沿っていなかったら破線で注意を促してくれます。python.linting.flake8EnabledWhether to lint Python files using flake8にチェック
全般indent-rainbowインデントに色付けして分かりやすくしてくれます。
PythonAREPL for pythonVSCode上でリアルタイムデバッグできます。
多数言語に対応Code Runner範囲選択している部分のコードをVSCode上で実行
全般Trailing Spaces行末の空白文字を表示。
(追記:VS Codeの基本設定で同じことができるらしいのでこの拡張機能は不要かも)
全般Bookmarksコードの好きな位置にブックマークをつけることができる
多数の言語に対応Better Commentsコメントアウトを色分けできる。
GitLensgitのcommit間の差分を見やすく
HTMLLiveServer


簡易ローカルサーバーを起動し、HTMLやCSSの更新を検知してライブプレビューしてくれます。
CSSAutoprefixer
各ブラウザでCSS3を正常に動作させるための記述(ベンダープレフィックス)を自動で記入してくれます。 
全般zenkakuコード中の全角スペースをハイライトして教えてくれます。
全般Bracket Pair Colorizerペアになる ( ) や { } のカッコに色をつけて分かりやすくしてくれます。
CSSIntelliSense for CSS class names in HTMLCSSのクラス名/id名を入力補完してくれます。
CSSHTML CSS SupportCSSの補完をしてくれます。
HTML・CSSCSSTree validatorHTMLとCSSのコード検証をしてくれます。
HTMLAuto Rename Tag開始タグ名を修正したとき、終了タグ名も修正してくれます。
多数の言語に対応Code Spell Checkerコードのスペルミスを教えてくれます。
JSONJson EditorJSONをツリー表示してくれます。

VS Codeを日本語化する手順

VS Codeはデフォルトの言語設定は英語です。メニューを日本語で表示するには日本語化設定が必要です。日本語化設定方法は下記が参考になります。

VS Code 日本語化設定手順
https://qiita.com/nanamesincos/items/5c48ff88a4eeef0a8631

まとめ

じょじお

VS Codeの拡張機能について紹介しました!

ぽこがみさま

このブログではRPA・ノーコードツール・VBA/GAS/Pythonを使った業務効率化などについて発信しています。
参考になりましたらブックマーク登録お願いします!

この記事が気に入ったら
フォローしてね!

シェアしてくれたらウレシイ(·:゚д゚:·)
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる