雀巽の日記帳

雀巽が綴る日常の記録

Visual Studio Code 入門～オススメ設定と拡張機能編～

ITライフ

Visual Studio Code のオススメの基本設定、キーバインド、拡張機能を紹介します。

どちらかというと、言語ごとに特化した設定や拡張よりも、コーディング全般が便利になる設定や拡張を多く取り入れています。

一応補足ですが、普段は Ruby on Rails か React Redux を書いていることが多いです。

オススメ基本設定

タイトルにルート相対パスを表示

デフォルトだとファイル名しか表示されていないため、同名のファイルがある場合判別が難しくなります。

そのため、プロジェクトルートからの相対パスを表示するようにしています。

{
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}${separator}${appName}"
}

インデントガイドを表示

その名の通り、インデントのガイドが表示されます。見やすいです。

{
  "editor.renderIndentGuides": true
}

80文字目と100文字目にガイドを表示

1行は80文字以内目標、100文字以内必須でコーディングを行っているので、80文字と100文字のところにルーラーを表示しています。

{
  "editor.rulers": [80, 100]
}

ちなみに、「現代のディスプレイは横に長いから1行の文字数はもっと多くて良い」という意見には真っ向から反対*1です！

最終行に改行を追加

POSIX のテキストファイルの定義だとファイル末尾は改行だと定義されている*2そうです。

改行で終了していない場合、Git の表示でもそれを強調してきますし、少々不便なこともあるので、ここは POSIX のテキストファイルの定義に自動で従ってくれるように設定しています。

{
  "files.insertFinalNewline": true
}

オススメ追加キーバインド

機能自体は用意されているものの、キーバインドが設定されていないもので、個人的に良く使うものを挙げます。

大文字小文字変換

Ctrl+u で大文字化、Ctrl+l で小文字化を行うようにしました。

[
{ "key": "ctrl+u", "command": "editor.action.transformToUppercase",
                      "when": "editorTextFocus" },
{ "key": "ctrl+l", "command": "editor.action.transformToLowercase",
                      "when": "editorTextFocus" }
]

複数行を1行にまとめる

Ctrl+j を割り当てました。

[
{ "key": "ctrl+j", "command": "editor.action.joinLines" }
]

オススメ拡張機能

オススメの拡張機能を用途別で紹介します。

コーディング全般

vscode-icons

ファイルやディレクトリのアイコンです。

種類が豊富で EXPLORER がとても色鮮やかになります。

{
  "workbench.iconTheme": "vscode-icons"
}

Path Intellisense

ファイルやディレクトリのパス入力の補完を行ってくれます。

Sort lines

その名の通り、ソートを行ってくれます。

大文字小文字無視、行の長さでソート、重複削除など、便利な機能が一式揃っています。

change-case

変数名や定数名などを色々な記法に変換してくれます。

キャメルケースからスネークケースにしたりできます。

Trailing Spaces

行末のスペースを強調表示や、削除が行なえます。

行末のスペース削除機能も、標準機能より機能が豊富で、編集した行のみを対象とすることもできます。

Bracket Pair Colorizer

括弧をカラフルに表示することで、入れ子になった括弧の対応関係の把握を簡単にしてくれます。

Git Lens

スーパー高機能な Git 拡張です。

デフォルトのまま使うと、エディタ上に編集者、直近の変更、カーソルがあるラインの最終コミットを出してくれるようになるのですが、 個人的には必要なときに必要な機能を起動したいので、以下の設定をし、少々おとなしくさせています。

{
 "gitlens.codeLens.authors.enabled": false,
  "gitlens.codeLens.recentChange.enabled": false,
  "gitlens.currentLine.enabled": false
}

HTML (JSX)

Auto Rename Tag

対応するタグも同時に編集してくれます。超有能。

Auto Close Tag

自動で閉じタグを入れてくれる拡張機能です。

デフォルトの設定だと Emmet 記法での入力時に余分な閉じタグが挿入されてしまうので、設定を変更しています。

{
  "auto-close-tag.SublimeText3Mode": true
}

デフォルトの挙動では > 入力時に閉じタグが挿入されますが、こちらの設定では </ 入力時に閉じタグが挿入されます。

実は Emmet との競合の有無は関係なく、こちらの挙動のほうが好きです。笑

JavaScript

npm Intellisense

npm モジュールの入力補完を行ってくれます。

コーディング全般の項目で紹介済みの Path Intellisence と同じ作者です。

ESLint

ESLint を自動実行し、エディタ上に警告を表示してくれます。

Ruby

Ruby

てんこ盛り系の拡張機能です。

自動補完は以下の Gem*3 を導入することで有効になります。

$ gem install fastri rcodetools

現時点では Lint 機能を利用し、Rubocop を自動実行するようにしています。 こちらも ESLint と同様、エディタ上に警告を表示してくれます。

{
  "ruby.lint": {
    "rubocop": true
  }
}

slim

slim のシンタックスハイライトが有効になります。

設定管理

Settings Sync

Gist を利用した設定の同期が可能になります。

これなしだと複数環境ではやってられないです。

EditorConfig for VS Code

EditorConfig の VS Code 用拡張です。

詳細は省略しますが、EditorConfig を使うとエディタの基本設定を色々なエディタで共有することが可能になります。

関連記事

necojackarc.hatenablog.com

*1:全員が全員1ファイルを横長のディスプレイに全画面表示して作業をするわけではないですし、そもそも横に長過ぎると視線の移動幅が広すぎて大変です。Diff を縦分割で見る際も不便です。

*2:なぜ gcc はファイルの最後に改行がないと警告を出すのか？

*3:fastri は rcodetools 導入時に推奨されますが、必須ではありません。