Open3
Vue+TSのESLint設定(ESLint v9, Flat Config版)
ピン留めされたアイテム
![bisquit_dev](https://res.cloudinary.com/zenn/image/fetch/s--Fp3gKF0q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/6b49245470.jpeg)
色々調べた結果、最小構成は以下でok。
(2024/6/25現在、js, ts, vueプラグインいずれもv9対応しているため、compatは不要)
eslint.config.js
import eslintJs from '@eslint/js';
import eslintTs from 'typescript-eslint';
import eslintPluginVue from 'eslint-plugin-vue';
/** @type {import('eslint').Linter.FlatConfig} */
export default [
// js
eslintJs.configs.recommended,
// ts
...eslintTs.configs.recommended,
// vue
...eslintPluginVue.configs['flat/recommended'],
{
files: ['**/*.vue'],
languageOptions: {
parserOptions: {
parser: {
ts: eslintTs.parser,
},
sourceType: 'module',
},
},
},
// 必要に応じて他のプラグインを追加
// v9対応, flat config対応していないプラグインの場合はcompatレイヤーでラップする
// ignores
{
ignores: ['**/some-ignore'],
},
];
また、VSCodeのESLint拡張もv9対応したため、特別な設定は不要
![bisquit_dev](https://res.cloudinary.com/zenn/image/fetch/s--Fp3gKF0q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/6b49245470.jpeg)
eslintJs.configs.recommended
- jsパーサー(
espree
)を設定 - js関連のルールをロード
- 推奨ルールの有効化
この設定を入れた時点で
- .js:
espree
でパースされlintされる - .ts:
espree
でパースされるが構文が解析できずエラーになる - .vue:
espree
でパースされるが構文が解析できずエラーになる
...eslintTs.configs.recommended
3つの設定を含む。
- base
- tsパーサー(
typescript-eslint/parser
)を設定 - ts関連のルールをロード
- tsパーサー(
- eslint-recommended
-
eslintJs.configs.recommended
が有効にするルールのうち、TSが言語レベルで処理するルールを無効にする(e.g.no-const-assign
は、TSではconst
の再アサインを言語レベルでエラーにするため不要) -
eslintJs.configs.recommended
が有効にしないルールでも、TSでは妥当なルールを有効にする(e.g.no-var
は、TSではlet/const
がvar
にトランスパイルされるため、var
を使う必要性が無い)
-
- recommended
- 推奨ルールを有効化
- jsと重複するルールを無効化(e.g.
no-unused-vars
)
この設定を入れた時点で
- .js:
typescript-eslint/parser
でパースされlintされる - .ts:
typescript-eslint/parser
でパースされlintされる - .vue:
typescript-eslint/parser
でパースされるが構文が解析できずエラーになる
...eslintPluginVue.configs['flat/recommended']
複数の設定を含む。
- vueパーサー(
vue-eslint-parser
)を設定 - vue関連のルールをロード
- 推奨ルールの有効化
<script lang="ts">
の場合はtypescript-eslint/parser
を使うように追加の設定を書く。
{
files: ['**/*.vue'],
languageOptions: {
parserOptions: {
parser: {
ts: eslintTs.parser,
},
sourceType: 'module',
},
},
},
この設定を入れると
- .js:
typescript-eslint/parser
でパースされlintされる - .ts:
typescript-eslint/parser
でパースされlintされる - .vue:
vue-eslint-parser
でパースされlintされる
![bisquit_dev](https://res.cloudinary.com/zenn/image/fetch/s--Fp3gKF0q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/6b49245470.jpeg)
対応してないプラグインを使う場合は、以下の2つを使用する。
- flat config対応していない場合
- -> FlatCompat
- Flat config互換のフォーマットに変換する
- v9対応していない場合
- . https://github.com/eslint/rewrite/tree/main/packages/compat
- ESLint v8用のパッケージをESLint v9互換にパッチする
- ※ したがってESLint 8を使ってる場合は不要