React × TypeScript 環境における ESlint の設定

2021-02-01

プロジェクトを作るたびに悩まされる ESlint ですが、ある程度これがベストかなーと思える設定ができあがってきたので備忘録がてらです。

今回の環境は Nextjs × TypeScript となっています。

{ "devDependencies": { "@typescript-eslint/eslint-plugin": "4.14.1", "@typescript-eslint/parser": "4.14.1", "eslint": "7.18.0", "eslint-config-prettier": "7.2.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsx-a11y": "6.4.1", "eslint-plugin-prettier": "3.3.1", "eslint-plugin-react": "7.22.0", "eslint-plugin-react-hooks": "4.2.0", "eslint-plugin-sort-keys-shorthand": "2.1.0", "eslint-watch": "7.0.0", "prettier": "2.2.1" }, "eslintConfig": { "env": { "browser": true, "commonjs": true, "es6": true, "node": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended", "plugin:import/errors", "plugin:import/warnings", "plugin:import/typescript", "plugin:react-hooks/recommended", "plugin:jsx-a11y/recommended" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2020, // @typescript-eslint/parser の反映に必須 "project": ["./tsconfig.json"], "sourceType": "module" }, "plugins": [ "prettier", "react", "@typescript-eslint", "import", "sort-keys-shorthand", "jsx-a11y" ], "rules": { "import/order": [ "error", { "alphabetize": { "caseInsensitive": true, "order": "asc" } } ], // TODO: Nextjs の Link コンポーネント対策 "jsx-a11y/anchor-is-valid": [ "error", { "aspects": ["invalidHref", "preferButton"], "components": ["Link"], "specialLink": ["hrefLeft", "hrefRight"] } ], "prettier/prettier": "error", "react/jsx-sort-props": [ "error", { "callbacksLast": false, "ignoreCase": false, "noSortAlphabetically": false, "reservedFirst": false, "shorthandFirst": false, "shorthandLast": false } ], "sort-keys-shorthand/sort-keys-shorthand": [ "error", "asc", { "caseSensitive": true, "natural": true, "shorthand": "first" } ] }, "settings": { "import/resolver": { "node": { "paths": ["src"] } }, "react": { "version": "detect" } } }, "scripts": { "lint": "eslint . --ext .ts,.tsx --fix" } }

個人的には eslint-config-airbnb-typescript も使用したいところなのですが、うまく設定できず断念気味です。

ルールとしてはもう少しきつめにしたほうが良いかな?という印象です。

Prettier のフォーマットがなんだかんだでめちゃくちゃ強いので ESLint 側に組み込む形にしてあります。

フォーマットは ESLint で行うようにしています Pritter でやったらどうなるんですかね?

stylelint もついでに備忘録がてら…ただ、こっちはまだまだ試行錯誤中です。

こちらの環境は Nextjs(CSS Modules) × SCSS となっています。

{ "devDependencies": { "stylelint": "13.9.0", "stylelint-config-css-modules": "2.2.0", "stylelint-config-recommended-scss": "4.2.0", "stylelint-config-sass-guidelines": "7.1.0", "stylelint-scss": "3.18.0" }, "scripts": { "lint:style": "stylelint '**/*.scss' --fix" }, "stylelint": { "extends": [ "stylelint-config-sass-guidelines", "stylelint-config-recommended-scss", "stylelint-config-css-modules" ], "plugins": ["stylelint-scss"], "rules": { "at-rule-no-unknown": [ true, { "ignoreAtRules": ["include"] } ], "selector-class-pattern": null } } }

stylelint-config-recommended-scss はいらないのかもなーというのと selector-class-pattern の回避方法がわかっていません、誰か教えて!

© 2018 kk-web