create-react-appで作成したプロジェクトにESLintやPrettierなどの設定を行う
create-react-app
で作成したTypeScript
のプロジェクトにESLint
やPrettier
などの設定を行う方法を紹介します。
今回は、TypeScript
とReact
のルールに加え、airbnb
とprettier
のルールも設定します。
また、create-react-appで作成したプロジェクトにimportのaliasを設定するで紹介した、Import
のエイリアスの設定も行っています。
pacakge.json の修正
作成したプロジェクトのpackage.json
に以下の記載があると思いますが、これを削除します。
package.json
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
パッケージのインストール
たくさんありますが、以下のパッケージをインストールします。
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- eslint
- eslint-config-airbnb
- eslint-config-prettier
- eslint-import-resolver-alias
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-prettier
- eslint-plugin-react
- eslint-plugin-react-hooks
- prettier
$ npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb eslint-config-prettier eslint-import-resolver-alias eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier
ESLint の設定
以下のファイルをプロジェクトルート(package.json
ファイルと同じ場所)に作成します。
この通りでないといけないというわけではありませんので、ルールは必要に応じて適宜変更してください。
eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
jest: true,
},
extends: [
'eslint:recommended',
'airbnb',
'airbnb/hooks',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:jsx-a11y/recommended',
'plugin:prettier/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
sourceType: 'module',
},
plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }],
'react/react-in-jsx-scope': 'off',
'react/prop-types': 'off',
'react-hooks/rules-of-hooks': 'error',
'@typescript-eslint/no-shadow': ['error'],
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
'import/prefer-default-export': 'off',
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
},
settings: {
'import/resolver': {
alias: {
map: [['@', './src']],
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
};
prettier の設定
以下のファイルをプロジェクトルート(package.json
ファイルと同じ場所)に作成します。
こちらも、この通りでないといけないというわけではありませんので、ルールは必要に応じて適宜変更してください。
prettierrc.js
module.exports = {
printWidth: 100,
tabWidth: 2,
singleQuote: true,
semi: true,
trailingComma: "all",
};
vscode の設定
ESLintとPrettierの拡張機能をインストールし、設定ファイルに以下を追記します。
settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.formatOnType": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
以上で設定は完了です。