VSCodeでプロジェクトの設定ファイルを準備する

Visual Studio Code（以下、vscode）の設定には、「ユーザー設定」と「ワークスペース設定」の2種類が存在している

ユーザー設定は、その人個人の設定を設けることができ、
ワークスペース設定は、ワークスペース毎の設定を設けることができる

ワークスペース設定の利用ケースとしては、プロジェクトに参加した人全員に同じ設定を施したい場合で有効です
また、優先度が存在しており、「ユーザー設定」より「ワークスペース設定」の方が優先される

ここでは、ワークスペース設定のやり方のみを記載します

wsl(ubuntu)の利用を想定し、プロジェクトをワークスペースで展開している状態とします

---

設定ファイルの作成

mkdir .vscode
touch .vscode/extensions.json
touch .vscode/settings.json

簡単な説明

• .vscode/extensions.json
  • ワークスペースで推奨したい拡張機能を記載
• .vscode/settings.json
  • vscodeそのものの設定を記載

---

extensions.jsonの記入例

{
    "recommendations": [
        "hookyqr.beautify", // beautifyを推奨する場合
        "emmanuelbeziat.vscode-great-icons" // iconを変更
        "chihiro718.whitespacepp" // 改行などをsakura editar 風に表示
        "mhutchie.git-graph" // gitを見やすく
    ]
}

ちなみに、記載する名前は、各拡張機能のページのここに載っています

---

settings.jsonの記入例

{
  // エディター上での空白文字の表示方法
  "editor.renderWhitespace": "all",
  // フォントを設定
  "editor.fontFamily": "'MS Gothic' , 'Fira Code', Hasklig, Consolas, 'Courier New', monospace",
  // フォントサイズを変更
  "editor.fontSize": 14,
  // 選択行の行番号をハイライトする
  "editor.renderLineHighlight": "all",
  // 列に選を表示
  "editor.rulers": [40, 80, 120],
  // 1つのタブに相当する半角スペースの数
  "editor.tabSize": 2,
  // 括弧の対応を色付ける
  "editor.bracketPairColorization.enabled": true,
  // 制御文字を表示する
  "editor.renderControlCharacters": true,

  // ファイル保存時に最終行以降の空行を削除
  "files.trimFinalNewlines": true,
  // ファイル保存時に各行の末尾にある半角スペースを削除
  "files.trimTrailingWhitespace": true,
  // 検索ビューの検索結果に行数を併記
  "search.showLineNumbers": true,
  // ファイルアイコンテーマ
  "workbench.iconTheme": "vscode-great-icons",
  // Emmet の候補を表示
  "emmet.showSuggestionsAsSnippets": true,
  // TAB キーで Emmet を展開
  "emmet.triggerExpansionOnTab": true,
  // emmetで自動補完
  "emmet.variables": {
    "lang": "ja"
  },

  //配色を設定
  "workbench.colorCustomizations": {
    // ホバー時のリスト/ツリーの背景
    "list.hoverBackground": "#474747",
    //アクティビティバーの背景色
    "activityBar.border": "#ffffff",
  }
}