Zenn
👀

【Eslint/Prettier】React×TypeScript×Sassで開発時の設定

2023/05/23に公開
React
VS Code
ESLint
Prettier
TypeScript
tech

毎回EslintとPrettierを導入する度に苦戦しているので、設定をまとめておきます！

Eslint

まずは初期設定のコマンド入力。

$ npm init @eslint/config



質問に対して以下で答えていく。

How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide        
√ Which style guide do you want to follow? · standard-with-typescript   
√ What format do you want your config file to be in? · JSON
この後「Would you like to install them now?」と、パッケージをインストールするか聞かれるのですが、Airbobを別途インストールするためここは「No」にしておきましょう！



Airbobをインストールします。

$ npm install --save-dev eslint-config-airbnb eslint-config-airbnb-typescript



eslintrcのextendsとparserOptionsを下記のように変更します。

eslintrc.json
{
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "airbnb-typescript"
     ],
     "parserOptions": {
        "project": "./tsconfig.json"
}

Prettier（Eslintと使う時の設定）

Eslintと一緒に使う際は、ルールが競合してしまわないように設定するため
下記のコマンドを入力。

$ npm install --save-dev prettier eslint-config-prettier



次にディレクトリ配下に「.prettierrc.json」を作成して設定していきます。

prettierrc.json
{
　　"semi": true,  //セミコロンを省略しない
　　"singleQuote": true　//シングルクォーテーションを使う
}



eslintrc.jsonのextendsに追記します。

eslintrc.json
{
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "airbnb-typescript",
	"prettier"
     ],
}




これでEslintとPrettierが使えるようになりましたが、このままではエラーが大量発生してしまうので、eslintrcを下記に編集してください。

eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "airbnb-typescript",
        "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "overrides": [
    ],
    "parserOptions": {
        "project": "./tsconfig.json",
        "ecmaFeatures": {
            "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "import/prefer-default-export": "off", // named exportがエラーになるので使えるようにoff
        "import/extensions": [ // importのときに以下の拡張子を記述しなくてもエラーにしない
          "error",
					{
            "js": "never",
            "jsx": "never",
            "ts": "never",
            "tsx": "never"
          }
        ],
        "react/function-component-definition": [ // アロー関数以外受け付けない設定
          2,
          {
            "namedComponents": "arrow-function",
            "unnamedComponents": "arrow-function"
          }
        ],
        "react/jsx-filename-extension": [ //jsx形式のファイル拡張子をjsxもしくはtsxに限定
          "error",
          {
            "extensions": [".jsx", ".tsx"]
          }
        ],
				"arrow-body-style": "off"
      },
      "settings": {
        "import/resolver": { //importするファイルをjsだけではなく、tsを含むファイルを許可する
          "node": {
            "paths": ["src"],
            "extensions": [".js", ".jsx", ".ts", ".tsx"]
          }
        }
      }
    }

実行する

実行するために、package.jsonに追記。

package.json
"scripts": {
    "lint": "eslint --ext .jsx,.js,.tsx,.ts src/",　// ESLintによる解析
    "fmt": "prettier --write src/**/*"　// Prettierによるフォーマット
  },

いざ、実行！

$ npm run lint 

$ npm run fmt

これでAirbnbスタイルベースのESLintとPrettierの設定は完了！！

Discussion