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

morita

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

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

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

設定を共有する

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

.vscode/settings.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 をプロジェクトルートに作成する

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

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

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

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

VSCodeのポップアップ表示

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

推奨の拡張機能ウィンドウ

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

まとめ

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

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

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

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

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!


morita

投稿者 Morita Sou

フロントエンドチームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。
Macやエディタ、開発環境などを快適にすることにいつも燃えています。