VSCodeの開発設定2023(全般, settings.json)

Tips
2023.10.14

前置き

あと3ヵ月切ってますが、現在私がプライベートで利用している開発エディタであるVSCodeの設定とか拡張機能を公開していきたいと思います。

項目が多いので複数回に分ける予定です。

追記：「Night Owl」に関する設定を追加しました。

追記２：「editor.acceptSuggestionOnCommitCharacter」をfalseにする記述を追記しました。

概要

こだわり派なので、プライベート用ですが仕事とほぼ同じでチーム開発も可能な構成にしています。つまり統一すべき設定をワークスペースに記述して、Gitリポジトリで管理できるようにすることで他の環境から同じ設定を扱えるようにしています。

基本的にはLinter(静的解析)やFormatter(自動フォーマット)を共通設定で記述して、入力補完や便利設定のようなものは共有せずにユーザー設定に書いています。

まずは全般編ということで、システムによらず頻度高く扱う要素を紹介します。DevOps門下生なのでモダンさをある程度意識しています。

前提

設定はGitによりある程度強制的に利かせれますが、拡張機能は「推奨」するのみに留まるので、紹介的にはCLIを付記して簡単にインストール可能なようにしています。

ユーザー設定

ユーザー設定はユーザーごとのデータ領域（Windowsであれば「C:\Users\{ユーザー名}\AppData\Roaming\Code\User\settings.json」）に保存される「settings.json」に書かれる設定です。拡張機能の設定もいくつか書かれていますが、拡張機能の詳細は別記事に記述します。

拡張機能を入れていない場合は半透明になって無効化されるだけで、エラーにはなりませんのでご安心ください。

{
  /* 統一の必要が無く、個人の好みレベルとなる設定 */
  "editor.minimap.enabled": false,
  "explorer.incrementalNaming": "smart",
  /* 統一の必要が無いが、オススメとなる設定 */
  "workbench.startupEditor": "none",
  "workbench.colorTheme": "Night Owl (No Italics)", // Extension: Night Owl
  "files.autoSave": "off",
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "editor.dragAndDrop": false,
  "editor.showFoldingControls": "always",
  "editor.renderWhitespace": "boundary",
  "editor.rulers": [
    119
  ],
  "editor.renderControlCharacters": true,
  "editor.acceptSuggestionOnCommitCharacter": false,
  "editor.copyWithSyntaxHighlighting": false,
  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?　、。！？「」【】『』（）",
  "editor.suggest.showKeywords": false,
  "editor.suggest.showWords": false,
  "search.showLineNumbers": true,
  "editor.suggestSelection": "first",
  // Extension: IntelliCode(これによってsuggestSelectionが編集される可能性があるので明示しておく)
  "vsintellicode.modify.editor.suggestSelection": "enabled",
  // Extension: Code Spell Checker
  "cSpell.userWords": [
    "azuretools",
    "dockercompose",
    "dont",
    "vsicons",
    "intelli",
    "vsintellicode"
  ],
  // Extension: Material Icon Theme
  "workbench.iconTheme": "material-icon-theme",
  /* 統一したほうが良い設定(可能な限りプロジェクトのWorkspaceでも設定する) */
  "extensions.ignoreRecommendations": false,
  "editor.formatOnSave": true,
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "files.eol": "\n",
  "files.encoding": "utf8",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "[markdown]": {
    "editor.tabSize": 3,
    "files.trimTrailingWhitespace": false,
    "editor.defaultFormatter": "vscode.markdown-language-features",
  },
  // Extension: Markdown All in One
  "markdown.extension.list.indentationSize": "inherit",
  "markdown.extension.toc.levels": "2..6",
  "markdown.extension.theming.decoration.renderTrailingSpace": true,
  "markdown.extension.toc.slugifyMode": "github",
  // Extension: markdownlint
  "markdownlint.config": {
    "MD007": {
      "indent": 3
    },
    "MD033": false // インラインHTMLの制限を解除
  },
  "[json][jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features",
  },
  "[yaml]": {
    "editor.defaultFormatter": "redhat.vscode-yaml", // Extension: YAML
  },
  "yaml.format.printWidth": 119,
  "yaml.format.singleQuote": true,
  "redhat.telemetry.enabled": false,
  "[dockerfile][dockercompose]": {
    "editor.defaultFormatter": "ms-azuretools.vscode-docker", // Extension: Docker
  },
  "[log]": {
    "editor.formatOnSave": false,
  },
  "[csv]": {
    "editor.formatOnSave": false,
  },
}

解説

分類としては、「個人の好みな設定」「オススメ設定」「統一すべき設定」になります。

個人の好みな設定

人によって変わる可能性が大いにある設定項目です。一応、私の見解を書いています。

editor.minimap.enabled

falseにしてミニマップを非表示にしています。私はほぼミニマップを使わなかったのでスペース確保のため非表示にしました。

explorer.incrementalNaming

