なぜ今さらこんな記事？
つい先日、新しくMacBook Proを買いました。(その3日後に2018年モデルが出ました(泣))
PCのセットアップついでに、今メインで使っているエディタのvscodeの設定を見直してみることにしました。
正直なとこ、「vscode おすすめ 設定」とかでググれば大量の記事を見つけることができます。
ですので、この記事の目的は「おすすめの設定を紹介すること」ではなく、「自分の設定を晒して、設定について情報交換をする」ことです。
みなさん自分のこだわり設定があると思いますので、ぜひコメントなどで「自分の設定自慢」をして頂けると記事のアップデートにも繋がるので筆者が喜びます。
…というのが表向きの目的で、裏目的は最近僕の周辺でにわかにvscodeが流行ってきているので、その布教・共有用だったりします。
settings.json晒してみる
まず最初に僕のsettings.jsonをペタッと貼ってみたいと思います。
基本設定→言語固有設定→拡張機能の設定の順にグルーピングしてます。
また、各グループの中はできるだけアルファベット順に並ぶようにしてます。(たまに変なとこに追加して忘れる)
なお、筆者は普段javascript/Typescriptを書くことが多いので、それら2つに寄せた設定になっています。
{
// ================
// general settings
// ================
"debug.inlineValues": true,
"debug.internalConsoleOptions": "openOnSessionStart",
"debug.openDebug": "openOnSessionStart",
"debug.toolBarLocation": "docked",
"editor.acceptSuggestionOnCommitCharacter": true,
"editor.cursorBlinking": "phase",
"editor.dragAndDrop": false,
"editor.find.autoFindInSelection": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.lineNumbers": "interval",
"editor.minimap.maxColumn": 40,
"editor.minimap.showSlider": "always",
"editor.renderControlCharacters": true,
"editor.renderLineHighlight": "all",
"editor.renderWhitespace": "boundary",
"editor.showFoldingControls": "always",
// "editor.smoothScrolling": true,
"files.autoGuessEncoding": true,
"files.defaultLanguage": "javascript",
"files.eol": "\n",
"files.hotExit": "onExitAndWindowClose",
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.cursorStyle": "line",
"terminal.integrated.enableBell": true,
"window.newWindowDimensions": "inherit",
"window.restoreFullscreen": true,
"window.zoomLevel": 0,
"workbench.editor.tabCloseButton": "left",
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "none",
// ===========================
// language specified settings
// ===========================
"[git-commit]": {
"editor.rulers": [
100,
],
},
"[javascript]": {
"editor.tabSize": 2,
},
"[javascriptreact]": {
"editor.tabSize": 2,
},
"[json]": {
"editor.tabSize": 2,
},
"[markdown]": {
"editor.wordWrap": "off",
"files.trimTrailingWhitespace": false,
},
"[typescript]": {
"editor.tabSize": 2,
},
"[typescriptreact]": {
"editor.tabSize": 2,
},
// ===================
// extensions settings
// ===================
"gitlens.advanced.messages": {
"suppressShowKeyBindingsNotice": true
},
}
主要な設定について解説
全部を解説してたらとんでもなく長くなりそうなので、いくつか抜粋して解説したいと思います。
editor
"editor.renderControlCharacters": true, // 制御文字を表示する
"editor.renderWhitespace": "boundary", // 空白文字を表示する
まずは、画面に空白や制御文字を表示する設定から。
僕は空白文字とかが表示されてないと落ち着かないので、必ず最初に設定します。
"editor.renderLineHighlight": "all", // カーソル行を強調する
"editor.cursorBlinking": "phase", // カーソルを点滅させる
次は、カーソルの見た目。ここは完全に好みです。
"editor.lineNumbers": "interval", // 行番号を10行間隔で表示する
"editor.showFoldingControls": "always", // 行の折りたたみ記号を常に表示する
"editor.minimap.maxColumn": 40, // ミニマップの幅を40文字分に設定する
"editor.minimap.showSlider": "always", // ミニマップ上にスライダーを常に表示するようにする
エディタ左右の見た目。僕はすべての行に行番号があると読みにくい感じがするので、10行ごとに行番号を表示するようにしています。
デフォルトではエディタ右側に表示されるミニマップですが、幅が太くてエディタ部分が狭くなってしまうのが気になっていました。
そのため一時期はミニマップ非表示にしていたのですが、やはりコード全体の概要が見えるのは便利ということで、ミニマップの幅を狭めて表示させる設定をしました。
"editor.dragAndDrop": false, // ドラッグアンドドロップでコードの移動をしないようにする
デフォルト設定だと、範囲選択した状態でドラッグアンドドロップするとコードを移動することができるんですよね。でも正直マウスでコードの移動なんてしません。
むしろレビューとかしててマウスでポイントしようとしたら誤操作で勝手にコードが移動しちゃってわけが分からなくなった！なんてことが起こるのでオフです。
"editor.find.autoFindInSelection": true, // 範囲選択中はCommand-Fで選択範囲内だけ検索
あんまり頻繁にあるわけではないんですが、デフォルト設定だと「この範囲の中だけ置換したいんだけど…。」みたいな場面で範囲内検索するのが地味に面倒でした。
最近はIntellisenseが賢いのであまりそういう場面にも出会わないのですが。
// "editor.smoothScrolling": true, // スクロールを滑らかにする。Macでは必要ない。
職場のwindowsマシンでは設定しているのですが、Macだともともとスクロールが滑らかなので設定を外しました。
マウスホイールなどでスクロールしたときにカクカクしなくなります。
files
"files.eol": "\n", // 改行文字を\nにする
"files.autoGuessEncoding": true, // 文字コードを自動的に判別する
職場ではwindowsマシンが主流になっていますが、OSが何であろうと基本的には文字コードはUTF-8・改行文字は\nのUNIXスタイルに設定しちゃいます。
が、文字コードなんかは固定で設定しちゃうと(特に職場のwindowsでは)しょっちゅう文字化けして面倒なので、自動的に判別してもらうようにしています。
"files.insertFinalNewline": true, // 保存時にファイルの最後に空行を挿入する
"files.trimFinalNewlines": true, // 保存時にファイルの最後に存在する空行を削除する
"files.trimTrailingWhitespace": true, // 保存時に行の終端に存在する空白文字を削除する
コーディングするときにはフォーマッタを使うと思うのであまり必要ないかもしれませんが、ファイル保存時にフォーマットし忘れを防ぐために設定しています。
files.insertFinalNewlineとfiles.trimFinalNewlinesは一見矛盾した設定に見えますが、同時に設定すると「ファイルの最後に必ず1行だけ空行を残す」ようになります。
workbench
"workbench.editor.tabCloseButton": "left", // タブを閉じるボタンをタブ左側に表示する
"workbench.iconTheme": "material-icon-theme", // エクスプローラのファイルアイコンテーマにmaterial iconを使う
"workbench.startupEditor": "none", // vscode起動時に「ようこそ」画面を表示しないようにする
このあたりの設定は完全に個人の好みだと思います。
僕は、"workbench.editor.tabSizing": "fit" (ファイル名が長くなると合わせてタブが長くなる。デフォルト設定)と"workbench.editor.tabCloseButton": "left" の組み合わせが気に入っています。
その理由は、たくさん開いてしまったタブをマウスでいくつか閉じていきたい(全部は閉じたくない)ときに、閉じたいタブのうち一番左のものから消していくと、カーソルを動かさずとも続けてクリックするだけで次々とタブを閉じることができるからです。
アイコンテーマはExtensionsからダウンロードしてくるのですが、今はMaterial Icon Themeを使っています。
以前はvscode-iconsを使っていたのですが、Angularプロジェクトだと判別すると画面のリロードが走ってしまうところがイケてないと思ってしまいました。(たしか設定でリロードしないようにもできるけど面倒だった。)
debug
"debug.inlineValues": true, // デバッグ中にインラインで変数の内容を表示する
単純な変数程度であれば、デバッグウィンドウを開かずとも中身が確認できるので便利です。
操作しているのが巨大なオブジェクトなんかになると役立たずになってしまうのですが。
"debug.internalConsoleOptions": "openOnSessionStart", // デバッグセッションが開始されると毎回デバッグコンソールを表示する
"debug.openDebug": "openOnSessionStart", // デバッグセッションが開始されると毎回デバッグウィンドウを表示する
"debug.toolBarLocation": "docked", // デバッグツールバーをデバッグウィンドウに埋め込む
デフォルトだとタブと被って表示されてしまうため意外と邪魔だと思ってしまうデバッグツールバーは、デバッグウィンドウに埋め込んでしまいました。
言語固有の設定
"[javascript]": {
"editor.tabSize": 2, // javascriptのソースコードの場合は、インデントのサイズを空白2つ分にする
},
"[javascriptreact]": {
"editor.tabSize": 2,
},
"[json]": {
"editor.tabSize": 2,
},
"[typescript]": {
"editor.tabSize": 2,
},
"[typescriptreact]": {
"editor.tabSize": 2,
},
javascript/Typescriptを書くときのインデントはスペース2つ派なので、その設定をしています。
普通は.editorconfigでプロジェクトごとに固定するんですけど。(vscode用の拡張機能はこちらのEditorConfig for VS Code)
"[markdown]": {
"editor.wordWrap": "off",
"files.trimTrailingWhitespace": false,
},
markdownなんかだと行末の空白に意味があるので、files.trimTrailingWhitespaceはオフにしておきます。
よく使う拡張機能
ここまでの設定で出てきてはいないけれど、普段必ず使っている拡張機能も晒しておきます。
Bracket Pair Colorizer
コーディングをしていると大量に出てくるカッコの対応を色分けして表示してくれるExtensionです。
カーソルがある位置にあるカッコのスコープ範囲を線引きして表示してくれたりするので、コードの可読性がぐっと上がると思います。
特にjavascriptなんてカッコだらけで訳わからんし。
indent-rainbow
インデントの深さを色分けして表示してくれるExtensionです。
色分けする系大好き。
特にjavascriptなんて(ry
Trailing Spaces
文末に空白が残ってると赤くハイライトしてくれるExtensionです。
色分け(ry
まとめ
…設定多すぎない？
この記事に書いてあることをすべて設定すると、下のスクショのようになります。
スクショに写っているソースはangularからクローンしてきました。
