VSCodeを導入したら、とりあえず入れたい拡張機能たち【パッケージ・プラグイン】

VScode

VSCodeが初期化された時や、新しいPCを買ったときなど
いつも、拡張機能(パッケージ・プラグイン)迷子になるので、
ここにメモしておきます。

未来の自分、これらを全部入れておけ!

※増えたら、追記します。

※前提

設定ファイル保存場所

■グローバル設定

/C:/Users/xxxxxx/AppData/Roaming/Code/User/settings.json

■ワークスペース毎

[ワークスーペースのルートディレクトリ]/.vscode/settings.json

環境

  • Windows 11
  • WSL2
  • Ubuntu 20.04.4 LTS


基本

* Japanese Language Pack for Visual Studio Code

VSCodeの日本語化。

* VSCodeThemes

VSCodeの見た目を変更できる。※色を変えたり

いろんなプロジェクトを同時進行していると、どのワークスペースを使っているかわからなくなるので、ワークスペースごとに色分けできるのは、地味に嬉しい機能。

※設定方法

  • ワークスペースを開く
  • F1キーを押下
  • 上部にフォームが表示されるので、> open workspace settings を入力
  • Enter
  • ワークスペースの設定画面が表示される
  • 右上のファイルアイコンをクリック
  • .vscode/settings.json が開くので、下記を入力
{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#4aa1c4",
    "activityBarBadge.background": "#4aa1c4"
  }
}
  • 保存して完了
> developer: reload window

参考

* EditorConfig

拡張子ごとのインデントサイズなどを設定できる。

[.*{css,html}] で設定すると書いてある記事もありましたが、私の環境では反映されなかったので、下記のように設定しています。

root = true

[*]
charset = utf-8
# end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.ejs,*.html]
indent_style = tab

[*.scss,*.css,*.js,*.json]
indent_style = space
indent_size = 2

Git系

* GitLens

git使うなら必須!

ステージング・コミットなどをUIベースで操作できる。

また、ブランチ毎・ファイル・行ごとの差分が見れたり、
コード変更者・コメントも見れるので便利。

* Git History

gitの変更を表示できる。

コーディング系

* Prettier

コード自動整形ツール。

Command(ctrl) + F でフォーマットを実行。

設定で、Editor: Format On Save にチェックを入れておけば、
保存時に自動でフォーマッターが走るので便利。

また、.prettierrc ファイルをプロジェクトのルートディレクトリに配置することで、
プロジェクトごとのカスタマイズも可能。

* Auto Rename Tag

タグ名を変更すると、対応するものも自動で変わる便利機能。

* Auto Close Tag

<div> と打った時点で、自動で閉じタグを生成してくれる。

* htmltagwrap

範囲指定して、タグで囲める。

  • 囲みたい部分をドラッグで選択
  • Option(Alt) + W
  • タグ名を入力

* HTML CSS Support

class=”” 入力時、スタイル適用しているClass名を、候補に出力させる。

* WordPress Snippet

WPの関数を、Command(Ctrl) + Space で補完してくれる。

* EJS language support

ejs使うなら、入れておきたい。

* vscode-php-cs-fixer

php使うなら入れておきたい、コードフォーマッター。

設定参考

* JavaScript (ES6) code snippets

JS使いは入れておきたい。

* ESLint

JSのコード解析ツール。コードの問題・エラーを検知。

* jQuery Code Snippets

jQuery の コードスニペット

* Visual Studio Intellicode

機械学習により、JSのAPIサジェスト機能を向上させるもの。

* ES7 React/Redux/GraphQL/React-Native snippets

JavaScript(ES7)・React・Reduxのスニペット、雛形の生成。

  • ファイルを作成 (xxx.js)
  • rafce と入力
  • xxxコンポーネントの雛形が生成される

* Regex Previewer

正規表現をチェックできる。

正規表現を含むファイルを開くと、「Test Regex」という項目が表示されるので、クリックすると正規表現の動作確認が行える。

* Insert Numbers

マルチカーソルがある位置に、連番で数字を入力できる。

  • Ctrl + D で複数選択
  • 矢印キー(→)を押下で、挿入位置を調整
  • Ctrl + Alt + N
  • Enter

細かい設定が必要な場合は、
Ctrl + Alt + N のあとに上部に表示されるテキストボックスに
設定を入力してから、Enter

数字のフォーマット:開始番号:ステップ

  • %d:0:1
    • 1桁表示 : 0から : 1ずつ増える
  • %2d:0:1
    • 2桁表示 : 0から : 1ずつ増える
  • %2d:1:2
    • 2桁表示 : 1から : 2ずつ増える

など….

参考

* Time Converter

タイムスタンプと任意の形式の日時を変換できる。
JWTに含まれるexpを確認するときなどに使用。

F1で検索窓を表示して、下記のそれぞれを入力する。

  • 現在時刻の Unixtime を取得
    • > timing now epoch
  • Unixtime を ISO 8601に変換(UTC & Local)
    • > Timing epoch iso
  • SO 8601 を Unixtime に変換
    • > timing iso rfc epoch

