Next.jsにTSLintを導入する手順

Next.jsにTSLintを導入する手順になります。

TSLintをインストール

npm

npm install --save-dev tslint tslint-config-airbnb
npm install --save-dev tslint-react-hooks　//react hookを使用する場合

yarn

yarn add --dev tslint tslint-config-airbnb
yarn add --dev tslint-react-hooks　//react hookを使用する場合

まずは、Next.jsのプロジェクトにTSLintをインストールします。

package.jsonに追記

package.json

 "scripts": {
    "tslint": "tslint -p . -c tslint.json"
  }

tslint.jsonを追加

tslint.json

{
  "extends": ["tslint-config-airbnb", "tslint-react-hooks"],
  "rules": {
    "import-name": false,
    "align": false,
    "react-hooks-nesting": true,
    "semicolon": false,
    "trailing-comma": false,
    "function-name": [
      true,
      {
        "function-regex": "^[a-zA-Z$][\\w\\d]+$",
        "method-regex": "^[a-z$][\\w\\d]+$",
        "private-method-regex": "^[a-z$][\\w\\d]+$",
        "protected-method-regex": "^[a-z$][\\w\\d]+$",
        "static-method-regex": "^[a-z$][\\w\\d]+$"
      }
    ],
    "variable-name": {
      "options": [
        "ban-keywords",
        "check-format",
        "allow-leading-underscore",
        "allow-pascal-case"
      ]
    }
  }
}

tslint.jsonを追加し、TSLintの設定を行います。

コードを確認する

npm run tslint
yarn tslint

TSLintの設定が完了したら、上記のコマンドでコードを確認できます。

参考資料