VSCodeが初期化された時や、新しいPCを買ったときなど
いつも、拡張機能(パッケージ・プラグイン)迷子になるので、
ここにメモしておきます。
※増えたら、追記します。
※Stylelint追記しました。
- ※前提
- 基本
- Git系
- コーディング系
- * GitHub Copilot
- * ChatGPT – Genie AI
- * Prettier
- * Auto Rename Tag
- * Auto Close Tag
- * htmltagwrap
- * HTML CSS Support
- * WordPress Snippet
- * EJS language support
- * vscode-php-cs-fixer
- * JavaScript (ES6) code snippets
- * ESLint
- * Stylelint
- * jQuery Code Snippets
- * Visual Studio Intellicode
- * ES7 React/Redux/GraphQL/React-Native snippets
- * Regex Previewer
- * Insert Numbers
- * Time Converter
- React
- Vue
- テスト系
- 視覚系
- その他
- 気になる編
- 参考
※前提
設定ファイル保存場所
■グローバル設定
/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での登録、課金が必要です。
導入方法↓
* 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
スタイルを記述中書式などの間違いを「チェック」するツール
自動整形機能もあり
参考
* 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 の文字列をデコード
コメント