参考

React

* Next.js snippets

Next.jsのスニペット。Next使うなら。

Vue

* Vetur

Vueを書くなら入れておきたい。Vueに関して主に以下のことができる。

  • シンタックスハイライト
  • スニペット
  • Emmet
  • リンティング/エラーチェック
  • フォーマット
  • インテリセンス
  • デバッグ

* Vue Peek

コンポーネントの編集・ファイル感の移動が簡単にできる。

  • F12押下で、新規タブで、コンポーネントのファイルを開ける
  • Shift + Cmd(Ctrl) + F12 でコンポーネント内容を読み込む + その場で編集も可
    • 新規タブが生成されないので、タブがごちゃつかなくて済む

* Vue docs

Vue.js・Vuez・Vue Router・Nuxt.jsなどの公式ドキュメントが、エディタ内で見れる。
ドキュメントで、Chromeのタブが大量に生成されるのを防ぐ

視覚系

* Highlight Matching Tag

対応する開始タグと終了タグを黄色い線でハイライトしてくれる。

タグのペアを見つけやすくて便利。

* Bracket Pair Colorizer

対応する開始・終了のカッコ (){}等 を色付けしてくれる。

範囲がわかりやすくなるので便利。

* indent-rainbow

インデントごとに色付けされるので、インデントズレなどを発見しやすくなる。

* vscode-icons

拡張子ごとに、わかりやすいアイコンが設定されるので、ファイルが見つけやすい。

* EvilInspecto

全角スペースを白くハイライトしてくれる。

全角スペースによる単純バグなどが防ぎやすくなる。

* Color Highlight

カラーコード(#ffffff等)の文字列を、そのカラーコードの色でハイライトしてくれるので、設定した色をイメージしやすくなる。

* Better Comment

コメントを種類分けして、色分けしてくれるので、重要なコメントを見つけやすくなる。

デフォルトだと

  • * 緑
  • ! 赤
  • TODO オレンジ
  • ? 青

setting.json > "better-comments.tags" 項目で色などをカスタマイズできる。

* Firebase

Firebaseのセキュリティルールのハイライト。

* next.js

Next.jsのCSS in JSをハイライト 。

その他

* Remote Development ★

めちゃくちゃ大事。これないと私の開発環境始まらない。
WSLを使用するための拡張機能がまとめて入ります。

* Insert Date String

現在の日時を挿入できる。議事録ファイルを作成するときなどに使用。

Ctrl+Shift+i で入力される。

参考

* Paste URL

クリップボードにコピーしたURLのタイトルを取得して、
Markdownのリンクの形式に入力してくれる機能。
自分のメモでマークダウンをよく使うので、とても重宝しています。

  • 貼り付けたいURLをコピー (例) https://pan-shoku.com/
  • URLを貼り付けたいマークダウンファイルを開く
  • 貼り付けたい位置にカーソル移動
  • F1キー押下
  • 上部に表示される検索窓に > paste url と入力
  • Paste URL をクリック
  • [パンショクのIT/WEB備忘録](https://pan-shoku.com/) のように入力される

* Bookmarks

指定行にブックマークがつけられる。

  • ブックマークの設定・解除: Command(Ctrl) + Option(Alt) + K
  • 次のブックマークへジャンプ: Command(Ctrl) + Option(Alt) + L
  • 前のブックマークへジャンプ: Command(Ctrl) + Option(Alt) + J

* SVG Viewer

VSCode内で、SVGを画像としてみることができる。

* Live HTML Previewer

htmlファイルを、ブラウザで見れる。
ファイルを右クリック→open in brawser

気になる編

* Live Share

リアルタイムで複数人共同編集可能。

* jwt-decoder

JWT の文字列をデコード

参考

【VSCode必須プラグイン】コードを自動で統一してくれるEditorConfigの導入方法|TechTechMedia
VSCode(Visual Studio Code)で絶対に入れておくべきプラグインの1つである「EditorConfig」の導入方法について解説しています。1人で開発する際も便利ですが、複数人での開発の際に大きく効果を発揮し、導入必須のツールとなっています。
僕がおすすめするVSCodeのプラグインまとめ|TAK / Web Creator.|note
Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。 おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます(課金した場合のみ通知を受け取れる仕様)。課金したら多くのコンテンツが...
React開発効率を3倍にするVS Code拡張機能&環境設定 - Qiita
この記事を読むと VSCodeを最適化することで、React開発効率が加速します。 関数コンポーネントの雛形が一瞬で出来る。しかもファイル名がそのままコンポーネント名になる ES6の作法に則った作法で自動でコード整形してくれ...
自分がおすすめする VSCode の拡張機能 - Qiita
自分がよくお世話になっている VSCode のおすすめな拡張機能をまとめます。 Duplicate action 現在開いているファイルを複製するための拡張機能。 テンプレートファイルを作り、それをコピーして使い回す場合に便利...

コメント