必見の記事

VSCodeの秘伝のワザを大公開!

こんにちは!CX事業本部の片岡です。今回は自分が使っているVSCodeのショートカットと拡張機能を紹介します。
2020.06.29

こんにちは!CX事業本部の片岡です。

エディタ戦争が終息して5年たった今、無血革命と呼ばれたVisual Studio Codeをご存知でしょうか?皆様ご愛用のことと存じます。

そんなVisual Studio Codeの便利なショートカットと拡張機能を紹介します!

よく使うショートカットの紹介

拡張機能「Sublime Text Keymap and Settings Importer」をインストール前提の話です。

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

編集時によく使うショートカット

文字選択

  • Command + D :文字を選択(入力するたび選択中の文字を複数選択できます)
  • Command + U :文字選択のUndo(選択前に一つ戻ります)
  • Command + K → Command + D :文字選択をスキップ
  • Command + Control + G :選択中の文字と一致するものを全て選択

行の選択・操作

  • Command + L :行を範囲選択
  • Command + Shift + D :選択中の行を複製
  • Command + Shift + K :選択中の行を削除
  • Command + Control + G :選択中の文字を全て選択
  • Option + ↓ or ↑ :選択中の行を上下に移動
  • Command + Option + ↓ or ↑ :矩形選択
  • Command + Shift + L :選択中の行を矩形選択

HTMLの編集におすすめ

HTMLの編集って地味に面倒ですよね・・・そんな時に下記のショートカットを設定しておくと便利です!

Pugを使っているから関係ない?今はそういう話をしていないんだ!

選択しているタグを含む範囲選択

コマンドID editor.emmet.action.balanceOut をショートカットに登録します。

自分はCommand + Option + Aに割り当てています。

選択しているタグ内のテキストを範囲選択

コマンドID editor.emmet.action.balanceIn をショートカットに登録します。

自分はCommand + Shift + Aに割り当てています。

改行タグの挿入

Shift + Enterで改行タグを挿入できるようにしています。

keybindings.json

[
  {
    "key": "shift+cmd+a",
    "command": "editor.emmet.action.balanceIn"
  },
  {
    "key": "alt+cmd+a",
    "command": "editor.emmet.action.balanceOut"
  },
  {
    "key": "shift+enter",
    "command": "type",
    "args": {
        "text": "<br />"
    },
    "when": "editorTextFocus && editorLangId == 'html'"
  }
]

上記の3つのショートカットです。keybindings.jsonに追記すると使えるようになります。

おすすめの拡張機能の紹介

Docker

Dockerを使う人ならぜひ入れてみてください!Dockerの色々がGUIでできます!

コンテナのログが見れて、Shellに入れて、起動・停止ができます。

イメージ等の操作もGUIできるのでよき!

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

Settings Sync

VSCodeの設定や拡張機能の情報をGitHubのGistにアップロード・ダウンロードし、異なるVSCode間で設定を同期してくる拡張機能です。

自分みたいに今日の気分によって持ち歩くMacBook Proを変えるタイプの人にはもってこいな代物です。嘘ですちょっと盛りました。

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Power Mode

文字を打つと花火があがります!

これを入れていると「何これー!すごーい!♥」と女子ウケ抜群ですモテます。マジで。

https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode

Prettier

とあるヒットソングみたいな名前の拡張機能で、ソースコードをとにかく綺麗にしてくれます。

インデントの乱れは心の乱れなので積極的に直していきましょう。HTML・CSS・JavaScript・JSON等に使えます!

グッバイ それじゃこのコードは何?

汚くて読めない 分かりたくもないのさ

たったひとつできることがあるとするのならば

「君は綺麗だ」

― ♪ Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Bookmarks

ブックマークを追加して行き来できる拡張機能です。肥大化したモンスター級のReact Componentを編集する時に便利です(白目)

  • Command + Option + K :Bookmarkの追加 / 削除
  • Command + Option + J :前のBookmarkへ移動
  • Command + Option + L :次のBookmarkへ移動

実は範囲選択をBookmarkできるので、検索と組み合わせるとすごい技を繰り出せます。

例えば大量に複製した要素のID属性を変更したい場合、

  1. 正規表現 id="[^"]* で検索
  2. 全て範囲選択
  3. Bookmark追加
  4. 次のBookmarkへ → 修正のループ

というウルコンがあります。

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

GitLens

ソースコードの行ごとにgit blameしてくれる拡張機能です。他にも差分表示等色々見やすくなる機能も満載なので入れて損はないです!

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Git Graph

SourceTreeみたいにGUIでブランチを見れる拡張機能です。

余談ですが、交通事故で多いのは自宅から遠方よりも自宅の近辺で起こることが多いそうです。何が言いたいかというと、最後の最後で気が緩んで事故らないよう、ソースコードを触った後で消耗してる時でも脳死で見れるGUIに頼るのはありだと思います!

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

htmltagwrap

範囲選択したものをタグで優しく包んでくれる拡張機能です。React派もVue派も優しく包んでくれます。

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

Path Intellisense

入れたらわかるすっごいやつや!

ワークスペース内のパスをIntellisenseで補完してくれる超便利な拡張機能です。

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Document This

JSDocの構文を自動挿入してくれる拡張機能です。

コメントがきちんと書けるマメな男はやっぱりモテます。マジで。

https://marketplace.visualstudio.com/items?itemName=joelday.docthis

ESLint

プロジェクトにESLintが導入されている場合、エラーがあると教えてくれる拡張機能です。

プロジェクトによって「セミコロンつけろ!!」って怒られたり「セミコロンつけるな!!」って怒られたりするのでしょんぼりします。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Jest

Jestのテストコード書いている時にテストの状況を教えてくれる素敵な拡張機能です。上の画像はテストが通った時の画像です。

テストが通らなければバツ印がついて、通らなかった行に波線がつきます。この波線の行にマウスホバーすると詳しい内容を教えてくれます。

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

Jest Runner

Jestのテストを一つだけ実行したい時におすすめの拡張機能です。

それだけではなく、テスト内容をデバッグすることができます!どうしてもテストコードってデバッグしづらいのでステップ実行できるととても助かります!

テスト駆動開発?僕、創造神なんで。

https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner

最後に

まだまだ紹介したいショートカットや拡張機能がありますが、このへんでおしまいにします。

もっと便利なのがあるぜ!って人はお便りお待ちしております!

みんなも使ってみてくれるかな?

\いいともー!/