😸

【2022年最新】Visual Studio Codeの便利なプラグインまとめ(コーダー・マークアップ・フロントエンドエンジニア視点)

2022/09/22に公開約5,800字

Visual Studio Code(VsCode)本体のインストール

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

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

VsCodeのおすすめプラグイン(コーダー・マークアップ・フロントエンドエンジニア視点)

私が導入しているVsCodeのプラグインを紹介します。

普段の業務では、HTML、CSS、Sass(SCSS)、EJS、PUG、JavaScript(TypeScript)、React(JSX)、Next.js、PHP(WordPress)、Markdown、その他設定ファイルを触ることが多いので、それらに関連したプラグインが多くなっています。

共通

プラグイン名 機能
Japanese Language Pack for Visual Studio Code VsCode本体の日本語化
Path Autocomplete パスの自動補完
Live Server ライブリロード機能を備えた開発ローカルサーバーを起動
TODO Highlight ファイル内のTODOをハイライト表示する。
Trailing Spaces 末尾のスペースを強調表示
indent-rainbow テキストの前のインデントを4つの異なる色に交互に色付けして階層を見やすくする

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 現在のワークスペースもしくは選択したフォルダー内のすべてのファイルをフォーマットできる

Git関連

プラグイン名 機能
Git Graph 各リポジトリのGitグラフを表示し、グラフからGitアクションを簡単に実行できる
Git History 各ディレクトリ、ファイルごとのgitログの表示および検索を可能にする

React(JSX)・Next.js関連

プラグイン名 機能
next.js next.jsで扱うjsxファイル内のCSSハイライト
Next.js snippets next.jsのスニペット追加
vscode-styled-components jsxファイル内でCSSのハイライトと予測補完を実現する
JavaScript (ES6) code snippets ES6構文のJavaScriptのコードスニペット

Markdown関連

プラグイン名 機能
Markdown All in One VsCode内でMarkdownを書くのが諸々便利になる(ショートカットキ−を使えるようになる等)
Markdown Preview Enhanced VsCodeでMarkdownのプレビューを表示できる

以上です。参考にしてみてください😇

後日、VsCodeのsettings.jsonの内容も公開予定です。

Discussion

ログインするとコメントできます