eslintとprettierを設定する

この記事について

「環境設定なにもわからないよ〜」という初心者が、新規プロジェクトにESLintとPrettierの設定を行った際の記録です。
ESLintとPrettierを競合せず導入して、Cmd + Sで自動整形してもらうのがゴール

初期状態、実行環境

OS : macOS Catalina 10.15.6

VSCodeにESLintとPrettierはインストール済み

VSCode : 1.52.1
ESLint : 2.1.14
Prettier : 5.8.0

今回設定するプロジェクトはTypeScript + React(Next.js)環境、yarnを使用

yarn add してみる

2020年12月時に推奨されているのは、eslint-plugin-prettierを使わない方法らしいので、それぞれの本体とeslint-config-prettierだけ入れてみる

# yarn add -D eslint prettier eslint-config-prettier

yarn eslint --init してみる

# yarn eslint --init

色々質問されるので答えていく

✔ How would you like to use ESLint? · problems
✔ 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
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes

最後に、npmでこのパッケージ入れますか？と聞かれるが、yarnで入れたかったため、パッケージ名だけコピーしてNoを選択

そのときは初期化に失敗したが、yarn add -Dで上記パッケージを入れてからinitしたらNoでも初期化された

eslintrc.jsを修正

プロジェクトのルートにeslintrc.jsが生成されたので、開いてみる

eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
};

ここで、１行目のmoduleに赤波線が付いていた

調べたところ、exportsとmodule.exportsの２種類あってどちらかしか使えないようなので、exportsにしてみたら赤波線が消えた
ただ、module.exportsのほうが推奨らしいので、ファイル名を.eslintrc.jsonに変更してexports自体を消した
[ 参考(古い) ]

Prettierの設定をする

Prettierはinitコマンドがなさそうだったため、手動で.prettierrc.jsonを生成して置く

.prettierrc.json

{
  "printWidth": 120,
  "tabWidth": 4,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "parser": "typescript"
}

タブ幅はスペース４つ派

保存時に自動整形されない

ここで、あえてフォーマットを崩したファイルを保存して自動整形されるかを試してみたが、されなかった

# yarn prettier --write pages/users/\[id\].tsx

のように、ターミナルから実行したところ、整形された

VSCodeのsetting.jsonに

"editor.formatOnSave": true,

を設定して、再起動後試してみるが、自動整形されない

"editor.defaultFormatter": "esbenp.prettier-vscode"

を追加して実行したところ、自動整形された

プロジェクトのsettings.jsonにも書いておく

.vscode/settings.json

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

とりあえず、目標は達成できたので一旦ここで終わるが、ほぼ初期設定のため、便利にできそうな所があれば随時改良していきたい。このプロジェクトのpritter ESLint周りをカスタマイズしたらここに追記する

参考文献

Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった

いつのまにかeslint-plugin-prettierが推奨されないものになってた