Zenn
👓

eslint,prettierをreact+typescriptに導入する

2024/02/23に公開
React
TypeScript
ESLint
frontend
Prettier
tech

はじめに

いろいろ記事を見たけど、公式通りやるのが一番良かった。

手順

1. eslintを導入する

https://eslint.org/docs/latest/use/getting-started
公式の手順通りに進めていく。
下記を実行して、.eslintrc.jsを作成する。
その際いくつか質問をされるが、自分の環境に合わせて答えていけば良い。

ターミナル
npm init @eslint/config

その際にバージョンの依存関係の問題でライブラリのインストール時にエラーになることがある。
以下の依存関係でエラーを回避できた。

package.json
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "5.50",
        "eslint": "^8.56.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-config-standard-with-typescript": "36.0",
        "eslint-plugin-import": "^2.29.1",
        "eslint-plugin-n": "^15.7.0",
        "eslint-plugin-promise": "^6.1.1",
        "eslint-plugin-react": "^7.33.2",
        "prettier": "3.2.5"
    }

今回はeslint-config-standard-with-typescriptを使用しているが、aribnbのライブラリを入れる方が主流なのかなと思う。
そこまで気にしないので、今回はこれで行く。

2. .eslintrc.jsを書き換える

下記のコードに書き換える

.eslintrc.js
module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'standard-with-typescript',
        'plugin:react/recommended',
        'prettier',
    ],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: './tsconfig.json',
    },
    plugins: ['react'],
    rules: {
        "react/react-in-jsx-scope": "off"
    },
}

extends　・・・これはライブラリのコーディング規約を取り入れるもの。下に書いてある方が優先される。今回の場合はprettierが一番優先される。
parserOptions　・・・この中の「project: './tsconfig.json'」は、typescriptのコーディングエラーも検知してもらえるように書く必要がある。

また、extendsの中にprettierがあるが、これはこのあとprettierをインストールすることで正常に作動する。おそらくインストールしないとエラーになる。

3. .eslintignoreを作成する

「project: './tsconfig.json'」を書くことでmodule.exportsにエラーが出ると思うが、これはtypescriptをeslintで検知するようにした結果、jsファイルがあるけど？みたいなことを言われているんだと思う。そのため、.eslintrc.jsファイルを検知しないようにする設定が必要。
以下のファイルを作成する。

.eslintignore
.eslintrc.js
ios/
android/
*.config.js

.eslintrc.js以外にも検知しないでほしいものがあるのでそれもついでに書いている。

4. prettierを導入する

https://prettier.io/docs/en/install
これも公式通り進めていく。
下記を実行して、prettierをインストールする。

ターミナル
npm install --save-dev --save-exact prettier

また下記のファイルを作成する。

.prettierrc.json
{
    "printWidth": 120,
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "es5",

    "useTabs": false,
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "avoid",
    "rangeStart": 0,
    "filepath": "none",
    "requirePragma": false,
    "insertPragma": false,
    "proseWrap": "preserve",
    "htmlWhitespaceSensitivity": "css",
    "vueIndentScriptAndStyle": false,
    "endOfLine": "auto"
}

prettierもeslint同様.prettierignoreを作成していく。

.prettierignore
# Ignore artifacts:
build
coverage

5. eslintとprettierの相互連携

今のままだとeslintとprettierがぶつかってしまうので、不要な、またはprettierと競合する可能性のあるesLintルールをすべてオフにするライブラリをインストールする。

ターミナル
npm install --save-dev eslint-config-prettier

Discussion