VSCodeの設定をチームで共有する
フロントエンドチームマネージャーの森田です。
現在、弊社のエンジニアは全員 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 の画面右下にポップアップが表示されます。

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

extensions.json
で指定した拡張機能が表示されました。
あとはインストールしてもらうだけです。便利ですね。
まとめ
コードや機能を統一することで、クオリティやレビュー精度なども上げることができるので、設定の共有はお勧めです。
今回は弊社メンバーが全員 VSCode 前提な話ですが、社外パートナーさんもVSCode を使われていることが多いのでわりとそのまま使えます。
lint に関しては、VSCode を使っていない方がいる場合でも、 git hookなどを使って commit 時にフォーマットをかけることも出来ますしそれはその時々で検討しています。
TypeScript を使う案件などは、便利なので使ってもらうというの有りかもしれません。
開発のお悩み、フロントエンドから解決しませんか?
あなたのチームのお悩みはなんですか?
「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」
役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。
オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。
リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください!
お悩み相談はこちらから!