This page looks best with JavaScript enabled
⚠️

【VSCode】最低限の設定（settings.json, 拡張機能）

 ·   ·  ☕ 5 分で読めます
✏️

VSCodeを使うときに最低限しておくと便利な設定をまとめました。
最初はsettings.jsonだけでしたが、この記事だけで最低限がまかなえるといいなと思ったので、拡張機能についても言及します。
バージョン: 1.54.3

（9/6追記）1.60.0 から、デフォルトでbracketPairColorizationを設定できるようになりました。

設定方法

ヘッダーの「Code」→「基本設定」→「設定」でGUIが開くので、ぽちぽち設定を適用することもできます。
その設定をjson形式にしたものがsettings.jsonです。

image
貼り付けた画像_2021_04_09_9_17

command + shift + pで開くコマンドパレットでsettings.jsonを入力することで、直接settings.jsonの編集画面を開くこともできます。

貼り付けた画像_2021_04_09_9_19

settings.json

特に設定の意味を把握しなくてもいいならこれをそのままコピペしてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

{
  "workbench.editor.enablePreview": false,
  "workbench.editor.enablePreviewFromQuickOpen": false,
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontSize": 13,
  "editor.rulers": [80, 100],
  "editor.tabSize": 2,
  "editor.renderWhitespace": "all",
  "editor.renderControlCharacters": true,
  "editor.acceptSuggestionOnEnter": "off",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "window.zoomLevel": 0,
  "terminal.integrated.scrollback": 10000,
}

“workbench.editor.enablePreview”, “workbench.editor.enablePreviewFromQuickOpen”

ファイルを開いたときにプレビューモードで開く設定。デフォルトではtrueになっているのでfalseにする。
左側のファイルから新しくファイルを開いたとき、そのタブはデフォルトではプレビューモードになっています。なので、その後に編集作業を行わないとプレビューモードが解除されません。
プレビューモードのタブを開いた状態で、さらにファイルを開くと、現在開いていたタブが上書きされてしまうのでfalseにしておくと楽です。

"workbench.editor.enablePreviewFromQuickOpen"の方は、command + pからファイルを開いたときの同様の設定。

VS Codeでファイルを常に新しいエディタに開くには：Visual Studio Code TIPS - ＠IT

“workbench.iconTheme”

これは必須というわけではないけど、デフォルトはとにかく見づらいので何かしらお好みで設定することをおすすめします。
Material Icon Themeは拡張機能から入れられます。

image → image

VS Codeのファイルアイコンを変更するには：Visual Studio Code TIPS - ＠IT

“editor.fontSize”

言うまでもなくフォントのサイズです。お好みで調整してください。
職場で20くらいのクソデカサイズでコードを書いている人がいて、さすがに笑いました。

“editor.rulers”

エディタの縦ラインです。例えば、[80, 100]だと、80文字、100文字のラインで境界線が表示されるので、長すぎメソッドを防止する目安になります。
lintによっては1行の文字数に制限を掛けていたりするので、事前に確認できます。

image

“editor.tabSize”

1タブあたりのスペースのサイズを設定します。
デフォルトだと4スペースですが、（言語にもよるが）2スペースが主流なので2にしておくといいです。

他の人の4マス設定につられてしまう、という場合は"editor.detectIndentation": falseも追加するとよさそうです。

“editor.renderWhitespace”

半角空白を･で表示します。これはまじで全員入れてくれ。"all"か"boundary"かはお好みで。
ちなみに、拡張機能zenkakuを入れるととても幸せになれます。

VS Code でドキュメントの空白文字を見やすくしてみる - Qiita
VS Codeで空白文字を一目で分かるように表示するには：Visual Studio Code TIPS - ＠IT

“editor.renderControlCharacters”

たまにマークダウンに入り込んでくる制御文字（�）が表示されるようにする。

“editor.formatOnPaste”, “editor.formatOnSave”

ペースト時、保存時にそれぞれ自動的にフォーマッタを適用してくれる設定。フォーマッタ自体は拡張機能などでインストールする必要があります。
ものによってはうざい場合もあるのでお好みで。

“editor.minimap.enabled”

ミニマップ（画像右側）の表示の設定。
これは好みですが、私はモニターを使っていなかった頃に作業スペースを広げるために非表示にして、特に不便がなかったので今も非表示です。

image

“editor.acceptSuggestionOnEnter”

デフォルトだと、エンター時に入力補完のサジェストが選択されてしまいます。
image

この設定を"off"にすると、エンター時にただのエンター扱いにしてくれます。
補完を使いたいときは、エンターの代わりにTabキーを押すといいです。

“editor.bracketPairColorization.enabled”

もともと拡張機能だったBracket Pair Colorizerの機能がデフォルトで設定できるようになった。

“files.insertFinalNewline”

保存時に、ファイルの最後に空行を入れる設定。

こう image じゃなくて image

“files.trimFinalNewlines”

保存時に、ファイルの最後に不要な空行があったら自動で削除する設定。

こう image じゃなくて image

“files.trimTrailingWhitespace”

保存時に、行の最後に空白文字があったら自動で削除する設定。

filesの3点セットは設定しておいて間違いない。

“window.zoomLevel”

画面全体のズームレベルです。
まあこだわりがなければ0でいいんじゃなかろうか。お好みで設定してください。

“terminal.integrated.scrollback”

ターミナルの最大行バッファの設定。デフォルトでは1000行らしい。
私はVSCodeのターミナルをメインで使っているので、多めに設定しています。インストールなどでログが流れてしまうことがあるので。

拡張機能

「最低限」なので、初学時点で使うレベルのものに絞ります。

Bracket Pair Colorizer

かっこをペアにしてくれる。Rubyだとそこまで恩恵を感じないが、JSとかだと捗りまくる。
image

（追記）デフォルト設定から適用できるようになった。

indent-rainbow

インデントをカラフルにしてくれる。これがないと私は発狂する。
image

zenkaku

これを使わずにコードの中に全角空白を紛れ込ませている人は人生を無駄にしすぎ。
全角空白を灰色で表示してくれます。
image

GitLens

チーム開発する人はもれなく入れておくと捗る。
git blameの上位互換かつGitHub連携が可能なので、そのときのPRに飛ぶこともできる。
image

言語系各種

自分もこの辺りを使いこなせてはいないんだけど。

その他

以前紹介しようと思ったけど公開する機会のなかった、おすすめのVSCode拡張機能。一部重複あり。
https://speakerdeck.com/aiandrox/recommended-vscode-extension

Share on
END
END
@aiandrox
 
目次