はじめに
ESLint と Prettier の導入手順のメモです。
開発環境は以下の通りです。
- Windows11
- VSCode
- Vite 4.1.0
ESLint
まずはESLintをインストールします。
公式ドキュメントに沿って、以下のコマンドでインストールします。
npm init @eslint/config
インストールの途中でいくつか質問されます。
スタイル(フォーマット)は、Prettierに任せたいので、To check syntax and find problems
を選択します。
tsconfig.json
の "module"
は ESNext
なので、JavaScript modules(import/export)
を選択します。
React
を選択します。
TypeScript
を利用しているので、Yes
を選択します。
Browser
を選択します。
JSON
を選択します。
ReactやTypeScript向けのプラグインのインストールを求められるので、Yes
を選択します。
yarn
を選択します。
これでインストールが完了します。
インストール時の質問内容については、Setting up ESLINT in your JavaScript Project with VS Code で解説されています。
インストールが完了すると、新たに .eslintrc.json
が作成されます。
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"overrides": [],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {}
}
また、package.json
の devDependencies
には、以下の4つが追加されます。
"@typescript-eslint/eslint-plugin": "^5.52.0"
"@typescript-eslint/parser": "^5.52.0"
"eslint": "^8.34.0"
"eslint-plugin-react": "^7.32.2"
"devDependencies": {
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@typescript-eslint/eslint-plugin": "^5.52.0",
"@typescript-eslint/parser": "^5.52.0",
"@vitejs/plugin-react": "^3.1.0",
"eslint": "^8.34.0",
"eslint-plugin-react": "^7.32.2",
"typescript": "^4.9.3",
"vite": "^4.1.0"
}
Prettier
Prettierの設定をしていきます。
公式ドキュメントに沿って、以下のコマンドでインストールします。
yarn add --dev --exact prettier
次にプロジェクトルートに設定ファイルとして、.prettierrc.json
を作成します。
加えて、フォーマット対象外のファイルを指定するために .prettierignore
を作成します。
それぞれ設定したい内容がある場合、各ファイルに記載します。
eslint-config-prettierの追加
ここまでの手順でESLintとPrettierの導入はできました。
ただ、このままでは、ESLintとPrettierのフォーマットルールが競合してしまいます。
そのため、最後にその対策を行います。
Prettierの公式ドキュメントには、フォーマットはPrettierを、バグ検知はリンターを使うということが記載してあります。
use Prettier for formatting and linters for catching bugs!
(Prettier vs. Linters)
したがって、ESLintのフォーマット機能を無効にします。
方法は簡単で eslint-config-prettier を利用します。
まず以下のコマンドでインストールします。
yarn add --dev eslint-config-prettier
その後、.eslint.json
の extend
の最後に "prettier"
を追加すれば完了です!
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],