実際に利用しているショートカットと拡張機能のメモ。
特にショートカットはいつも忘れるので、、
随時更新予定。
⇧:Shift ⌘:Command ⌥:Option
ショートカット
VS Code のコマンドパレット表示(⇧ + ⌘ + P)
![実行結果 - ⇧ + ⌘ + P](https://kasyalog.site/wp-content/uploads/2022/12/image-12.png)
ファイル検索(⌘ + P)
![実行結果 - ⌘ + P](https://kasyalog.site/wp-content/uploads/2022/12/image-13.png)
単語選択(⌘ + D)
カーソルにある単語を選択してくれる。 以下は test4 が選択対象。
![実行結果 - ⌘ + D](https://kasyalog.site/wp-content/uploads/2022/12/image-14.png)
ファイル内の単語一括選択(⇧ + ⌘ + L)
以下は name の例。任意の name 部分にカーソルがある状態で実行するとすべて選択される。
![実行結果 - ⇧ + ⌘ + L](https://kasyalog.site/wp-content/uploads/2022/12/image-15.png)
行の上下移動(⌥ + ↑↓)
以下は id: 4 の行にカーソルがある状態で実行。id: 3 の行の上に移動する。
![実行結果 - ⌥ + ↑↓](https://kasyalog.site/wp-content/uploads/2022/12/image-16.png)
行の複製(⇧ + ⌥ + ↑↓)
簡易テストデータを作る場合などで役立ちそうです。
![実行結果 - ⇧ + ⌥ + ↑↓](https://kasyalog.site/wp-content/uploads/2022/12/image-17.png)
拡張機能
Prettier – コードフォーマッタ
![esbenp.prettier-vscode](https://kasyalog.site/wp-content/uploads/2023/01/image-16-1024x279.png)
フロントエンド開発時は必須ですね。以下のように eslint + prettier をプロジェクトに組み込み、ファイル保存時にフォーマットを有効にする、が基本セットです。
GitLens – git との統合
![eamodio.gitlens](https://kasyalog.site/wp-content/uploads/2023/01/image-17-1024x223.png)
以下のように、薄いですが行の末尾に最終コミットの情報が表示され、吹き出しとして具体的なコミット情報が見えます。ここで差分も見えるし、ファイル単位の差分を表示させることも可能。
![GItlens を利用した例](https://kasyalog.site/wp-content/uploads/2023/01/image-28-1024x292.png)
他にも色々な機能があり、詳細な説明は https://atmarkit.itmedia.co.jp/ait/articles/2111/19/news034.html などを参照。
vscode-icons – ファイルツリーにアイコン表示
![vscode-icons-team.vscode-icons](https://kasyalog.site/wp-content/uploads/2023/01/image-20-1024x233.png)
拡張子や名前でだいたい分かるっちゃわかりますが、実際各種アイコンが付いているとよりわかりやすいです。
![vscode-icons 使用例](https://kasyalog.site/wp-content/uploads/2023/01/image-21-467x1024.png)
Auto Rename Tag – html のタグの末尾のタグ名の自動追随
![formulahendry.auto-rename-tag](https://kasyalog.site/wp-content/uploads/2023/01/image-22-1024x321.png)
HTML を記述するときに、開始タグに合わせて終了タグも同じ名称で自動で作ってくれます。開始タグ部分を変更すると、終了タグも自動で同じ名前に追随してくれます。
使ってみるとわかりますが、地味に結構便利です。
Markdown All in One – markdown 記述時の便利機能詰め合わせ
![yzhang.markdown-all-in-one](https://kasyalog.site/wp-content/uploads/2023/01/image-23-1024x284.png)
Markdown を書くならこれは必須だと思います。こちらも色々機能がありますが、目次を自動で作成してくれたり、セクション番号を自動で追加/更新してくれる機能だけでインストールする価値があります。
![Markdown All in One でできること](https://kasyalog.site/wp-content/uploads/2023/01/image-24-1024x727.png)
vscode-input-sequence – 連番を振る
![tomoki1207.vscode-input-sequence](https://kasyalog.site/wp-content/uploads/2023/01/image-25-1024x304.png)
細かい使い方はこちらなどでわかるかと思いますが簡単に言うと、以下で該当箇所に順番に連番が付与できます。
- ショートカット(ファイル内の単語一括選択(
⇧ + ⌘ + L
))で連番をつけたい一覧を選択 - `⌥ +
⌘
+ 0` でプロンプト表示 - プロンプトに入力(0オリジンで連番降る場合は 0 を入力して Enter)
Draw.io Integration – VSCode 内で drawio 編集
![hediet.vscode-drawio](https://kasyalog.site/wp-content/uploads/2023/01/image-26-1024x280.png)
.draoio ファイルが VSCode 内で開け、編集できます。これまた非常に便利です。
使い勝手も本来の drawio と同じなので、簡単に編集ができるし、ローカルで drawio のファイルが見たい場合にもよいです。
![Draw.io Integration 使用例。Drawio そのままが VSCode 内で使えます](https://kasyalog.site/wp-content/uploads/2023/01/image-27-1024x542.png)
Paste Image – Clipboard の画像をファイル化して md ファイルに埋め込む
![mushan.vscode-paste-image](https://kasyalog.site/wp-content/uploads/2023/01/image-33.png)
md ファイルに画像を埋め込みたいことはママあると思いますが、いちいちファイルおいてリンク書いて、、は時間がかかります。スクリーンショットなどは画像にするところから、となるとさらに手間です。
この拡張は Cmd+Alt+V
でファイル化と貼り付けまでしてくれます。
参考 – extensions.json
参考までに上で紹介した拡張機能たち
{
"recommendations": [
"esbenp.prettier-vscode",
"eamodio.gitlens",
"MS-CEINTL.vscode-language-pack-ja",
"vscode-icons-team.vscode-icons",
"formulahendry.auto-rename-tag",
"yzhang.markdown-all-in-one",
"tomoki1207.vscode-input-sequence",
"hediet.vscode-drawio"
]
}