Help us understand the problem. What is going on with this article?

VSCodeでESLint+typescript-eslint+Prettierを導入する v3.0.0

前置き

TypeScriptチームがESLintのTypeScript対応を強化するとの発表がありました。
これまでTypeScriptといえばTSLintでしたが、これからはESLintがメインになっていくと思われます。
そもそもESLintってなに? という方はこちら

インストール

eslint

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

prettier

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

基本設定

.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "env": { "browser": true, "node": true, "es6": true },
  "rules": {
    // 適当なルール
  }
}

型情報が必要なルールを使用する場合(パフォーマンス注意)

.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "env": { "browser": true, "node": true, "es6": true },
  "rules": {
    // 適当なルール
  }
}
  • "plugin:@typescript-eslint/recommended"
    • 型を必要としない基本ルールを詰め込んだもの
  • "plugin:@typescript-eslint/recommended-requiring-type-checking"
    • 型情報が必要な基本ルールを詰め込んだもの
    • TypeScriptのビルド時間分が増えるので、パフォーマンスが気になる場合外す
  • "plugin:@typescript-eslint/eslint-recommended"
    • TypeScriptでチェックされる項目を除外する設定
    • recommendedとrecommended-requiring-type-checkingに含まれているので、どちらかを使うなら記述する必要は無いです

個別設定例

.eslintrc.json
{
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/array-type": [
      "error",
      {
        "default": "array-simple"
      }
    ]
  }
}

必要であれば、TSLintとの対照表を確認しながら設定しましょう。
@typescript-eslint/eslint-plugin-tslintを追加することでtslintの設定も使用できます。

ルールの詳細はこちらを確認しましょう。

VSCode

VS Code ESLint extensionをインストールしてください。

settings.json
{
  // "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

editor.formatOnSave: trueは自動整形が衝突するので指定しないでください。
VS Code ESLint extension2.0.4からeslint.validateは不要になりました。

参考

https://teppeis.hatenablog.com/entry/2019/02/typescript-eslint
https://github.com/typescript-eslint/typescript-eslint/releases

madono
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした