VS Code Settings

Settings

Commonly Used

Editor:Word Wrap

折り返し

on

Files: Exclude

非表示させる拡張子

**/*.jpg

Text Editor

Editor > Minimap:Enabled

ミニマップ非表示

チェックを外す

Editor > Hover:Enabled

カーソールオーバーでポップアップ無効化

チェックを外す

Editor:ScrollBeyondLastLine

スクロールが最終行を超えて余白ができないようにする

チェックを外す

Editor:Lightbulb: Enalbed

選択行の電球アイコン非表示

off

View > Appearance > Sticky Scroll

Editor:Sticky Scroll: Enabled

親要素が上部に固定される機能無効化

チェックを外す

Workbench

Editor Management > Enable Preview

ファイルを新しいタブで開く

チェックを外す

Workbench: Startup Editor

エディター起動時の初期ページ

none

Breadcrumbs > Enabled

ファイルのパンくずナビ非表示

チェックを外す

Extensions

PHP > validate: Enable

エディター起動時のphp validateエラーがでないようにする

none

CSS > Lint: Empty Rules

css空でもエラーwarningがでないようにする　例：div {}　

ignore

Emmet: Exclude Language

cssの余計なサジェスト補完を無効にする

Add Item で cssを追加

Preferences: Open Keyboard Shortcuts (JSON)

css値が空のエラーを制御する設定はない　jsonでも"css.lint.propertyValueExpected"を認識しない。例：color:;

邪魔なCSSエラーチェック機能無効化

"css.validate": false

ファイルタブ切替時プロジェクトツリー内がアクティブのファイルの位置に移動するのを無効化

"explorer.autoReveal": false

Keyboard Shortcuts

• かぶってるショートカットを右クリック[Remove keybinding]で削除
• 目的のショートカットに割当

VS code デフォルトショートカット Atom比較

	VS Code	Atom
選択した行の複製* Copy Line Down	Alt + Shift + ↓	Ctrl + Shift + D
文字の置き換え	Ctrl + H	Ctrl + Shift + F
選択行の移動* Move Line Up/Down	Alt + ↑/↓	Ctrl + ↑/↓
次のタブ* View:Open Next Editor	Ctrl + PageDown	Ctrl + Tab
前のタブ* View:Open Previous Editor	Ctrl + Shift + PageUp	Ctrl + Shift + Tab
コメントアウト* Toggle Line Comment	Ctrl + め	Ctrl + / NumPad_Divide

*変更済み

keybindings.jsonからショートカットを変更する場合

View > Command Pallete(Ctrl + Shift + P) > Preferences: Open Keyboard Shortcuts (JSON)

//tab切り替え
[
    {
        "key": "ctrl+tab",
        "command": "workbench.action.nextEditor"
    },
    {
        "key": "ctrl+shift+tab",
        "command": "workbench.action.previousEditor"
    }
]

+の前後はスペースなし

Extensions Ctrl + Shift + X

HTML to CSS autocompletion

HTMLで使われてるCSSのclass名をCSSファイル内で補完

Atom One Dark Theme by Mahmoud Ali

Atom風のテーマ:選択された文字列状態わかりづらいため、選択ハイライトhighlight-icemodeもセットでインストール
タブ選択状態の色がわかりづらいためテーマjsonを編集

C:\Users\<ユーザー名>\.vscode\extensions\akamud.vscode-theme-onedark-2.3.0\themes.OneDark.json

"editorGroupHeader.tabsBackground":"#3a3f4b",// Originally #21252b
"tab.inactiveBackground":"#3a3f4b",
"tab.selectedBorderTop":"#6caddf",

vscode-icons by VSCode Icons Team

ファイルアイコン

highlight-icemode

ワード選択時に同じワードをハイライトさせる

Git Graph

sourcetreeのようなローカルにある全てのブランチの樹形図を表示できる

AI Settings - Github Copilot

Auto Completionsを無効化

右下copilot アイコン

Auto Completionsの全て

チェックを外す

使いづらい点

・htmlファイル内ではcssの補完サジェストが出るのにphpファイルの中でcssの補完サジェストがでない
・html側で使ってるclass名のサジェスト出ない
・gitファイルの変更状態の色変化の反応が遅い