TypeScript: eslintをインストールする

カテゴリ: 未分類 | タグ: , ,

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/'

Amazonでおトクに買い物する方法
AmazonチャージでポイントGET


Amazonは買いもの前にAmazonギフト券をチャージしてポイントをゲットしないと損!

こちらもおススメ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です