Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
207
Help us understand the problem. What is going on with this article?
@madono

VSCodeでESLint+typescript-eslint+Prettierを導入する(2020/11/14修正)

追記: eslint-plugin-prettierは非推奨なので内容を修正しました。prettierはeslintを通して実行するよりも、VSCode側から実行するほうが良いです。

前置き

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

基本設定

.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "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",
    "prettier",
    "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-module-boundary-types": "off",
    "@typescript-eslint/array-type": [
      "error",
      {
        "default": "array-simple"
      }
    ]
  }
}

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

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

VSCode

ESLint拡張機能Prettier拡張機能をインストールしてください。

settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": 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

207
Help us understand the problem. What is going on with this article?
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
madono

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
207
Help us understand the problem. What is going on with this article?