言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。
Tipsはここから。
拡張機能 24 選
1. vscode-icons
アイコンがついて見やすくなる。
2. GitLens
とにかく強い。
「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。
git blameする手間なくなる。
3. Prettier
コードのフォーマットは自動でやりましょう！
複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。
関連のTipsはここ
4. Git History
Git logが見やすい
5. Bracket Pair Colorizer
カッコの対応を色付きで表示してくれる。
ものすごく読みやすくなって最高&最高！！
なおBeta版ですが、後継となるBracket Pair Colorizer 2も出ています。
6. Settings Sync
どこでも同じ設定で使いたい人には便利。
⇧ + ⌥ + U/D で設定をアップロード/ダウンロードできる。
似たものに、Syncingがある。
7. REST Client
HTTPリクエストの操作を便利にしてくれる。
8. Bookmarks
ブックマークしてジャンプしたり、リスト化できたりする。
9. PlantUML
UMLの図を書く時に便利。
10. TODO Highlight
TODOやFIXMEなどのコメントハイライトを細かく設定できる。
似たものにBetter Commentsがある。
11. Japanese Language Pack
日本人なので。
12. Path Autocomplete
パスの入力を支援してくれる。
似たものにPath Intellisenseがある。
13. Rainbow CSV
CSVを幸せな気持ちで眺められるようになる
14. Partial Diff
選択範囲の差分を手軽に確認できて便利。
15. Duplicate action
ファイルやディレクトリをボタン一つで複製できて便利
16. GitHub Pull Requests
公式による拡張。
17. gitignore
github/gitignoreを参照して自動でやってくれる。
.gitignoreといえばgitignore.ioですが、これを使うのもありかも。
18. Todo +
高機能にToDoを管理したい場合は、TODO Highlightよりもこちらを使いたい。
似たものにTodo Treeがある。
19. Output Colorizer
出力結果を装飾してくれて便利！
ちなみに、ログファイルの装飾は Log File Highlighter が便利！
20. proto3
ProtocolBuffers3のハイライトとかスニペットとかを提供してくれる。
21. Bash Debug
軽い効率化でbash書く時に便利。
22. Trailing Spaces
行末の空白を強調表示してくれる。
ちなみに、以下の設定をすればファイル保存時に自動で末尾の空白を削除してくれる
"files.trimTrailingWhitespace": true
23. Regex Previewer
正規表現をチェックする時に便利。
24. Add jsdoc comments
jsdoc入力を支援してくれる。
設定などのTips
設定ファイルは、「Code > 基本設定 > 設定」で開ける。
jsonを直接編集するか、GUIから単語検索すればOK。
インデントの強調
インデントの強調表示は、v1.25で標準サポートされたようです。
highlightActiveIndentGuideをtrueにすると有効。
プラグインとしては以下が有名です。
• Indent Rainbow : 好みが分かれそうですが、人気。
• Indenticator
• Guides : 赤色で強調表示してくれるだけのシンプルな機能強化
「code」コマンドのインストール
⌘ + ⇧ + P でコマンドパレットを開き、「Shell」で検索しインストール。
これでターミナルから「code」コマンドを使ってVSCodeを起動できる。
最終行に改行を自動挿入
"files.insertFinalNewline": true
制御文字の表示
"editor.renderControlCharacters": true
GitHubにREADMEあげた時に文字化けしちゃうなんてことを防げる
自動で削除したい場合は、Remove backspace control characterという拡張を入れると良さそう
折り返し表示
長い行がよく出てくるなら便利
"editor.wordWrap": "on"
エディタレイアウトの保持
"workbench.editor.closeEmptyGroups": false
ターミナルで選択したテキストを自動コピーする
"terminal.integrated.copyOnSelection": true
起動時に無題ファイルを開く
"workbench.startupEditor": "newUntitledFile"
CPU使用の軽減
サイズの大きいファイルがあるとCPU使用率(CodeHelper)が高くなってしまうことがある。
以下のオプションで参照から除外するディレクトリを設定しておくと良い。
"files.watcherExclude": {
"**/images/**": true
}
不要な行の削除
"files.trimFinalNewlines": true
階層リンク(パンくずリスト)の表示
"breadcrumbs.enabled": true
直近閉じたタブを開き直す
⌘ + ⇧ + T
コードの自動フォーマット (Prettier以外)
複数人ならPrettierや各種fmt/lintを使うのが良いと思いますが、個人ならショートカットかVSCodeの設定で済ませるのもありです。
ショートカットを使う
⌃ + ⌥ + F
JSONでの実行例↓
VSCodeの設定を使う
「formaton」で検索すると、たくさんの項目が出てくるのでお好みに設定する。
フォーカスの移動ショートカット
キーバインドの設定から、jsonファイルを開いて以下をコピペするだけ。
[
{ "key": "cmd+]", "command": "workbench.action.nextEditor" },
{ "key": "cmd+[", "command": "workbench.action.previousEditor" },
{
"key": "cmd+]",
"command": "workbench.action.nextSideBarView",
"when": "sideBarFocus"
},
{
"key": "cmd+[",
"command": "workbench.action.previousSideBarView",
"when": "sideBarFocus"
},
{
"key": "cmd+]",
"command": "workbench.action.nextPanelView",
"when": "panelFocus"
},
{
"key": "cmd+[",
"command": "workbench.action.previousPanelView",
"when": "panelFocus"
}
]
バーの色をプロジェクトごとに変える
参考: Visual Studio Codeエディタの色をプロジェクトごとに設定する
ターミナルを全画面表示する
"workbench.useExperimentalGridLayout": true
ちなみに、ターミナルは ⌃ + ⇧ + ` で開ける。
定義にジャンプ & 元の位置に戻る
定義にジャンプ
⌘ + クリック
元の位置に戻る
「⌃」 + 「-」
ファイル名検索
⌘ + P
修正プログラムをコマンドで選択する
赤線と一緒に出るこれ。
わざわざカーソルを持っていくのは面倒。
⌘ + . でカーソルを動かさずに修正内容を選択できる。
import の時に多用する。
エディタのグループ移動
基本設定 > キーボードショートカット を開くと、ショートカットを一覧できる。
例えば、 ⌃ + ⌘ + → でエディタを右のグループに移すのは多用する。
書式設定なしでテキストをコピーする
"editor.copyWithSyntaxHighlighting": false