こんにちは！VSCodeの設定項目が多すぎてびびっているMizutani(@sirycity)です。設定いじってるだけで休日が終わりそう。

今日はそんなVSCodeの設定ファイル、settings.jsonの個人的な設定を公開します。よかったら参考に？してね。

結論

設定ファイルを作って…↓

mkdir.vscode
touch.vscode / settings.json

そのあとsettings.jsonにこれをコピペ。

{
  // UIの非表示
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,
  "editor.minimap.enabled": false,
  "editor.renderIndentGuides": false,
  "workbench.statusBar.visible": false,

  // UIの細かい変更
  "editor.glyphMargin": false,
  "editor.folding": false,
  "workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#222",
    "editorLineNumber.foreground": "#1e1e1e",
    "editorLineNumber.activeForeground": "#555"
  },

  // lint系に関する設定
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "css.validate": false,
  "stylelint.enable": true,
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // その他
  "editor.emptySelectionClipboard": false,
  "editor.renderControlCharacters": true,
  "editor.tabSize": 2,
  "workbench.editor.enablePreview": false,
  "workbench.iconTheme": "material-icon-theme",
  "files.exclude": {}
}

解説

UIの非表示

上に出てくるパンくずを非表示。あんまり見ないので。

"breadcrumbs.enabled": false,

CodeLensを非表示。あんまり使わないので。

"editor.codeLens": false,

右に出てくるミニマップを非表示。ほとんど見ないので。

"editor.minimap.enabled": false,

インデントの目安を非表示。これはたまに有用だけど、prettierが自動成形してくれるからいいや。

"editor.renderIndentGuides": false,

下に出てくるステータスバーを非表示。あんまり使わないしデフォルトだと彩度が高くて誘目されちゃう。

"workbench.statusBar.visible": false,

UIの細かい変更

ブレークポイントが表示されるスペースを非表示。ほとんど使わないので。

"editor.glyphMargin": false,

コード折りたたみが表示されるスペースを非表示。ほとんど使わないので。

"editor.folding": false,

アクティブじゃない行の行番号を非表示＆アクティブな行の番号とハイライトも控えめに。行番号はエラーの時くらいしか見ないので。ここの色はテーマによって要調整。以下はデフォルトのダークテーマの例。

"workbench.colorCustomizations": {
  "editor.lineHighlightBackground": "#222",
  "editorLineNumber.foreground": "#1e1e1e",
  "editorLineNumber.activeForeground": "#555"
},

lint系に関する設定

ESLintの対象を設定。

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
],

VSCodeのデフォルトで入っているCSSlinterを無効。PostCSSに非対応なので。そのかわりCSSlinterにstylelintを使用。

"css.validate": false,
"stylelint.enable": true,

セーブするごとに成形。ただしmarkdownファイルは成形しない。markdownの規格が日本語と相性悪いので。

"editor.formatOnSave": true,
"[markdown]": {
  "editor.formatOnSave": false
},

セーブするごとにimportを五十音順に並べ替え。prettierに同等の機能がないので。(なんでないんだろ？)

"editor.codeActionsOnSave": {
  "source.organizeImports": true
},

デフォルトのコードフォーマッターをprettierに設定。

"editor.defaultFormatter": "esbenp.prettier-vscode",

その他

無をコピーできなくする。具体的にはpasteする時に間違えてcopyしても無効にする。これめっちゃ役立つ。

"editor.emptySelectionClipboard": false,

特殊文字を表示。ひし形にクエスチョンマークみたいなやつ。

"editor.renderControlCharacters": true,

2タブ。

"editor.tabSize": 2,

ファイル1を開いて何も編集せずにファイル2を開くと最初のファイル1が勝手に閉じる機能を無効。説明がむずい。

"workbench.editor.enablePreview": false,

フロントエンドに向いてるっぽいアイコンテーマを使用。これ入れておくと.eslintrc.jsみたいなフロントエンド特有のファイルにアイコンが付いてわかりやすい。同じようなアイコンテーマは結構あるけどこれ使ってる人が多いので。

"workbench.iconTheme": "material-icon-theme",

VSCodeに表示しないファイルたちを指定。これは.gitignoreとは別ね。.envとかはgitignoreの対象にはなるけど画面には表示したいからここには指定しない。逆にnode_modulesとかは見る機会ないから指定してもいいと思う。

"files.exclude": {}

設定してないけど他の人がよく使ってるオプション

空白文字を表示。全角スペースとかが見つけやすくなる。僕は視認性の悪化が気になって入れてないですが、入れてる人もかなり多いです。

"editor.renderWhitespace": "all",

80行の地点に縦線が入るやつ。長すぎるコードの目安になります。僕はprettierに頼ってるので入れてないです。

"editor.rulers": [80],

ファイルの末尾の空白を成形する設定たち。特に必要な場面に出くわしたことは無いんですが、これ入れてる人多いので入れようか迷い中。

"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,

ちなみに

settings.jsonは普通にコメントが書けます。厳密にはjsonじゃないみたいです(よく分かってない)

VSCodeはほんっっとに設定が多いので業務そっちのけで沼らないようにしましょう(自分への戒め)。また増えたら追記していきます！以上。