klim.log()

フロントエンドエンジニア見習いによる学習記録

Visual Studio Code 設定集

Visual Studio Code

コツコツ育て上げる系の記事です。毎日のようにこの記事をアップデートしていくつもり。

VS Codeだけじゃなくテキストエディターはカスタマイズしてナンボのところがあるけれど、やっぱりメモ残しておかないと色々分からなくなるので、せっかくだからブログにまとめておく。

内容的にフロントエンド寄りになります。

【追記：2019-06-22】 毎日のようにこの記事をアップデートしていくつもりと言ったな、あれはウソだ。 という訳で、半年ぶりに更新。

目次

環境

User Settings

基本設定のやつ。デフォルトのものは極力記述しないようにする*1。

{
    "breadcrumbs.enabled": true,
    "editor.cursorBlinking": "smooth",
    "editor.fontFamily": "'Fira Code','Myrica M',Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.renderWhitespace": "all",
    "editor.renderControlCharacters": true,
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "emmet.variables": {
        "lang": "ja"
    },
    "telemetry.enableCrashReporter": false,
    "telemetry.enableTelemetry": false,
    "workbench.statusBar.feedback.visible": false,
    "workbench.colorTheme": "Monokai",
    "window.title" : "${dirty}${activeEditorMedium}${separator}${rootName}",
    "files.associations": {
        ".{htmllint, csslint}rc": "json",
        "Vagrantfile":"ruby"

    }
}

説明

  • カーソルの点滅をﾁｶﾁｶからﾁｨｶﾁｨｶみたいな感じに（雑
    • "editor.cursorBlinking": "smooth"
  • エディター用フォントはFiraCode派。リガチャ（合字）でコーディングがはかどる。
    • editor.fontFamily"
    • リガチャをオンにする
      • editor.fontLigatures
  • スペースと制御文字は全部可視化
    • editor.renderWhitespace
    • editor.renderControlCharacters
  • Emmet関連
    • サジェストに表示させる
      • emmet.showSuggestionsAsSnippets
    • TABキーでEmmetを発動させるかどうか
      • これを true にすると、いったんカーソルを外した文字列（例： h1 ）に再度カーソルを当てた上で tab キー押下してEmmetが発動できる。
      • emmet.triggerExpansionOnTab
    • Emmet発動時の属性等を指定できる。
      • 例えば ! で展開される時の html 要素の lang 属性を、デフォルトの en から ja に変更したい…という時に設定する。
      • emmet.variables
  • クラッシュレポートや匿名情報共有やフィードバッククレクレアイコン
    • telemetry.enableCrashReporter
    • telemetry.enableTelemetry
    • workbench.statusBar.feedback.visible
  • カラーテーマ
    • workbench.colorTheme
    • 筆者はMonokai派
  • タイトルバーにファイルパス等を表示させる
  • 特定のファイルや拡張子に、特定のシンタックスハイライトを対応付けさせる

保存場所

/Users/[USER]/Library/Application Support/Code/User/settings.json

Keybindeings

キーボードショートカットをアレコレするやつ。 筆者は基本的にエディターやIDEのデフォルトから大きく変えないタイプ（が、何か追加する時はSublime Textに合わせがち）

[
    {
        "key": "ctrl+shift+;",
        "command": "workbench.action.terminal.focus",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+;",
        "command": "workbench.action.focusFirstEditorGroup",
        "when": "terminalFocus"
    },
    {
        "key": "cmd+k cmd+u",
        "command": "editor.action.transformToUppercase"
    },
    {
        "key": "cmd+k cmd+l",
        "command": "editor.action.transformToLowercase"
    }
]

説明

  • ターミナルとエディターのフォーカスを切り替える
    • workbench.action.terminal.focus
    • workbench.action.focusFirstEditorGroup
  • アルファベットの大文字小文字を切り替え
    • editor.action.transformToUppercase
    • editor.action.transformToLowercase

保存場所

/Users/[USER]/Library/Application Support/Code/User/keybindings.json

Extensions

みんな大好き拡張機能。詳細はリンク先を確認。

UI関連

  • Bracket Pair Colorizer 2
    • 入れ子になったかっこを色分けして表示してくれる。
    • Bracket Pair Colorizerの作者が作成したバージョン2版で、バージョン1よりも処理速度や正確さが向上しているらしい。
  • EvilInspector
    • 全角スペースを強調表示してくれる
  • indent-rainbow
    • インデントの深さを色分け
  • vs code-icons
    • サイドバーのファイルアイコンをデフォルトのやつよりいい感じにしてくれるやつ

テキスト・入力補助関連

  • Markdown All in One
    • キーボードショートカットキーを割り振ってくれたり、画像のパスを入力補完してくれたり色々と高機能なMarkdown拡張機能
  • vscode-input-sequence
    • VS Codeのデフォルトのキーボードショートカットである cmd+alt+↑↓ と組合わせると大変便利。
    • 上記ショートカットで矩形選択した上で cmd + alt + 0 で連番を入力できるようになる。これでインプットパネルが出てくるので、ここで 1 と入力して Enter すると、1始まりの連番が挿入されている。
  • テキスト校正くん

Git関連

コーディング強化

Vue.js関連

Docker関連

  • Docker
    • サイドバーでimagesやcontainersを確認したり操作したり、Dockerfileのシンタックスハイライト機能も。

User settings for Extensions

先述のsettings.jsonに下記を追記することで、上記拡張機能の設定を変更できる。

{
    "gitlens.defaultDateStyle": "absolute",
    "workbench.iconTheme": "vs code-icons"
}
  • GitLensで日付を絶対表示に
    • "gitlens.defaultDateStyle": "absolute"
  • サイドバーのvs code-icons
    • "workbench.iconTheme": "vs code-icons"

保存場所

/Users/[USER]/.vs code/extensions

参考URL

*1:settings.jsonの紹介記事を嬉々として見に行ったらほとんどがデフォルト値のものをわざわざUser Settingsに記述しているものが多くて辟易とした。VS Codeのバージョンアップでデフォルト値が変更された時の対策としてはアリではあるけれど…