\ 楽天BLACK FRIDAYセール! /

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の日本語化
Pythonautopep8コードをPEP 8のコーディング規約に沿った形に自動整形python.formatting.providerPythonコードの整形に何を使用するか
Pythonflake8コードがPEP 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をコピーしました!
目次