Zenn
🤖

(VSCode × ESLint × Prettier) 開発環境設定まとめ! チームで統一

に公開
ESLint
VS Code Extension
Prettier
tech

フォーマットルールを統一：.vscode/settings.json

チーム内でルールを設定しないと、開発者のvscodeの元の設定に左右されるの今回はルールを設定してみました。

もちろん、一人でいきなりルール設定なんか難しかったので、Chat GPTに聞いてみました！
今回のプロジェクトのコードに必要とされるルールなので、他にもいろんなルールがあると思いますが、
あくまで参考にお願いします。
（実は私のメモ的なものでもあります）

🔧 コード

// ESLintとPrettierの設定ファイル
{
  // ファイル保存時に自動でコードフォーマットを実行（Prettierなど）
  "editor.formatOnSave": true,

  // 保存時にESLintで修正可能なすべての問題を自動で修正
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // ESLintを有効にするファイルタイプの指定
  "eslint.validate": [
    "javascript",         // JavaScriptファイル
    "typescript",         // TypeScriptファイル
    "typescriptreact"     // .tsxファイル（React + TypeScript）
  ],

  // デフォルトのフォーマッターとして Prettier を指定（VSCode拡張機能のID）
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 行末の余分な空白を自動的に削除（コードをきれいに保つため）
  "files.trimTrailingWhitespace": true,

  // ファイルの最後に改行を追加（POSIX規約などで推奨される）
  "files.insertFinalNewline": true
}

この設定を .vscode/settings.json に追加しておけば、
チームメンバー全員が 同じ開発環境（自動整形、空白ルールなど） で作業できます！

拡張機能

拡張機能 内容
ESLint .eslintrc に基づいてコードの構文エラーやルール違反を検出してくれる
Prettier 自動フォーマットツール。インデントや改行、クォートなどのコードスタイルを統一
EditorConfig エディタ間でコードスタイルを統一するための補助設定

ESLintでimportの順序を強制：.eslintrc.jsonのルール設定

ESLintを使えば、import文の順序やグループ分けを細かくルール化できます。
この設定では、React や外部ライブラリ、自作モジュールなどを分類して、読みやすく整理されたimport順を保てるようにします。

🔧 コード

// ルールを追加して、importの順序を制御するための設定ファイル
{
  // 環境設定：使用するJavaScriptの実行環境を指定
  "env": {
    "browser": true,     // ブラウザ環境（windowやdocumentなど）
    "es2021": true,      // ES2021の構文を使用可能
    "jest": true         // テスト環境（Jest）をサポート
  },

  // ベースとなるルールセットを拡張
  "extends": [
    "eslint:recommended",                   // ESLintの基本ルール
    "plugin:react/recommended",             // React向けの推奨ルール
    "plugin:@typescript-eslint/recommended" // TypeScript向けの推奨ルール
  ],

  // 使用するパーサー（TypeScriptの構文解析に必要）
  "parser": "@typescript-eslint/parser",

  // 使用するESLintプラグイン
  "plugins": [
    "react",               // React用のルール
    "@typescript-eslint",  // TypeScript用のルール
    "import"               // import順序や重複などをチェックするプラグイン
  ],

  // 独自ルールの定義
  "rules": {
    // import文はファイルの先頭に配置することを強制
    "import/first": "error",

    // importのグループごとに順序を守り、間に空行を入れる
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal"], // グループの順序
        "newlines-between": "always"                   // グループの間に空行を挿入
      }
    ]
  }
}

import/order のグループの意味

グループ名 対象例
builtin fs, path, React など組み込みモジュールやReact本体など
external axios, lodash, styled-components など外部ライブラリ
internal @/utils, src/xxx のような自作モジュール・絶対パス

この設定は、チーム内でインポートクリーンアップ基準を統一するときに非常に便利です。

Discussion