VS code setting

setting

Commonly Used

折り返し

word wrap - on

非表示させる拡張子

files: Exclude - add **/*.jpg

Text Editor

ミニマップ非表示

Minimap - disable

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

Hover: enebled

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

ScrollBeyondLastLine　チェック外す

Workbench

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

Editor Management > Enable Preview　チェックを外す

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

Startup Editor - none

Extensions

php validateエラーがでないようにする

php.validate.enable チェックをはずす

css エラーwarningがでないようにする

Extensions > CSS > Empty Rules - ignore

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

Extension > Emmet > Exclude language - add css

Color Theme

テーマの検索と追加方法

左メニューExtensions(Ctrl + Shift + X)の検索窓または
設定 > Color Theme - 検索窓直下の[「+ browse additional themee...」から検索
Atom風のテーマは 「Atom One Dark Theme by Mahmoud Ali」

File Icon Theme

左メニューExtensions(Ctrl + Shift + X)の検索窓または
検索窓したデフォルト３つの下の[Install Additional File Icon Themes...]から検索
一番シンプルなアイコンは[TextPad Icon Theme]

ショートカット

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

	VS Code	Atom
選択した行の複製*	Alt + Shift + ↓	Ctrl + Shift + D
文字の置き換え	Ctrl + H	Ctrl + Shift + F
選択行の移動	Alt + ↑/↓	Ctrl + ↑/↓
先に進む	Ctrl + Y	Ctrl + Y

*変更済み

ショートカットの変更

設定　> Keyboard shortcuts

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

Ctrl + Tab でタブ切り替え

View> command pallete >Preferences: Open Keyboard Shortcuts (JSON)

keybindings.json

[
    {
        "key": "ctrl+tab",
        "command": "workbench.action.nextEditor"
    },
    {
        "key": "ctrl+shift+tab",
        "command": "workbench.action.previousEditor"
    }
]

+の前後はスペースなし

Extensions

左メニューExtensions(Ctrl + Shift + X)の検索窓

HTML to CSS autocompletion

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

hightlight-selections-vscode

選択ハイライト （反応遅い）

Extension > highlight Selections: Border Color

  "highlightSelections.borderColor": "#eee"

Highlight Matching Tag

始まりタグ、閉じタグに下線をつける

Extension > Highlight Matching Tag config > style

"highlight-matching-tag.styles": { "opening": { "name": { "underline": "#608cf7" } } }

使いづらい点

htmlファイル内ではcssの補完サジェストが出るのにphpファイルの中でcssの補完サジェストがでない
html側で使ってるclass名のサジェスト出ない