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/",
    ...  
  },
  ...
}

参考

https://eslint.org/docs/latest/use/getting-started#quick-start
https://prettier.io/docs/en/install