実際に利用しているショートカットと拡張機能のメモ。
特にショートカットはいつも忘れるので、、
随時更新予定。
⇧：Shift ⌘：Command ⌥：Option
ショートカット
VS Code のコマンドパレット表示（⇧ + ⌘ + P）
ファイル検索（⌘ + P）
単語選択（⌘ + D）
カーソルにある単語を選択してくれる。 以下は test4 が選択対象。
ファイル内の単語一括選択（⇧ + ⌘ + L）
以下は name の例。任意の name 部分にカーソルがある状態で実行するとすべて選択される。
行の上下移動（⌥ + ↑↓）
以下は id: 4 の行にカーソルがある状態で実行。id: 3 の行の上に移動する。
行の複製（⇧ + ⌥ + ↑↓）
簡易テストデータを作る場合などで役立ちそうです。
拡張機能
Prettier – コードフォーマッタ
フロントエンド開発時は必須ですね。以下のように eslint + prettier をプロジェクトに組み込み、ファイル保存時にフォーマットを有効にする、が基本セットです。
GitLens – git との統合
以下のように、薄いですが行の末尾に最終コミットの情報が表示され、吹き出しとして具体的なコミット情報が見えます。ここで差分も見えるし、ファイル単位の差分を表示させることも可能。
他にも色々な機能があり、詳細な説明は https://atmarkit.itmedia.co.jp/ait/articles/2111/19/news034.html などを参照。
vscode-icons – ファイルツリーにアイコン表示
拡張子や名前でだいたい分かるっちゃわかりますが、実際各種アイコンが付いているとよりわかりやすいです。
Auto Rename Tag – html のタグの末尾のタグ名の自動追随
HTML を記述するときに、開始タグに合わせて終了タグも同じ名称で自動で作ってくれます。開始タグ部分を変更すると、終了タグも自動で同じ名前に追随してくれます。
使ってみるとわかりますが、地味に結構便利です。
Markdown All in One – markdown 記述時の便利機能詰め合わせ
Markdown を書くならこれは必須だと思います。こちらも色々機能がありますが、目次を自動で作成してくれたり、セクション番号を自動で追加/更新してくれる機能だけでインストールする価値があります。
vscode-input-sequence – 連番を振る
細かい使い方はこちらなどでわかるかと思いますが簡単に言うと、以下で該当箇所に順番に連番が付与できます。
- ショートカット（ファイル内の単語一括選択（
⇧ + ⌘ + L））で連番をつけたい一覧を選択 - `⌥ +
⌘+ 0` でプロンプト表示 - プロンプトに入力（0オリジンで連番降る場合は 0 を入力して Enter）
Draw.io Integration – VSCode 内で drawio 編集
.draoio ファイルが VSCode 内で開け、編集できます。これまた非常に便利です。
使い勝手も本来の drawio と同じなので、簡単に編集ができるし、ローカルで drawio のファイルが見たい場合にもよいです。
Paste Image – Clipboard の画像をファイル化して md ファイルに埋め込む
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"
]
}
