VSCodeでESLintとPrettierの設定をファイル管理して共有する方法【Git チーム開発】

概要

共同開発において、各自のVSCodeの拡張機能設定を統一することが面倒だったので、設定ファイルを共有して設定を統一させようというお話。

環境

どのような開発環境？

本記事では以下のような開発環境を想定しています
※ただし，他の環境でも設定方法は同じです．

開発環境：node+npm
VSCode拡張機能：ESLint,Prettier

具体的な設定方法

どのようなファイルを用意・設定すればいいの？

1. .eslintrc.jsonの設定

リポジトリのルートディレクトリに.eslintrc.jsonを置く
以下は設定ファイルの例

{
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
};

2. .prettierrc.jsonの設定

リポジトリのルートディレクトリに.prettierrc.jsonを置く
以下は設定ファイルの例

{
  trailingComma: "es5",
  tabWidth: 4,
  semi: true,
  singleQuote: true,
  "parser": "typescript",
};

3. setting.jsonの設定

リポジトリのルートディレクトリに設定ファイルである.vscode/settings.jsonに設定を書く
以下は設定ファイルの例

{
    "eslint.packageManager": "npm",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.wordWrap": "on",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "diffEditor.wordWrap": "on"
}

つまづきポイント

うまく動かない..どこか間違えてるのかな..?

.vscode/settings.jsonをまず自分で作ること
- 「ctrl」+「shift」+「p」で検索バーを開き、settings.jsonと打つと「基本設定：ワークスペース設定を開く(JSON)」と表示されるので、クリックするとファイルが生成される
setting.jsonではなくsettings.json
- 間違えてsetting.jsonとしてしまうと動かないので注意！