LoginSignup
272
お題は不問!Qiita Engineer Festa 2023で記事投稿!

自分的Visual Studio Code(VS Code)の必須設定4選

Last updated at Posted at 2023-06-14

1. 区切り文字の設定変更

CSSクラス名や変数名をダブルクリックした際、ハイフン等がデフォルト設定では区切り文字として判定されます。それらの判定を変更する設定です。

設定前

設定後

設定手順

  1. Code → 基本設定(Preferences) → 設定(Settings)
  2. 「設定の検索(Search settings)」欄に、editor.wordSeparators と入力
  3. 区切りとして扱ってほしくない文字を消す

vsc-1-3.jpg

初期値

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

自分の設定
初期値から-と$を削除

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

2. HTMLブロックの一括選択設定

HTMLブロックの選択を楽にする為の設定です。

Emmet公式の説明ページ

選択したいHTMLタグにカーソルを合わせ、設定したキーを押すと、


設定手順

  1. Code → 基本設定(Preferences) → キーボードショートカット(Keyboard Shortcuts)
  2. 「入力してキーバインドを検索(Type to search in keybindings)」欄に、editor.emmet.action.balanceOutと入力
  3. お好みのキーバインドを設定

※ 動作しない場合、「いつ」の設定を調整してみてください(自分は空欄)

vsc-2-3.jpg

.html以外の拡張子で動かない場合(emmet.includeLanguages)

.html以外でも拡張子によってはデフォルトでemmetが動くと思いますが、動かない場合はemmet.includeLanguagesの設定を確認、または調べてみてください。

設定場所

  1. Code → 基本設定(Preferences) → 設定(Settings)
  2. 「設定の検索(Search settings)」欄に、emmet.includeLanguages と入力
  3. 項目と値を入力する

3. 編集中ファイルの場所をFinderで開く(macOSのみの設定)

VS Codeのエクスプローラー内ファイル移動で足りる場合は必要ないですが、Finderで開きたい場面もあるので、編集中のファイルをFinderですぐ開けるようにしています。

設定手順

  1. Code → 基本設定(Preferences) → キーボードショートカット(Keyboard Shortcuts)
  2. 「入力してキーバインドを検索(Type to search in keybindings)」欄に、revealFileInOS と入力
  3. お好みのキーバインドを設定

※ 動作しない場合、「いつ」の設定を調整してみてください(自分は空欄)

4. フォルダまたはファイルを右クリックからVisual Studio Codeを開く(macOSのみの設定)

Windowsではデフォルトでこの機能があるのですが、macOSではできないです。個人的に不便だと感じるので設定しています。

設定手順

  1. macOS搭載されているAutomatorアプリを開く

  2. クイックアクションを選択
    vsc-4-3.jpg

  3. 赤枠で囲った部分を同じする
    vsc-4-4.jpg
    アクション (必須)
    → ライブラリから「Finder項目を開く」を選び、「このアプリケーションで開く」部分にはVisual Studio Codeを設定

    ワークフローが受け取る現在の項目 (必須)
    → ファイルまたはフォルダ

    検索対象 (必須)
    → Finder

    イメージ (任意)
    → フォルダ/ファイルを右クリック → クイックアクションで表示される、メニュー名左のアイコンを設定できます。(アイコンが反映されない時は、システム再起動をしてみてください)

  4. 保存する(設定画面上でCommand + S、また、保存時の名前がメニュー名になるので注意)

設定ファイルの保存場所

上記手順で作成したファイルは下記に保存されているので、消したい場合は下記を開き、該当のファイルを削除してください。(隠しフォルダです)

/Users/ユーザー名/Library(隠しフォルダ)/Services 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
272