smartは、ワークスペース内で重複した名前のファイルがあった場合に連番を付けるようにする設定です。日付データなどを扱う場合は逆に混乱する可能性もありますが、まず手動でそういうことすることが無いと思ったのでsmartに変更しました。

ちなみにデフォルトだと「〇〇 copy.txt」みたいになります。

オススメ設定

基本的にはここに書いてあるようにするのがオススメとなる設定項目です。主に効率化や利便性向上に繋がる項目で、静的解析や自動フォーマットに関わる設定ではないので最終的には好みです。

workbench.startupEditor

noneにしてエディタ無しで開始するようにしています。基本的には前回の復元、エクスプローラから開く、CLIから開く の3択なのでこれが使い勝手が良いです。

workbench.colorTheme

拡張機能「Night Owl」に関する設定です。カラーテーマをカスタムしてNight Owlを指定しています。

Night Owlは目に優しく、色覚異常でも問題無く見えるという点からアクセシビリティに優れています。あくまでカラーテーマでいくらでも変えれることから、使ってみるだけ使ってみててみると良いでしょう。

個人的にはイタリック調が無いほうが日本語が読みやすいのでNo Italicsモードにしています。

files.autoSave

offにして勝手にファイルを保存しないようにしています。事故防止。

editor.formatOnPaste, editor.formatOnType

両方ともfalseにして、貼り付け時やタイピング時に意図せぬ動作をしないようにしています。

editor.dragAndDrop

ドラッグで文字移動するうま味より、事故るほうが遥かに多いのでfalseにしています。

editor.showFoldingControls

インデント等を折りたたむアイコンを非表示にする意味は無いので常に表示するalwaysにしています。

editor.renderWhitespace

boundaryにすることで単語間の単一スペースを除く、スペースを薄めの中点･で表すようにしています。強すぎない表現でスペースがいくつ入っているかが分かって便利です。

editor.rulers

半角で119文字目に目安の線を引いています。GitHubやGitLabが折り返されるのが119文字になっているので数値を119にしています。後述されるLinterやFormatterもこの基準に合わせています。

editor.renderControlCharacters

trueにして制御文字を表示するようにしています。万が一制御文字が入り込むとバグの原因になったりするので見えて損はないかと。

editor.copyWithSyntaxHighlighting

falseにしてコピペする時に、書式設定をコピーしないようにしています。書式設定が欲しい時よりも邪魔な時の方が多いので。

editor.wordSeparators

ctrl移動やダブルクリックによって移動・選択される区切り文字に全角系の要素を追加しています。

これはネットにいくつか同じ例が存在していますが、日本人的には便利でいいですね。

editor.suggest.showKeywords, editor.suggest.showWords

両方ともfalseにして、入力補完にキーワードやテキストが表示されないようにしています。

他の開発利便性向上系入力補完の邪魔になりがちなので、OFFが良いでしょう。

search.showLineNumbers

trueにして検索結果に行数を表示しています。無いよりある方が便利です。

editor.suggestSelection

firstはデフォルト設定ですが、拡張機能のIntelliCodeによって変更されることがあります。明示的に書くメリットはsettings.jsonが整理整頓される点のみです。

vsintellicode.modify.editor.suggestSelection

拡張機能「IntelliCode」の設定です。enabledはデフォルト設定ですが、これも明示的に書いておいてsettings.jsonの乱れを防ぎます。IntelliCode自体はJavaScript系, Java, Python, T-SQLの入力補完機能があります。

cSpell.userWords

拡張機能「Code Spell Checker」の設定です。固有名詞などを登録しておくことで、その単語が除外可能になります。Linterに近いですが、全般で除外設定は

ユーザー設定にやたらめったら登録するとあとで困るので、上記は全般編のsettings.jsonで登場する最低限を書いています。今後の各言語編で追加されることもあるでしょう。

workbench.iconTheme

アイコンテーマを設定する項目です。最も普及している「Material Icon Theme」の拡張機能を設定しています。

統一すべき設定

静的解析や自動フォーマットに関わってくる設定が多めです。だいたいはワークスペースのほうのsettings.jsonで書くべきですが、野良ファイルにも有効なのでユーザー設定にも書いてよいでしょう。

ただチーム開発などの時はワークスペースのsettings.jsonをちゃんとしないと、コミット時の差分等が荒れますので注意。

extensions.ignoreRecommendations

falseにして拡張機能の「推奨」を受け取らないようにしない設定とする。

editor.formatOnSave

trueにしてファイル保存時にフォーマット機能を動かすようにしています。フォーマットしたくないファイルは後程個別で設定。

editor.insertSpaces

Tabキーを押したらスペースに変換されます。EditorConfigという拡張機能にも関わります。要は統一されていれば良いので、組織でfalseに統一しても良いです。golangなどのベストプラクティスでタブのインデントが採用されている場合などもあるので、そういったものは言語別設定でfalseにしましょう。

