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

プログラミング
この記事は約3分で読めます。

概要

共同開発において、各自の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としてしまうと動かないので注意!

参考資料

TypeScriptのプロジェクトにESLintとPrettierを導入する方法(+VSCodeでの設定) - Qiita
ネット上に様々な方法で導入する方法が載っており、どれが良いのか分からなかったので自分なりにまとめてみました。 この記事は2020年8月時点での情報です。(2021/06/21 最新の情報を一部追記しました。) 内容 各種パッケ...

コメント

タイトルとURLをコピーしました