Linting

⚠️注意: TSLint は現在メンテナンス中であり、代わりに ESLint を使用する必要があります。TSLint のヒントに興味がある場合は、@azdanov からのこの PR を確認してください。このセクションの残りの部分は、ESLint に焦点を当てています。 このツールを使用して、TSLint を ESlint に変換できます。

⚠️これは進化するトピックです。 typescript-eslint-parser は廃止され、ESLint コミュニティ内で typescript-eslint の作業が最近開始されました。ESLint を TSLint との完全な同等性と相互運用性に引き上げます。

https://github.com/typescript-eslint/typescript-eslint で TypeScript + ESLint ドキュメントに従ってください。

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint

package.json に lint スクリプトを追加します。

  "scripts": {
    "lint": "eslint 'src/**/*.ts'"
  },

さらに、適切な .eslintrc.js（コメントを追加できるように、ここで .json ではなく .js を使用）

module.exports = {
  env: {
    es6: true,
    node: true,
    jest: true,
  },
  extends: "eslint:recommended",
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: "module",
  },
  rules: {
    indent: ["error", 2],
    "linebreak-style": ["error", "unix"],
    quotes: ["error", "single"],
    "no-console": "warn",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      { vars: "all", args: "after-used", ignoreRestSiblings: false },
    ],
    "@typescript-eslint/explicit-function-return-type": "warn", // Consider using explicit annotations for object literals and function return types even when they can be inferred.
    "no-empty": "warn",
  },
};

これはほとんどが tsdx PR から取られています。これは ライブラリ向けです。

アプリに必要になる可能性のあるオプションを含めた、検討すべき追加の .eslintrc.json オプション

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react",
    "plugin:prettier/recommended",
    "plugin:jest/recommended",
    "plugin:unicorn/recommended"
  ],
  "plugins": ["prettier", "jest", "unicorn"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "jest": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "parser": "typescript-eslint-parser",
      "rules": {
        "no-undef": "off"
      }
    }
  ]
}

@robertcoopercode による「Typescript プロジェクトでの ESLint と Prettier の使用」も優れたリソースです。

Wes Bos も eslint+prettier 構成に対する TypeScript サポートに取り組んでいます。

Prettier に関する情報を探している場合は、Prettier ガイドを参照してください。