TypeScript プロジェクトで ESLint を設定する
ほぼ公式の手順通りですが、 TypeScript プロジェクトに ESLint を設定した際の手順を残しておきます。
ESLint のインストール
$ npm install eslint --save-dev
+ eslint@7.10.0
ESLint のセットアップ
init
init
コマンドで対話形式でセットアップが可能です。
$ npx eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:
eslint-plugin-react@^7.20.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2 eslint-plugin-jsx-a11y@^6.3.0 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0 @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
途中で TypeScript を使うかどうか聞かれるので、 Yes と答えると @typescript-eslint/eslint-plugin
などの必要なパッケージがインストール対象に追加されます。
成果物ファイルとして .eslintrc.js
が出力されます。内容は以下です。
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'react',
'@typescript-eslint',
],
rules: {
},
};
eslintignore
また、 .eslintignore
を手動で作成して無視するファイル群を指定します。
node_modules
や .
から始まるファイルやフォルダは自動的に無視されます。
TypeScript のルール追加
init
コマンドで TypeScript を指定したのでここまでやって欲しいですが、 TypeScript 用のルールの追加を行ないます。
extends: [
'plugin:react/recommended',
'airbnb',
+ 'plugin:@typescript-eslint/recommended',
],
parser: '@typescript-eslint/parser',
ESLint の実行
lint 対象を指定して実行します。
$ npx eslint .
# 自動で fix する時
$ npx eslint --fix .
細かなルールの調整は .eslintrc.js
の rules
に追加します。