意外と大切な開発初期のVSCode準備作業
はじめに
開発初期の準備作業は意外と大変です。
特にプロジェクトに応じてチームが流動的な変わっていく場合には、常に同じような環境で開発できるとは限りません。
『Aのプロジェクトはすんなり開発にJoinできる!』
『Bのプロジェクトは初動が遅いなぁ。』
なんてことが普通にあります。
今日は『開発初期におけるVSCodeの準備作業』と題して、簡単なTipsまとめです。
共有したい設定情報はリポジトリに含める
.vscode
フォルダ配下の設定は、Workspace毎に適用されるため、
.vscode/settings.json
に予めエディタの設定情報を記載してコミットしておくことで、Formatterの設定や、文字コード、Whitespaceのトリミングなどの設定を共有することができます。
{ "editor.tabSize": 2, "editor.insertSpaces": true, "editor.renderWhitespace": "boundary", "editor.rulers": [140], "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "files.encoding": "utf8", "files.trimTrailingWhitespace": true, "files.insertFinalNewline": true, "files.eol": "\n", "search.exclude": { "public/**": true, "node_modules/**": true } }
ファイルのEncodingやEOLの設定をあらかじめ入れておくことによって、エディタ最適化の時間を短縮することができます。
これだけでもある程度は効果的ですが、特定の拡張機能に対する設定を共有したい場合は別の設定情報も合わせて加える必要があります。
推奨拡張機能を全体で共有する
特定の拡張機能に依存した設定を全体で共有したい場合、推奨拡張をREADME.md
に記載する場合が多いかと思いますが、.vscode/extensions.json
ファイルを使えば、推奨拡張のインストールを開発者に促すことができます。
{ "recommendations": [ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode" ], "unwantedRecommendations": [] }
recommendations
には推奨される拡張機能を。
何らかの理由により推奨されない拡張機能がある場合には、unwantedRecommendations
に拡張機能名を記載します。
後は、Cloneしたソースコードを開けば拡張機能のインストールを促すINFOが表示されます。
INFOが表示されない場合は、Ctrl
+ Shift
+ P
でコマンドレットを開き、Show Recommended Extensions
を入力することで、推奨機能の確認を行うことができます。
まとめ
.vscode/settings.json
をリポジトリにコミットすれば、設定情報は共有できる。- 拡張機能に依存した設定を共有する場合は、
.vscode/extensions.json
も合わせて使うと良い。
初期開発に関わる作業は、特定の人しかやらないことが多いので意外と属人化しやすい部分だなと思っています。 小さなことですが、スムーズな開発にはこういった小さな気づかいや工夫が大切ですね。