Edited at

VSCodeでESLint+@typescript-eslint+Prettierを導入する(v2.0.0修正版)


前置き

TypeScriptチームがESLintのTypeScript対応を強化するとの発表がありました。

これまでTypeScriptといえばTSLintでしたが、これからはESLintがメインになっていくと思われます。

そもそもESLintってなに? という方はこちら

2019/08/25追記: まだ発展途上なので、無理にTSLintから乗り換える必要は全く無いです。


インストール


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:@typescript-eslint/eslint-recommended",

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



2019/08/25追記

パーサー部分の構造に問題があり、"project": "./tsconfig.json"を指定するとパフォーマンスがかなり悪化する模様。

そのため上記オプションと"plugin:@typescript-eslint/recommended-requiring-type-checking"を外しました。@yumetodoさんありがとうございます。


  • "plugin:@typescript-eslint/recommended"


    • 型を必要としない基本設定を詰め込んだもの



  • "plugin:@typescript-eslint/eslint-recommended"


    • TypeScriptでチェックされる項目を除外する設定



  • "plugin:@typescript-eslint/recommended-requiring-type-checking"


    • 型が必要な設定


    • "parserOptions""project"と一緒に外しました。




個別設定例


.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の設定も使用できます。

v2.0.0で一部ルールの記述方法が変わったので、詳細はこちらを確認しましょう。


VSCode

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


settings.json

{

// "editor.formatOnSave": false,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{"language": "typescript", "autoFix": true },
{"language": "typescriptreact", "autoFix": true }
]
}

editor.formatOnSave: trueは自動整形が衝突するので指定しないでください。

eslint.validateでtypescriptを指定してください。

reactを使用する場合typescriptreactも指定します。


参考

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

https://github.com/typescript-eslint/typescript-eslint/releases