One Step Ahead

プログラミングやエンジニアリング全般について書いていきます

意外と大切な開発初期の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が表示されます。

f:id:EaE:20210114210419p:plain

INFOが表示されない場合は、Ctrl + Shift + Pでコマンドレットを開き、Show Recommended Extensionsを入力することで、推奨機能の確認を行うことができます。

まとめ


  • .vscode/settings.jsonをリポジトリにコミットすれば、設定情報は共有できる。
  • 拡張機能に依存した設定を共有する場合は、.vscode/extensions.jsonも合わせて使うと良い。

初期開発に関わる作業は、特定の人しかやらないことが多いので意外と属人化しやすい部分だなと思っています。 小さなことですが、スムーズな開発にはこういった小さな気づかいや工夫が大切ですね。