【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 最新の情報を一部追記しました。) 内容 各種パッケ...
おーよしの紹介
院卒Webエンジニアマン

「プログラミング」や「開発技術」,「ガジェットの紹介」について情報発信してます.これからのIT時代を生き抜くため,自分のスキルを磨き続けます.

oyoshiをフォローする
このエントリーをはてなブックマークに追加
プログラミング開発
スポンサーリンク
にほんブログ村に参加中(^~^)
PVアクセスランキング にほんブログ村
おーよしのDevLog

コメント

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