VSCodeでESLint+@typescript-eslint+Prettierを導入する


前置き

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",
"env": { "browser": true, "node": true, "es6": true },
"parserOptions": {
"sourceType": "module",
"project": "./tsconfig.json"
},
"rules": {
// 適当なルール
}
}

設定が面倒なので"plugin:@typescript-eslint/recommended"を使用しました。

TSLintのデフォルト設定と@typescript-eslint/recommendedでは設定が結構違うので、必要であれば、TSLintとの対照表を確認しながら設定しましょう。

@typescript-eslint/eslint-plugin-tslintを追加することでtslintの設定も使用できます。


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