editor.tabSize

デフォルトのインデントサイズを2に設定します。私がWeb屋なのもありますが、どのプロジェクトにも登場しがちなJSONやYAMLもインデントサイズ2を基準とすることが多いので2がおすすめです。EditorConfigという拡張機能にも関わります。

files.eol

改行コードをLFにしています。ExcelファイルなどをWindowsで扱う場合などを除いてCRLFにするメリットは殆ど無いのでLFをデフォルトにしています。EditorConfigという拡張機能にも関わります。

files.encoding

文字のエンコードをUTF-8にしています。改行コードと同じでShiftJISはデメリットが目立つのでデフォルトはUTF-8が良いでしょう。EditorConfigという拡張機能にも関わりますが、この設定に関してはEditorConfigに書いてもVSCodeでは現在非対応になります。

files.trimTrailingWhitespace

行末に空白がある場合にファイルを保存すると空白を削除します。基本的には行末の空白が無駄なのでデフォルトをtrueにしますが、Markdownなど一部のファイルでは行末の空白に意味が生まれるので言語別でfalseにしたりもします。

files.insertFinalNewline, files.trimFinalNewlines

両方trueにすることで、ファイルの末尾に1行のみ空白行があるかたちで固定します。これはUNIXのインターフェースであるPOSIXで必要な措置になります。影響としてはGitHubなどでDiffエラーが出たりします。

[markdown]

Markdownは3つの言語別設定を行っています。

  • インデントは半角スペース3つ：GitHubやGitLabでのリスト等基準
  • 行末の半角スペースを削除しない：行末に半角スペース2つで改行の意味を持つため
  • Formatterを”vscode.markdown-language-features”に設定

Markdon All in One の設定

Markdownに関する拡張機能の設定です。

  • インデントサイズはデフォルト設定を継承
    する(つまり3になる)
  • 自動生成の目次(TOC)は見出し2~6で作成：タイトルを目次化しない
  • 行末の空白をグレー色で表示：空白をより分かりやすく(ワークスペースだと使えない)
  • 見出しリンクの生成をGitHub基準に：README.mdのため

markdownlint の設定

Markdownに関する拡張機能の設定です。

  • MD007のLintをインデント3で判断：他の設定に合わせる
  • MD033のLintをOFF：インラインHTMLを結構使うため

[json][jsonc]

JSON及びJSON with Commentsには1つの言語別設定を行っています。

  • Formetterを”vscode.json-language-features”に設定

[yaml]

YAMLには2つの言語別設定を行っています。

  • Formetterを”redhat.vscode-yaml”に設定(要拡張機能)

YAML の設定

YAML に関する拡張機能の設定です。

  • Formatterの幅を119文字で利くように：GitHubやGitLabへの対応
  • 文字列を囲うのはシングルクォート：ちょっと好みは入っているが
  • テレメトリの拒否：trueでもいいですが、書いてないとポップアップで聞かれるので明示

[dockerfile][dockercompose]

Docker関連のファイルにおける言語別設定です。

  • Formetterを”ms-azuretools.vscode-docker”に設定(要拡張機能)

[log]

logファイルにおける言語別設定です。

  • ファイル保存でフォーマットしない：基本的にログは人が手を加えないため

[csv]

CSVファイルにおける言語別設定です。

  • ファイル保存でフォーマットしない：基本的にCSVは人が人力で手を加える事が少ないため

ワークスペースの設定

基本的には、ユーザー設定のうち「統一すべき設定」を書いています。

{
  "extensions.ignoreRecommendations": false,
  "editor.formatOnSave": true,
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "files.eol": "\n",
  "files.encoding": "utf8",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "[markdown]": {
    "editor.tabSize": 3,
    "files.trimTrailingWhitespace": false,
    "editor.defaultFormatter": "vscode.markdown-language-features",
  },
  // Extension: Markdown All in One
  "markdown.extension.list.indentationSize": "inherit",
  "markdown.extension.toc.levels": "2..6",
  "markdown.extension.toc.slugifyMode": "github",
  // Extension: markdownlint
  "markdownlint.config": {
    "MD007": {
      "indent": 3
    },
    "MD033": false // インラインHTMLの制限を解除
  },
  "[json][jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features",
  },
  "[yaml]": {
    "editor.defaultFormatter": "redhat.vscode-yaml", // Extension: YAML
  },
  "yaml.format.printWidth": 119,
  "yaml.format.singleQuote": true,
  "[dockerfile][dockercompose]": {
    "editor.defaultFormatter": "ms-azuretools.vscode-docker", // Extension: Docker
  },
  "[log]": {
    "editor.formatOnSave": false,
  },
  "[csv]": {
    "editor.formatOnSave": false,
  },
}

最後に

全部説明書いたら大分長くなりましたが、全般的な設定はこんな感じです。

次回は全般的な拡張機能について更新します。

スポンサーリンク
タイトルとURLをコピーしました