🍣

VSCode全書 - おすすめ拡張機能・設定・ショートカットキー・キーバインド・Emmet・スニペットの紹介

dadada

2023/01/30に公開

VS Code

tech

コーダーやフロントエンドエンジニア向けのVSCodeの環境や機能を紹介していきます。かなりボリューミーなので是非参考にしてみてください。

こちらの6項目に分けて紹介します。

おすすめの拡張機能
設定
覚えておきたいショートカットキー
キーバインド
Emmet（エメット）
スニペット

配色テーマとファイルアイコン

まずはおすすめのテーマとアイコンを紹介します。

⭐️配色テーマ - GitHub Theme

GitHubが提供するテーマです。ダークモードが見やすいので長年使っています。

Monokai Dark Sodaも結構好きです。 Sublime Textを思い出すような配色ですね。

⭐️ファイルアイコン - Material Icon Theme

ファイルやフォルダにアイコンを付けてくれます。この拡張機能はとにかく種類が豊富です。

表示拡張系

見た目を拡張できる拡張機能の紹介です。

日本語化 - Japanese Language Pack for Visual Studio Code

VSCodeを日本語化します。うまく日本語化されない時は再起動すれば直ると思います。

⭐️インデントの背景色を変える - indent-rainbow

インデントごとに背景色が変わります。

カラーコードの色を可視化 - Color Highlight

カラーコードに対してカラーチップを表示してくれます。

ちなみに、カラーコードの部分にhoverするとカラーパレットが出てきます。

⭐️全角スペースをハイライト - EvilInspector

全角スペースをハイライトしてくれます。

⭐️行末の半角スペースをハイライト - Trailing Spaces

行末の半角スペースをハイライトしてくれます。

機能拡張系

便利な機能を追加できる拡張機能の紹介です。

⭐️連番を一瞬で入力できる - vscode-input-sequence

0, 1, 2, 3...のような連番を複数箇所に一瞬で入力できるプラグインです。

カーソルを複数箇所に追加してCommand+Option+0で起動 → 連番の始まる数を指定して実行すると選択箇所に連番が反映されます。四則演算も可能です。

とても感動した拡張機能なので是非チェックしてみてください！

⭐️命名規則を一瞬で変更 - change-case

単語を選択して実行すると命名規則を変更できます。

例えばfoo_barに対して実行すると、キャメルケースならfooBarに、大文字ならFOO_BARのようになります。

キーバインドの設定ファイルでextension.changeCase.commandsを検索すると任意のキーを割り当てられるので、私はCommand+_にしています。

⭐️今流行りの対話型AIチャットボット - ChatGPT

VSCode上でChatGPTに色々聞けるようになります。サンプルコードも提示してくれます。

ChatGPTについてはこちらの記事をご覧ください。

導入方法はこちらの記事が参考になります。

⭐️エディタ上で単語を翻訳 - DeepL for Visual Studio Code

単語を選択してOption+tでDeepLを実行すると、その単語を翻訳して変換してくれます。

設定方法はこちらの記事を参考にしてみてください。

⭐️コード整形 - Prettier - Code formatter

コードを整形（フォーマット）してくれます。

https://ma-vericks.com/vscode-prettier/

ローカルサーバーをVSCodeで起動 - Live Server

ローカルサーバーをVSCode上で起動できます。

起動方法も簡単で、開きたいファイルのエディター上で右クリック → Open width Live Serverを選択するだけです。

⭐️行ごとにブックマークを付けて手軽に移動 - Bookmarks

行に対してブックマークを付けて、ショートカットキーでその箇所にジャンプできます。

ショートカットキー	動作
`Command` + `Option` + `k`	ブックマークを作成
`Command` + `Option` + `l`	次のブックマークに移動
`Command` + `Option` + `j`	前のブックマークに移動

コードが何千行もあるファイルを編集する時に重宝します。

エラーをコード上に表示してくれる - Error Lens

記述ミス時のシンタックスエラーなどのエラー文をコード上に表示してくれます。

閉じタグ}が無い時の表示

コピー履歴が保存され自由にペースト出来る - Clipboard Ring

コピーしたテキストが履歴として保存され、Command+Shift+vで呼び出せるようになります。

このキーを繰り返し実行すると、履歴を遡ることもできます。

Gitの操作を使いやすく - GitLens — Git supercharged

VSCode上でGitをいい感じに操作できるようになります。

