この記事について
「環境設定なにもわからないよ〜」という初心者が、新規プロジェクトに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
が生成されたので、開いてみる
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": {
}
};
ここで、1行目のmodule
に赤波線が付いていた
調べたところ、exports
とmodule.exports
の2種類あってどちらかしか使えないようなので、exports
にしてみたら赤波線が消えた
ただ、module.exports
のほうが推奨らしいので、ファイル名を.eslintrc.json
に変更してexports
自体を消した
[ 参考(古い) ]
Prettierの設定をする
Prettierはinitコマンドがなさそうだったため、手動で.prettierrc.json
を生成して置く
{
"printWidth": 120,
"tabWidth": 4,
"singleQuote": true,
"trailingComma": "none",
"semi": false,
"parser": "typescript"
}
タブ幅はスペース4つ派
保存時に自動整形されない
ここで、あえてフォーマットを崩したファイルを保存して自動整形されるかを試してみたが、されなかった
# yarn prettier --write pages/users/\[id\].tsx
のように、ターミナルから実行したところ、整形された
VSCodeのsetting.json
に
"editor.formatOnSave": true,
を設定して、再起動後試してみるが、自動整形されない
"editor.defaultFormatter": "esbenp.prettier-vscode"
を追加して実行したところ、自動整形された
プロジェクトのsettings.json
にも書いておく
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
とりあえず、目標は達成できたので一旦ここで終わるが、ほぼ初期設定のため、便利にできそうな所があれば随時改良していきたい。このプロジェクトのpritter
ESLint
周りをカスタマイズしたらここに追記する