はじめに
私が知っているVSCodeの設定、ショートカット、スニペット、拡張機能をまとめました。設定ミスなどあるかもしれないですが、参考になれば幸いです。
↓こんな感じの見た目になります。
設定
以下のファイルに設定します。
C:\Users\ユーザ名\AppData\Roaming\Code\User\settings.json
settings.json
{
// 元ファイルの内容をすべて上書きしないように注意
// 拡張機能ーbackground
"background.fullscreen": {
"useFront": true,
"style": {
"background-position": "100% 100%",
"background-size": "auto",
"opacity": 0.3
},
// ローカルの画像へのfileパスはブラウザにドラッグアンドドロップで取得
"images": [
// "file:///C:/Users/${userHome}/AppData/Roaming/Code/User/background.jpg"
]
},
// 拡張機能ーVSCode Animations
"vscode_custom_css.imports": [
// "file:///c:/Users/${userHome}/.vscode/extensions/brandonkirbyson.vscode-animations-2.0.7/dist/updateHandler.js"
],
"animations.Enabled": true,
"animations.Scrolling": "Fade",
"animations.CursorAnimation": true,
// エディターの表示設定
"editor.renderWhitespace": "none", // 空白文字の表示
"editor.unicodeHighlight.ambiguousCharacters": true, // Unicode文字表示 Α A
"editor.unicodeHighlight.includeComments": true, // コメント内でUnicode文字表示
"editor.renderControlCharacters": true, // 制御文字を表示
"editor.renderLineHighlight": "all", // カーソル行を強調
"editor.minimap.enabled": false, // ミニマップ
"editor.guides.bracketPairs": true, // 括弧の対応を線で表示
"breadcrumbs.enabled": true, // パンくずリストを表示
"editor.mouseWheelZoom": true, // Ctrl+マウスホイールでズーム
"editor.cursorBlinking": "smooth", // カーソル点滅のアニメーション
"editor.cursorSmoothCaretAnimation": "on", // カーソル移動のアニメーション
"editor.cursorSurroundingLines": 0, // キー操作でスクロールする際の表示行数
"editor.unicodeHighlight.invisibleCharacters": true, // 半角スペース以外の空白文字（目に見えない文字）にハイライト追加
"editor.bracketPairColorization.enabled": true, // 括弧の対応を色付け（対応対象は以下）
"editor.language.colorizedBracketPairs": [
["‘", "’"],
["“", "”"],
["(", ")"],
["（", "）"],
["｟", "｠"],
["[", "]"],
["［", "］"],
["〚", "〛"],
["〔", "〕"],
["{", "}"],
["｛", "｝"],
["〈", "〉"],
["《", "》"],
["「", "」"],
["『", "』"],
["【", "】"],
["〖", "〗"],
["〝", "〟"]
],
// エディターの動作設定
"editor.formatOnSave": true, // 保存時にフォーマット
"editor.defaultFormatter": "esbenp.prettier-vscode", // デフォルトのフォーマッターをPrettierに設定
// "files.trimTrailingWhitespace": true, // 保存時に末尾の空白を削除
// "files.insertFinalNewline": true, // 保存時にファイル末尾に改行を挿入
// "files.trimFinalNewlines": true, // 保存時にファイル末尾の空行を削除
"editor.formatOnPaste": true, // 貼り付け時にフォーマット
"editor.formatOnType": true, // 入力時にフォーマット
"editor.wordSeparators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?゠・，、；：！？．。‘’“”（）｟｠［］〚〛〔〕｛｝〈〉《》「」『』【】〖〗〝〟", // 単語区切り文字
// "editor.wordSegmenterLocales": ["ja"], // 日本語単語区切り
"editor.copyWithSyntaxHighlighting": false, // 書式設定なしでテキストをコピー
"editor.insertSpaces": false, // タブキーを押したときにスペースを挿入するか
"editor.smoothScrolling": true, // エディタのスクロールを滑らかに
"workbench.list.smoothScrolling": true, //VS Code のリストビュー（ファイルエクスプローラーなど）のスクロールを滑らかに
"editor.roundedSelection": true, // 選択範囲の角を丸める
"editor.find.autoFindInSelection": "multiline", // 検索時に範囲選択している場合、その範囲のみを検索
// ワークベンチの設定
"workbench.editor.wrapTabs": true, // タブを折り返し表示
"workbench.editor.pinnedTabsOnSeparateRow": true, // ピン留めタブを別行に表示
"workbench.editor.openPositioning": "last", // 新しいタブを右端に開く
"accessibility.dimUnfocused": true, // フォーカスされていないエディタを暗くする
// エクスプローラーの設定
"explorer.compactFolders": false, // フォルダーをコンパクトに表示
"explorer.autoReveal": true, // アクティブファイル選択時にエクスプローラーのフォーカスが移動する
// ターミナルの設定
"terminal.integrated.defaultProfile.windows": "Command Prompt", // デフォルトのターミナルをcmdに変更
"terminal.integrated.confirmOnExit": "always", // 終了時に確認
"terminal.integrated.showExitAlert": true, // 終了時に確認
"terminal.integrated.copyOnSelection": true, // 選択テキストをクリップボードにコピー
"terminal.integrated.cursorStyle": "line", // カーソルスタイル
"terminal.integrated.commandsToSkipShell": [
// ターミナルで入力したショートカットをターミナルで処理しないようにする配列
"workbench.action.toggleSidebarVisibility" // サイドバーの表示/非表示
],
// デバッグの設定
"debug.inlineValues": "on", // デバッグ中に変数値を表示
"debug.internalConsoleOptions": "openOnSessionStart", // デバッグコンソールを自動で開く
"debug.openDebug": "openOnSessionStart", // デバッグビューを自動で開く
// 検索の設定
"search.showLineNumbers": true, // 検索結果に行数を表示
// 言語固有の設定
"[csv]": {
"editor.wordWrap": "off" // CSVファイルの行を折り返しなしで表示
},
"[log]": {
"editor.wordWrap": "off" // LOGファイルの行を折り返しなしで表示
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" // JSONファイルのデフォルトフォーマッター
},
// UI
// "workbench.iconTheme": "material-icon-theme", // アイコン
// "workbench.productIconTheme": "jetbrains-idea-product-icon-theme", //製品アイコン
"editor.fontFamily": "Courier New", //フォント
// "workbench.activityBar.location": "hidden", // 左横バー
"window.titleBarStyle": "custom", // 上のバー
"window.customTitleBarVisibility": "never", // 上のバー
// "window.menuBarVisibility": "toggle", // 上のバーのファイルとか
"workbench.layoutControl.enabled": false, // 上のバーの右の奴
"window.commandCenter": false, // 上のバーのコマンドセンター
"workbench.statusBar.visible": true, // 下のバーの表示
"window.dialogStyle": "custom", // ダイアログの見た目
"window.title": " ", // ウィンドウタイトル
// 色
"workbench.colorTheme": "Visual Studio Dark",
"editor.tokenColorCustomizations": {
//「Inspect Editor Tokens and Scopes」でscope,foreground調べられる
"textMateRules": [
{
//テンプレ
"scope": "",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "comment",
"settings": {
"fontStyle": "", // 筆記体を禁止
"foreground": "#aaeb79cf"
}
},
{
"scope": "string",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "keyword",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "constant",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "variable",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "entity.name.function",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "entity.name.type",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "punctuation.separator.comma.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "meta.objectliteral.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "meta.array.literal.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "meta.arrow.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "meta.var.expr.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "meta.block.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "meta.function.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "source.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "variable.parameter",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "variable.other.readwrite.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "variable.other.readwrite.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "variable.other.readwrite.alias.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "variable.other.object.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "punctuation.terminator.statement.tsx",
"settings": {
"foreground": "#eefdf0"
}
},
{
"scope": "variable.object.property.tsx",
"settings": {
"foreground": "#eefdf0"
}
}
]
},
"workbench.colorCustomizations": {
//--------------- サイドバー（左）--------------------
"activityBarBadge.background": "#7FDBCA89", //通知バッジの背景
"activityBarBadge.foreground": "#ffffff", //通知バッジの文字
"activityBar.foreground": "#7FDBCA", //選択中（マークアイコン）
"activityBar.background": "#011f38", // 背景
"activityBar.activeBorder": "#7FDBCA", //選択中の左の線
"sideBar.background": "#011f38", // 背景
"sideBar.border": "#06eeff2d", // エディタとの区切り線
"tree.indentGuidesStroke": "#7FDBCA", // ファイルのインデントのガイド線
//--------------- タブ（上）--------------------
"tab.activeBackground": "#5dbeff30", // アクティブなタブの背景
"tab.activeForeground": "#7FDBCA", //アクティブタブの文字
// "tab.activeBorder": "#7FDBCA", //アクティブなタブの下の線
// "tab.activeBorderTop": "#7FDBCA", //アクティブなタブの上の線
"editorGroupHeader.tabsBackground": "#011f38", //タブがないところ
"tab.inactiveBackground": "#011f38", //非アクティブなタブの背景
// "tab.inactiveForeground": "#ec2906", //非アクティブなタブの文字
"tab.border": "#011f38", //タブの横の枠
//------------------ ステータスバー（下） --------------------
"statusBar.background": "#011f38", //背景
"statusBar.foreground": "#7FDBCA", //文字
"statusBar.debuggingBackground": "#011f38", //デバッグしているときの背景
//------------------ターミナル --------------------
"terminal.foreground": "#7FDBCA", // ターミナルの文字
//--------------- エディター内 --------------------
"editor.background": "#011f38", //エディター背景
"editorLineNumber.foreground": "#7FDBCA", //エディタの行番号
"editorCursor.foreground": "#aaeb79", // 文字カーソル
"editor.lineHighlightBorder": "#06eeff2d", // 行カーソルの枠
"editor.lineHighlightBackground": "#002b35d1", // 行カーソルの背景
"editor.findMatchHighlightBackground": "#b7024d3a", // 検索結果の背景
"editor.findMatchHighlightBorder": "#fa026975", //検索結果の背景の周りの線
"editor.findMatchBackground": "#b7024d77", // 検索結果の選択中の背景
"editor.findMatchBorder": "#fa026975", //検索結果の選択中の背景の周りの線
"editor.selectionBackground": "#005669a8", // 選択範囲の背景
"editor.selectionHighlightBackground": "#2d45fc42", // 選択範囲と同じ文字の背景
"editor.selectionHighlightBorder": "#3b6bef", // 選択範囲と同じ文字の周りの線
"editorGroup.border": "#06eeff2d", // グループの線
"editorOverviewRuler.border": "#011f38", // スクロールバーの境界線
"editorError.foreground": "#fc7777", // エラー波線
"editorWarning.foreground": "#ffff00", // 警告波線
"editorInfo.foreground": "#0000ff", // 情報波線
"editorWhitespace.foreground": "#7fdbca94", // 半角スペース
"editorUnicodeHighlight.border": "#fffb009f", // 全角スペースのハイライト枠
//--------------- タイトルバー --------------------
"titleBar.activeBackground": "#011f38", //上のバーの背景
"titleBar.activeForeground": "#7FDBCA", //上のバーの文字
"titleBar.inactiveBackground": "#011f38", //上のバーの背景（非アクティブ）
"titleBar.inactiveForeground": "#7FDBCA", //上のバーの文字（非アクティブ）
//--------------- スクロールバー --------------------
"scrollbarSlider.background": "#002b35d1", // スクロールバー
"scrollbarSlider.activeBackground": "#06eeff2d", // スクロールバー持ったとき
"scrollbarSlider.hoverBackground": "#06eeff2d", // スクロールバーフォーカスしたとき
//--------------- 検索欄 --------------------
"input.background": "#002b35d1", // 検索欄内背景
"editorWidget.background": "#034b2dee", // 検索欄外背景
"input.border": "#06eeff2d", // 検索欄枠
"input.foreground": "#7FDBCA", // 検索欄文字
//--------------- デバッグ コントロール --------------------
"debugToolBar.background": "#011f38", //背景
//--------------- 全体 --------------------
"focusBorder": "#7FDBCA", // フォーカスの枠線
"foreground": "#7FDBCA", // 文字
"errorForeground": "#fc7777", // エラー文字
"widget.shadow": "#7FDBCA", // 窓の枠の影
"selection.background": "#3b6bef", // 選択した文字の背景
"button.background": "#002b35d1", // ボタン背景
"button.border": "#06eeff2d", // ボタン枠
"button.foreground": "#7FDBCA", // ボタン文字
// "button.hoverBackground": "#059e00", // フォーカスしたときのボタン背景
"dropdown.background": "#002b35d1", // ドロップダウン背景
"dropdown.border": "#06eeff2d", // ドロップダウン枠
"dropdown.foreground": "#7FDBCA", // ドロップダウン文字
"list.activeSelectionBackground": "#002b35d1", // アクティブで選択している背景
"list.activeSelectionForeground": "#7FDBCA", // アクティブで選択している背景
"list.inactiveSelectionBackground": "#002b35d1", // 非アクティブで選択している背景
"list.inactiveSelectionForeground": "#7FDBCA", // 非アクティブで選択している文字
"contrastActiveBorder": "#aaeb79", //アクティブ枠
"panel.border": "#ff06062d", //パネル枠
// "editorHoverWidget.background": "#ff0000", // エディタホバーしたときの背景
"editorHoverWidget.border": "#aaeb79", // エディタホバーしたときの枠
"list.hoverBackground": "#011f38" // サイドバーホバーしたときの背景
}
}
ショートカット
以下のファイルに設定します。
C:\Users\ユーザ名\AppData\Roaming\Code\User\keybindings.json
keybindings.json
[
//------------------ エディター--------------------
// "ctrl+g" //行移動
// "ctrl+enter" //行を挿入
// "ctrl+d" //単語を選択する
// "ctrl+bs" //カーソル位置より左側の単語を削除
// "ctrl+Del" //カーソル位置より右側の単語を削除
// "Alt+左クリック" //好きな場所にカーソルの追加
// "Alt+shift+ドラッグ" //矩形選択
// "ctrl+." //クイックフィックスを開く
// "ctrl+space" //候補の表示
// "ctrl+f2" //一致するすべてを選択
// "alt+gUp/PgDn" //カーソル位置はそのままでPageUp/PageDown
// "alt+←→" //進む戻る
// "ctrl+l+" //行選択
// "alt+↑↓" //行移動
// "alt+shift+↑↓" //行複製
// "ctrl+alt+↑↓" //カーソル増やす
{
"key": "alt+up", // カーソル位置はそのままで上下
"command": "editorScroll",
"args": {
"to": "up",
"by": "line",
"revealCursor": false
},
"when": "editorTextFocus"
},
{
"key": "alt+down", // カーソル位置はそのままで上下
"command": "editorScroll",
"args": {
"to": "down",
"by": "line",
"revealCursor": false
},
"when": "editorTextFocus"
},
{
"key": "ctrl+up", // カーソル飛び移動
"command": "cursorMove",
"args": {
"to": "up",
"by": "line",
"value": 10
},
"when": "editorTextFocus"
},
{
"key": "ctrl+down", // カーソル飛び移動
"command": "cursorMove",
"args": {
"to": "down",
"by": "line",
"value": 10
},
"when": "editorTextFocus"
},
{
"key": "alt+a", // 括弧内の文字列を選択する
"command": "editor.action.selectToBracket",
"args": {
// true：括弧を含む
// false：括弧を含まない
"selectBrackets": false
},
"when": "editorTextFocus"
},
{
"key": "ctrl+u", // 定義に移動
"command": "editor.action.goToDeclaration",
"when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
},
{
"key": "ctrl+shift+u", // 次のエラーと警告に移動
"command": "editor.action.marker.next",
"when": "editorFocus"
},
{
"key": "ctrl+e", // ファイルをエクスプローラーで開く
"command": "revealFileInOS",
"when": "editorFocus"
},
{
"key": "ctrl+o", // アクティブなファイルと選択されたファイルを比較
"command": "workbench.files.action.compareFileWith",
"when": "activeEditor"
},
{
"key": "ctrl+shift+o", // 未保存の変更箇所を確認
"command": "workbench.files.action.compareWithSaved",
"when": "activeEditor"
},
{
"key": "shift+alt+up", // 矩形選択
"command": "cursorColumnSelectUp",
"when": "textInputFocus"
},
{
"key": "ctrl+shift+alt+up", // 矩形選択デフォルト解除
"command": "-cursorColumnSelectUp",
"when": "textInputFocus"
},
{
"key": "shift+alt+down", // 矩形選択
"command": "cursorColumnSelectDown",
"when": "textInputFocus"
},
{
"key": "ctrl+shift+alt+down", // 矩形選択デフォルト解除
"command": "-cursorColumnSelectDown",
"when": "textInputFocus"
},
{
"key": "shift+alt+left", // 矩形選択
"command": "cursorColumnSelectLeft",
"when": "textInputFocus"
},
{
"key": "ctrl+shift+alt+left", // 矩形選択デフォルト解除
"command": "-cursorColumnSelectLeft",
"when": "textInputFocus"
},
{
"key": "shift+alt+right", // 矩形選択
"command": "cursorColumnSelectRight",
"when": "textInputFocus"
},
{
"key": "ctrl+shift+alt+right", // 矩形選択デフォルト解除
"command": "-cursorColumnSelectRight",
"when": "textInputFocus"
},
//------------------ タブ--------------------
// "ctrl+shift+p" //コマンドパレットを開く
// "ctrl+shit+t" //最近閉じたファイルを開く
{
"key": "ctrl+shift+w", // すべてのタブを閉じる
"command": "workbench.action.closeAllEditors",
"when": "editorTextFocus"
},
{
"key": "ctrl+l", // 右タブに移動
"command": "workbench.action.nextEditor",
"when": "editorTextFocus"
},
{
"key": "ctrl+j", // 左タブに移動
"command": "workbench.action.previousEditor",
"when": "editorTextFocus"
},
{
"key": "ctrl+shift+l", // タブを右に移動
"command": "workbench.action.moveEditorToNextGroup"
},
{
"key": "ctrl+shift+j", // タブを左に移動
"command": "workbench.action.moveEditorToPreviousGroup"
},
{
"key": "ctrl+k", //ファイルを開く
"command": "workbench.action.quickOpen"
},
{
"key": "ctrl+shift+k", // タブ表示されているファイルの一覧を表示
"command": "workbench.action.showAllEditors"
},
{
"key": "ctrl+g", // 1つ目のエディタグループにフォーカス
"command": "workbench.action.focusFirstEditorGroup"
},
{
"key": "ctrl+h", // 2つ目のエディタグループにフォーカス
"command": "workbench.action.focusSecondEditorGroup"
},
{
"key": "ctrl+\\", // ピン留めする
"command": "workbench.action.pinEditor",
"when": "editorFocus"
},
{
"key": "ctrl+shift+oem_5", // ピン留めはずす
"command": "workbench.action.unpinEditor",
"when": "editorFocus"
},
// {
// "key": "ctrl+k ctrl+v", // 開いているファイルを分割
// "command": "workbench.action.splitEditor",
// "when": "editorFocus"
// },
// {
// "key": "ctrl+tab", // エディタグループ内でのアクティブエディタの切り替え
// "command": "workbench.action.nextEditorInGroup"
// },
// {
// "key": "ctrl+shift+tab",
// "command": "workbench.action.previousEditorInGroup"
// },
// {
// "key": "ctrl+j", // 分割エディタの作成 (左)
// "command": "workbench.action.splitEditorLeft",
// "when": "editorFocus"
// },
// {
// "key": "ctrl+l", // 分割エディタの作成 (右)
// "command": "workbench.action.splitEditorRight",
// "when": "editorFocus"
// },
//------------------ メニュー--------------------
// "ctrl+shift+f" //検索
// "Ctrl+shift+m" //問題ビュー
// "Ctrl+q" //ターミナルなど一覧表示
{
"key": "ctrl+i", // フォルダにフォーカス
"command": "workbench.explorer.fileView.focus"
},
{
"key": "ctrl+shift+i", // アウトラインビューにフォーカス
"command": "outline.focus"
},
{
"key": "ctrl+b", // サイドバー開閉
"command": "workbench.action.toggleSidebarVisibility"
},
{
"key": "ctrl+m", // パネル開閉
"command": "workbench.action.togglePanel"
},
{
"key": "ctrl+shift+b", // ターミナル
"command": "workbench.action.terminal.toggleTerminal"
},
//------------------ エクスプローラー--------------------
{
"key": "ctrl+n", // ファイルを作成
"command": "explorer.newFile",
"when": "filesExplorerFocus"
},
{
"key": "ctrl+shift+n", // フォルダを作成
"command": "explorer.newFolder",
"when": "filesExplorerFocus"
}
]
スニペット
以下のファイルに設定します。
C:\Users\ユーザ名\AppData\Roaming\Code\User\snippets\global.code-snippets
global.code-snippets
{
"Console log": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "c",
"body": [
"console.log(\"$1\");"
],
"description": "デバッグ"
},
"Console log all": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "co",
"body": [
"console.log(\"Name:\", \"$1\", \"Type:\", typeof $1, \"Value:\", $1);"
],
"description": "変数名を詳しく知る用"
},
"System.out.println": {
"scope": "java",
"prefix": "s",
"body": [
"System.out.println(\"$1\");"
],
"description": "デバッグ"
},
"System.out.println all": {
"scope": "java",
"prefix": "sy",
"body": [
"System.out.println(\"Name:\", \"$1\", \"Value:\", $1);"
],
"description": "変数名を詳しく知る用"
}
}
拡張機能
以下の拡張機能がお気に入りです。
https://marketplace.visualstudio.com/items?itemName=DavidLGoldberg.jumpy2
https://marketplace.visualstudio.com/items?itemName=sandcastle.vscode-open
https://marketplace.visualstudio.com/items?itemName=shalldie.background
https://marketplace.visualstudio.com/items?itemName=BrandonKirbyson.vscode-animations
その他
コマンドパレットで「case」と入力…文字のケースを変更できる
参考
https://zenn.dev/takuya/articles/4472285edbc132
https://zenn.dev/aose/articles/6188f61a6a2a25
https://code.visualstudio.com/api/references/theme-color
https://qiita.com/shopi_47/items/9916447e47848127b9d5
https://atmarkit.itmedia.co.jp/ait/articles/1709/15/news027.html