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

VScode
2022.05.09
※当ブログの記事内にはプロモーションが含まれている場合があります。

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

※Stylelint追記しました。

※前提

設定ファイル保存場所

■グローバル設定

/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の変更を表示できる。

コーディング系

* GitHub Copilot

コード補完してくれるやつ。
Gtihubでの登録、課金が必要です。

導入方法↓

【導入方法】GitHub Copilot が神ツールだった/ほぼ自動でプログラムを生成
開発、コーディングが捗りそうなツールを導入しました。 簡単に導入できたのでご紹介します。 概要 自動でコードの提案をしてくれるGitHub CopilotGitHub Copilotの導入方法と、簡単な使い方を紹介GitHub Copilo...
pan-shoku.com
2023.04.23

* ChatGPT – Genie AI

ChatGPTをVSCodeで使えるやつ。
ChatGPTに登録してから、APIキーを取得して、
そのキーをこのパッケージに設定する必要があります。

* 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のコード解析ツール。コードの問題・エラーを検知。

* Stylelint

スタイルを記述中書式などの間違いを「チェック」するツール
自動整形機能もあり

参考

VSCodeへのStylelint導入をちゃんと理解する - Qiita
VSCodeはビルドインの設定や拡張機能が豊富なおかげで、カスタマイズしていくとどの自動整形が働いているのか分かりづらくなってくると思います。ゆえに「なんとなくそれっぽく整形が効いているけど、カス…
qiita.com

* 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

※Vue3には向いていないので、現在は不使用。代わりに、Vue Language Features (Volar) を入れる。

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

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

* Vue Language Features (Volar)

Vue3を使うなら、Veturではなくこちらが良い。

Veturは無効にする。

* Vue Peek

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

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

* Vue docs

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

テスト系

Playwright Test for VSCode

視覚系

* 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

* Text Tables

マークダウンでのテーブルが記述が簡単になる。見やすいように幅も整形してくれる。

  • Tab: 右隣のセルへ移動
  • Enter: 下の行へ移動
  • Shift + Tab: 左隣のセルへ移動
  • Alt + 矢印キー: 行・列を移動
  • Ctrl + Q + Q: Table Mode ON 切り替え

* Markdown Extended

SpreadSheet（スプレッドシート）の表を、貼り付けると、Markdownのテーブルに整形してくれる。
シートで範囲して、コピーしたら、VsCodeで右クリック >「Paste as Table」でペーストすればOK
最高すぎる。

* Rainbow CSV *

SQLを書いて、CSVを整形したり、絞り込んだり、検索したり、計算したりできる。めちゃくちゃ便利。これがないと生きていけない。

※クエリの書き方クセあるので注意。JavaScriptに準ずる。
※基本 SELECT カラム名(a1など) WHERE

  • F1でコマンドパレットを開く
  • > RBQL
  • RBQLの画面が開く
  • クエリ書いて整形したりする

参考

Vscode Google Translate

選択範囲を翻訳できるやつ。
i18n対応するときに地味に便利。

やっておきたい設定（優先言語設定）

  • F1でコマンドパレット開く
  • > Set Preferred Language 入力
  • 優先したい言語を設定 (English)
  • Shift + Alt + T : 優先言語で翻訳
  • F1 ⇒ > Translate selection(s) ⇒ 翻訳する言語を選択: 選択言語で翻訳

気になる編

* Live Share

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

* jwt-decoder

JWT の文字列をデコード

参考

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

スポンサーリンク

コメント

タイトルとURLをコピーしました