Gitのログのグラフを見やすく - Git Graph

$ git log --graphで表示されるログのグラフをVSCode上で見やすくしてくれます。

言語依存系

最後に各言語に関する拡張機能の紹介です。言語系の拡張機能を入れると、プロパティや変数名などの予測変換の拡張や、コードのシンタックスハイライト（見やすく）などをしてくれます。

HTMLの開始タグと終了タグを同時に編集 - Auto Rename Tag

HTMLの開始タグを編集したら終了タグも同時に修正されます。

選択範囲を新たなタグで囲める - htmltagwrap

選択範囲のタグを新たなタグで囲めるようになります。

任意のタグの開始から終了タグまでを選択 → Option+wで実行できます。タグが選択された状態なので、そのままタグの種類やclassを変えることもできます。

CSS変数の拡張 - CSS Variable Autocomplete

CSS変数で定義した色のプレビューが予測変換に追加されたり、変数名をクリックすると定義元にジャンプできるようになったりします。

Sassを拡張 - Sass

Sassに対してシンタックスハイライトや構文チェックなどを行える拡張機能です。

Sassの構文チェッカー - Stylelint

Sassの構文をチェックをする拡張機能です。

JSの構文チェッカー - ESLint

ECMAScript（JavaScript）の構文をチェックをする拡張機能です。

Reactを拡張 - ES7+ React/Redux/React-Native snippets

Reactに関する様々なスニペットを追加してくれます。

Next.jsを拡張 - Next.js snippets

Next.js専用のスニペットです。

例えば、nspageと入力すると以下のようにコンポーネントの雛形を展開してくれます。

export default function Test() {
  return <div>Enter</div>;
}

export async function getServerSideProps(ctx) {
  return {
    props: {
      data: null,
    },
  };
}

PHPを拡張 - PHP Intelephense

PHPに対してシンタックスハイライトや構文チェックなどを行える拡張機能です。

WordPressを使う場合は、こちらの設定をしておくのがおすすめです。

https://blog-and-destroy.com/36008

WordPress関数を予測変換に追加 - WordPress Snippets

WordPressの関数名を予測変換に表示してくれます。

マークダウンファイルの編集機能を拡張 - Markdown All in One

