みなさんこんにちは。
今回は Next.js + TypeScript のプロジェクトに、ESLint と Prettier を導入してみましたのでそのメモを残します。
背景
久しぶりに開発業務で Next.js v9.3.0 と TypeScript v3.8.3 を使ったプロダクトを開発機会があり、改めてイチから環境を構築しました。
TypeScript の構文チェックには TSLint がありましたが、現在は deprecated になっているため ESLint を入れます。
Prettier は v2 がリリースされましたのでv2.0.2 とします。
ライブラリ
- "next": "9.3.0"
- "eslint": "^6.8.0"
- "@typescript-eslint/eslint-plugin": "^2.25.0"
- "@typescript-eslint/parser": "^2.25.0"
- "eslint-config-prettier": "^6.10.1"
- "eslint-plugin-prettier": "^3.1.2"
- "eslint-plugin-react": "^7.19.0"
- "prettier": "^2.0.2"
ESLint
ここで下記のドキュメントを見てみましょう。
$ npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
@typescript-eslint/parser
This allows ESLint to understand TypeScript syntax.
ESLint が TypeScript の構文を理解します。
@typescript-eslint/eslint-plugin
This allows you to use the rules within your codebase.
コード内でルールを使えるようにします。
$ npm install -D eslint-plugin-react
eslint-plugin-react
React specific linting rules for ESLint
React 用 ESLint のプラグインです。
Prettier
$ npm install -D prettier eslint-config-prettier eslint-plugin-prettier
eslint-config-prettier
Turns off all rules that are unnecessary or might conflict with Prettier.
Prettier とコンフリクトしそうな、または、不必要なルールを off にできます。
eslint-plugin-prettier
Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
Prettier をESLint のルールとして実行し、その差異を個々の ESLint の問題としてレポートします。
module.exports = {
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:prettier/recommended',
'prettier/@typescript-eslint',
],
plugins: ['@typescript-eslint', 'react'],
parser: '@typescript-eslint/parser',
env: {
node: true,
es6: true,
},
parserOptions: {
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
settings: {
react: {
version: 'detect',
},
}
}
おわりに
私もすべての設定を把握しているわけではありませんが、これを機に色々調べてみようかと思います。