✔️
2024年7月 最新版 Eslint & prettier & Typescript セットアップ方法
背景
新しくプロジェクトを立ち上げるたびに、eslintのバージョンが上がっていたりして、毎回セットアップ方法が変わるので、毎回調べる人が多いと思います。今どきはめちゃくちゃ簡単になっているので、ここにおいておきます。
内容
プロジェクト内のディレクトリで、次のコマンドを実行します。yarnを使っていても、このコマンドで大丈夫です。
npm init @eslint/config@latest
そこから、こんな感じの質問がされるので、それらを回答します
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · typescript
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:
eslint@9.x, globals, @eslint/js, typescript-eslint
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn
prettierを導入します
npm install -D eslint-config-prettier prettier
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
package.jsonのscriptsに以下を追加しましょう。これで完了です! 簡単ですね！
{
...
"scripts": {
...
"lint:es": "eslint src/",
"lint:es:fix": "prettier --write 'src/**/*' && eslint --fix src/",
...
},
...
}
参考
Discussion