マークダウンのプレビューをエディター上に表示したり、テキストを選択した状態でURLを貼り付けたら[テキスト](https://コピーしていたURL)のように変換してくれたりなど、マークダウンを編集するうえで役に立つ機能が使えるようになります。

設定

ユーザー独自の設定はsettings.jsonに記述されています。

設定ファイルはCommand+Shift+pでコマンドパレットを開き、setting jsonと入力すれば開けます。

`settings.json`の例

私が使っている設定です。プラグイン独自の記述は削除しているので、このままコピペして使えます。

settings.json

{
    "editor.bracketPairColorization.enabled": true,
    "editor.fontSize": 12,
    "editor.fontFamily": "Source Code Pro, Menlo, Monaco, 'Courier New', monospace",
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.tabSize": 2,
    "editor.snippetSuggestions": "top",
    "editor.stickyScroll.enabled": true,
    "editor.wordWrap": "on",
    "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
    "emmet.includeLanguages": {
        "liquid": "html"
    },
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "emmet.variables":{
        "lang": "ja"
    },
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "explorer.compactFolders": false,
    "extensions.ignoreRecommendations": true,
    "files.exclude": {
        "**/node_modules": true
    },
    "files.associations": {
        "*.liquid": "liquid",
        "*.mtml": "html",
        "*.conf": "dockerfile"
    },
    "editor.hover.enabled": false,
    "security.workspace.trust.untrustedFiles": "open",
    "terminal.integrated.fontSize": 11,
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.copyOnSelection": false,
    "workbench.colorTheme": "GitHub Dark",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.editor.untitled.hint": "hidden",
    "workbench.startupEditor": "newUntitledFile",
    "workbench.panel.defaultLocation": "right",
    "workbench.colorCustomizations": {
      // https://code.visualstudio.com/api/references/theme-color
      "tab.activeBackground": "#848484", // アクティブタブの背景色
      "tab.activeForeground": "#eee", // アクティブタブの文字色
      "tab.inactiveForeground": "#c2c2c2", // アクティブではないタブの文字色
      "tab.hoverBackground": "#6a6a6a", // タブのホバー時の背景色
      "tab.hoverForeground": "#eee", // タブのホバー時の文字色
      "list.inactiveSelectionBackground": "#848484", // エクスプローラーの選択中の背景色
      "list.inactiveSelectionForeground": "#eee", // エクスプローラーの選択中の文字色
      "list.warningForeground": "#faff5e", // エクスプローラーのWarningの文字色
      "gitDecoration.modifiedResourceForeground": "#a1deff" // Gitの差分がある時の文字色
    },
}

`settings.json`の解説

ざっくりですが、上記のsettings.jsonで何をしているかを解説していきます。

ペアの`{}`や`()`を色付けする

"editor.bracketPairColorization.enabled": true,

エディターのフォント系

"editor.fontSize": 12,
"editor.fontFamily": "Source Code Pro, Menlo, Monaco, 'Courier New', monospace",

複数カーソルを選択する時のキー

"editor.multiCursorModifier": "ctrlCmd",

タブの大きさ

"editor.tabSize": 2,

登録したスニペットを、デフォルトの予測変換候補より上に表示させる

"editor.snippetSuggestions": "top",

JavaScriptの関数やCSSのクラスなどをスクロール時に上部に固定（2022/8にリリースされた新機能）

"editor.stickyScroll.enabled": true,

コードが一行に収まらない時は折り返す

"editor.wordWrap": "on",

ダブルクリックで単語を選択する時の区切り文字を指定

"editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",

デフォルトの設定からハイフン-を削除しています（クラス名をダブルクリックした時に、ハイフンが含まれていたらそこで区切られてしまうので）。

拡張子が違うファイルでも、好きな種類のemmet省略記法を使えるようにする

以下の例では.liquid拡張子のファイルでも.htmlのemmet省略記法を使えるようにしています。

"emmet.includeLanguages": {
    "liquid": "html"
},

htmlの書き方によってはTabキーを押してもemmetが起動しないことがあるのでそれを防ぐために記述

"emmet.triggerExpansionOnTab": true,

`editor.snippetSuggestions` で定義した設定を適用する

"emmet.showSuggestionsAsSnippets": true,

ファイルエクスプローラーでフォルダが空の場合に表示が省略されるのを防ぐ

"explorer.compactFolders": false,

ファイルの移動や削除時に確認ダイアログが表示されるのを防ぐ

"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,

拡張機能の通知メッセージ（右下に出るやつ）をOFFにする

"extensions.ignoreRecommendations": true,

本当はONにしたほうが良いと思うのですが、起動するたびに毎回表示されるのが鬱陶しかったのでOFFにしました。

任意の名前のファイルやフォルダをファイルエクスプローラーから非表示にする

"files.exclude": {
    "**/node_modules": true
},

マウスホバー機能を無効化

"editor.hover.enabled": false,

HTMLの属性やCSSにマウスホバーした時に表示されるMDNのリンクが鬱陶しかったので、hover機能自体を無効にしています。これ↓

"html.hover.references": false,などをfalseにすれば消えると思ったのですが上手くいかなかったので、hover機能自体を無効にしました。

ターミナルまわり

"terminal.integrated.fontSize": 11,
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.copyOnSelection": false,

上から「フォントサイズ, カーソルを点滅させる, テキスト選択時にコピーしないようにする」になります。

ワークスペースまわり

"workbench.colorTheme": "GitHub Dark",
"workbench.iconTheme": "material-icon-theme",
"workbench.editor.untitled.hint": "hidden",
"workbench.startupEditor": "newUntitledFile",
"workbench.panel.defaultLocation": "right",

上から「テーマ, アイコン, ヒントを非表示にする, 起動時に空の新規ファイルを開くようにする, ターミナルの位置を右側にする」になります。

テーマカラーを少しカスタマイズ

"workbench.colorCustomizations": { // https://code.visualstudio.com/api/references/theme-color
  "tab.activeBackground": "#848484", // アクティブタブの背景色
  "tab.activeForeground": "#eee", // アクティブタブの文字色
  "tab.inactiveForeground": "#c2c2c2", // アクティブではないタブの文字色
  "tab.hoverBackground": "#6a6a6a", // タブのホバー時の背景色
  "tab.hoverForeground": "#eee", // タブのホバー時の文字色
  "list.inactiveSelectionBackground": "#848484", // エクスプローラーの選択中の背景色
  "list.inactiveSelectionForeground": "#eee", // エクスプローラーの選択中の文字色
  "list.warningForeground": "#faff5e", // エクスプローラーのWarningの文字色
  "gitDecoration.modifiedResourceForeground": "#a1deff" // Gitの差分がある時の文字色
},

選択中のタブとエクスプローラーがより強調されるようにテーマの配色をカスタマイズしています。

このように、既存テーマの一部の配色を設定ファイルで上書きすることもできます。どのプロパティがどのパーツに対応しているかは公式サイトをご覧ください。

VSCodeの自動更新の通知を起動時のみにする

"update.mode": "start",

通知が鬱陶しかったので、起動時にだけ通知が来るようにしています（あまり再起動自体をしないので）。

覚えておきたいショートカットキー

絶対に覚えておきたいショートカットキーをいくつか紹介します。独自で設定しているものもあるので、それらは次の項で紹介するキーバインドをご覧ください。

項目	ショートカットキー
次の出現箇所を選択	`Command`+`d`
すべての出現箇所を選択	`Command`+`Shift`+`l`
行を下へコピー	`Command`+`b`（独自設定）
行を上/下に入れ替える	`Option`+`上下キー`
ファイルを名前で検索	`Command`+`p`
ファイル内検索	`Command`+`f`
ファイルを横断して検索	`Command`+`Shift`+`f`
カーソルを増やす	`Command`を押しながらクリック
カーソルを上に増やす	`Command`+`Optino`+`↑`
カーソルを下に増やす	`Command`+`Option`+`↓`
単語単位でカーソルを移動	`Option`を押しながら左右キー
単語を選択	単語の上でダブルクリック
一行すべてを選択	行の上でトリプルクリック
選択範囲を増減	`Shift`を押しながら上下左右キー
検索窓の中で履歴を戻る/進む	`Command`+`f`で出てくる検索窓の中で`上下キー`
コードの一番上/下/左/右に移動	`Command`+`上下左右キー`

こちらの記事も参考になります。

キーバインド

キーバインドを使うと、デフォルトのショートカットキーを自由に変更したり、もともとショートカットキーが設定されていない機能に対して独自のショートカットキーを登録することができます。

設定ファイルはCommand+Shift+pでコマンドパレットを開き、open keyboard shortcutsetと入力すれば出てきます。

自分で設定したショートカットキーで絞り込みたい場合は、画面右側の・・・ボタンの「ユーザーのキーバインドを表示」を選択します。もしくは@source:userのように入力しても絞り込むことができます。

私は以下のように設定しています。

いくつか抜粋して紹介します。

ファイル：開く
- Command+pでファイルを開く時に間違ってCommand+oを押すことが多かったのでキーを変えました（この方法でファイルを開くことはまず無いのでキーを変えても私は全然問題なかったです）。
行を下へコピー
- 一番使うショートカットキーです。とても便利なので是非設定してみてください！
「エディターを下に分割」と「エディターレイアウトの垂直/水平を切り替える」
- こちらはセットで使うのでキーボードの位置が近いキーで設定しています。
Emmet イメージサイズの更新
- <img>タグの上で実行すると、画像ファイルのwidthとheightを自動で入力してくれます（srcに変数を使っていると動きません）
- 私はCommand+iを割り当てています

Emmet（エメット）

EmmetはVSCodeに標準搭載されており、HTMLやCSSを省略記法で書ける機能（書き方）のことです。

いくつか例を紹介します。

htmlでpと入力してTabキーを押すと<p></p>が展開される
cssでdfと入力してTabキーを押すとdisplay: flex;が展開される
cssでmt10と入力してTabキーを押すとmargin-top: 10px;が展開される

このように、特定の文字を入力してTabキーを押すことで、様々なコードが展開されます。

では、様々な書き方を解説していきます。

HTMLの基礎

HTMLタグを展開する場合は、タグ名をそのまま入力するだけでOKです。

li
↓
<li></li>

よく使われる属性を持つタグは、その属性も同時に展開されます。

img
↓
<img src="" alt="">

classやid

p.text
↓
<p class="text"></p>

#foo
↓
<div id="foo"></div>

入れ子や複数要素の同時展開

ul>li
↓
<ul>
  <li></li>
</ul>

p*3
↓
<p></p>
<p></p>
<p></p>

テキストを挿入

<p>text</p>
↓
p{text}

CSSの基礎

CSSは基本的にプロパティと値の頭文字で展開できます。値は数値にも対応しています。

db // d = display, b = block
↓
display: block;

mt10 // m = margin, t = top, 10 = 値
↓
margin-top: 10px;

display: xxx

入力値	展開後
`db`	`display: block;`
`di`	`display: inline;`
`dib`	`display: inline-block;`
`dn`	`display: none;`
`df`	`display: flex;`

Flexbox

入力値	展開後
`jc`	`justify-content: start;`
`jcc`	`justify-content: center;`
`jcsb`	`justify-content: space-between;`
`ai`	`align-items: start;`
`aic`	`align-items: center;`
`fxw`	`flex-wrap: nowrap;`
`fxww`	`flex-wrap: wrap;`
`fxd`	`flex-direction: row;`
`fxdc`	`flex-direction: column;`
`fx0`	`flex: 0;`
`fx0-0-auto`	`flex: 0 0 auto;`

テキスト

入力値	展開後
`c`	`color: #000;`
`c#fff`	`color: #fff;`
`fz20`	`font-size: 20px;`
`fwb`	`font-weight: bold;`
`lh1.5`	`line-height: 1.5;`
`ta`	`text-align: left;`
`tar`	`text-align: right;`
`tac`	`text-align: center;`

margin（padding）

paddingはmをpに変えるだけです。

入力値	展開後
`m10`	`margin: 10px;`
`mt10`	`margin-top: 10px;`
`ml10`	`margin-left: 10px;`
`mr10`	`margin-right: 10px;`
`mb10`	`margin-bottom: 10px;`
`m-a`	`margin: auto;`
`m10-a`	`margin: 10px auto;`
`m10-20`	`margin: 10px 20px;`
`m10-20-30`	`margin: 10px 20px 30px;`
`m10p`	`margin: 10%;`

チートシート

他にも様々な書き方があるので、興味がある方はこちらを色々見てみるといいでしょう。

https://docs.emmet.io/cheat-sheet/

スニペット

スニペットとは、特定の文字を入力すると登録したコードを展開してくれる機能のことです。Emmetを自分で自由に作れるようなイメージです。

例えば、以下のように登録していると、flexを入力したら予測変換候補が出てくるようになって、それを選択するとbodyの中のコードが展開されます。

"flex": {
    "prefix": "flex",
    "body": [
        "display: flex",
        "justify-content: center",
        "align-items: center",
    ]
},

よく使うコードを登録しておけばコーディング速度が格段に早くなります。

スニペットの設定ファイル

スニペットの設定ファイルは、画面左下の歯車から「ユーザースニペットの構成」を選択すると開けます。

設定ファイルは言語別で用意されています。

書き方

prefixにショートカットキーを、bodyには展開したいコードを書きます。

"flex": { // ← この部分は他のグループと重複しない値を入力する（prefixと同じで大丈夫）
    "prefix": "ショートカットキー",
    "body": [
        "展開するコード",
    ]
},

bodyの中ではいくつかの書き方やルールがあります。

"は\"のようにエスケープする（他にもエスケープが必要な文字がいくつかある）
$1, $2...のように書くと、展開した時にカーソルがそこにセットされる
インデントは\t、改行は\nで書く（配列形式で改行を再現することも可能）

細かい書き方はこちらの記事で解説しています。

https://web-guided.com/620/

サンプル

私のスニペットの一部を紹介します。.htmlのスニペットにはダミー画像のURLを持つ<img>や<picture>要素などを登録しています。

{
  "img-dummy": {
    "prefix": "img-dummy",
    "body": [
      "<img src=\"https://picsum.photos/900/600\" alt=\"\" width=\"900\" height=\"600\">",
    ],
  },
  "noindex": {
    "prefix": "noindex",
    "body": [
      "<meta name=\"robots\" content=\"noindex, nofollow\">",
    ],
  },
  "picture": {
    "prefix": "picture",
    "body": [
      "<picture>",
      "  <source media=\"(min-width:768px)\" srcset=\"$1\" width=\"600\" height=\"400\">",
      "  <img src=\"$2\" alt=\"\" width=\"600\" height=\"400\">",
      "</picture>",
    ],
  },
}

最後に

この記事で紹介した設定や知識をご自身の環境に取り入れれば作業速度が格段に変わるはずなので、是非色々試してみてください！

また、おすすめの設定や拡張機能などがあったら是非教えてください🙏

ネクスキャットテックブログPublication

デザイン経営を推進するデジタルエージェンシーのネクスキャット株式会社が運営するテックブログです。