React + TypeScript (craete-react-appは未使用)の環境にeslintをインストールしたときのメモです。
セットアップが面倒かと思っていたのですが、npx eslint --init
するだけで必要なnpmパッケージも自動でインストールされるし非常に簡単でした。
インストール
インストールはeslint
だけ入れればOK。残りは次ステップのinitで自動でインストールしてくれる。
npm install eslint --save-dev
設定ファイルの作成
下記の設定で設定ファイルを作成
npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
@eslint/create-config
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ 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
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing eslint-plugin-react@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest
added 19 packages, changed 1 package, and audited 2121 packages in 11s
設定すると.eslintrc.js
が作成される
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
}
}
実行
下記のコマンドで実行できる
$ npx eslint ./src
GitHub Actionsで自動実行
下記の定義で、pushするたびにsrc/
の下を自動でチェックしてくれる。
uses: reviewdog/action-eslint@v1
より下の部分は、run: npx eslint ./src
でも問題なし。
reviewdog/action-eslint
を使うメリットは、エラーが出た時にソースの該当行にコメントの形でエラーを通知してくれるのでわかりやすくなる。
name: eslint
on: push
jobs:
eslint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- run: npm install
- uses: reviewdog/action-eslint@v1
with:
reporter: github-check
eslint_flags: 'src/'
こちらもおススメ