245
271

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

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

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. 項目と値を入力する

"emmet.includeLanguages": {
    "ejs": "html",
    "php": "html",
    "erb": "html"
}

3. 編集中ファイルの場所を、Finder(macOS)又はエクスプローラー(Windows)で開く

VS Codeのエクスプローラー内ファイル移動で足りる場合は必要ないですが、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 

5. 左サイドバーファイルツリーの固定スクロールを止める

2024年1月に追加された機能なのですが、個人的に好きではないので止めます。

設定手順

  1. Code → 基本設定(Preferences) → 設定(Settings)
  2. 「設定の検索(Search settings)」欄に、workbench.tree.enableStickyScroll と入力
  3. チェックを外す

スクリーンショット 2024-08-13 143800.png

245
271
0

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
245
271

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?