VSCodeの設定をチームで共有する

フロントエンドチームマネージャーの森田です。
現在、弊社のエンジニアは全員 VSCode を使用しています。

会社としてはエディタの選択は自由ですが、全員が VSCode を選んでいます。
高い拡張性、優秀なインテリセンス、TypeScript や Vue.js の相性・使いやすさなど、全員が選ぶのも納得ですね。

さて、今回は VSCode は設定をチームで共有することができる便利な機能があるので紹介いたします。

設定を共有する

VS Codeの基本設定は ~/Library/Application Support/Code/User/settings.json という json ファイルに保存されています。
この基本設定は、プロジェクトルートに .vscode/setting.json というファイルを作成すると設定を上書きすることができます。

このファイルを git で共有することによって設定を共有することができます。

簡単ですが、弊社で使っている ESLint と stylelint の設定を紹介します。

{
  "eslint.enable": true,
  "stylelint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
}

この設定で ESLint と stylelint を有効にし、保存した際にフォーマットされるようにしています。全員が保存時にフォーマットされることによってコードのブレを減らしレビューがしやすくなります。

setting.json 以外にも、lintルールを設定する .eslintrc や .stylelintrc の共有も忘れずにです。

拡張機能を共有（推奨）する

拡張機能の設定を共有しても、拡張機能がインストールされていなければ意味がありません。
そんな時のために VSCode には拡張機能を推奨する機能があります。

プロジェクトルートに .vscode/extensions.json というファイルを作成し、下記のように推奨する拡張機能を指定します。

{
  "recommendations": [
    "stylelint.vscode-stylelint",
    "dbaeumer.vscode-eslint"
  ]
}

今回はESLint と stylelint の推奨拡張を指定しました。
特に ESLint と stylelint 系は、同名の拡張が大量にあり機能をちゃんと統一するためにもこのファイルの作成はオススメです。

拡張をインストールしてない環境では VSCode の画面右下にポップアップが表示されます。

「Install」を押せばそのままインストールされます。
今回は「Show Recommendations」を押してみます。

extensions.json で指定した拡張機能が表示されました。
あとはインストールしてもらうだけです。便利ですね。

まとめ

コードや機能を統一することで、クオリティやレビュー精度なども上げることができるので、設定の共有はお勧めです。

今回は弊社メンバーが全員 VSCode 前提な話ですが、社外パートナーさんもVSCode を使われていることが多いのでわりとそのまま使えます。

lint に関しては、VSCode を使っていない方がいる場合でも、 git hookなどを使って commit 時にフォーマットをかけることも出来ますしそれはその時々で検討しています。

TypeScript を使う案件などは、便利なので使ってもらうというの有りかもしれません。