Vue3 + TypeScript環境でESLintのflat configを試す

Vueアプリはcreate-viteでドノーマルなTypeScriptプロジェクトを作成

yarn create vite

yarn create vite
yarn create v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@5.2.3" with binaries:
      - create-vite
      - cva
✔ Project name: … eslint-flat-config
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

gn5r 14日前

Getting Started with ESLintよりコマンドから設定ファイルを作成できるようなのでそれを実行

npm init @eslint/config

npm init @eslint/config
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · typescript
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-vue
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn

gn5r 14日前に更新

コマンド実行後、ルートディレクトリにeslint.config.jsが作成される

tree -L 1
.
├── README.md
├── eslint.config.js
├── index.html
├── node_modules
├── package.json
├── public
├── src
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock

eslint.config.jsの中身は以下

eslint.config.js

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";


export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
];

gn5r 14日前に更新

Command Line Interface Referenceを見るとCLIオプションから--extや--ignore-pathなどが使えない模様
--extについては、代替としてprettierやlint-stagedなどのようにワイルドカードで拡張子指定が出来るっぽい

eslint **/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,vue}

--ignore-pathはeslint.config.js内でignoresを設定するらしい

eslint.config.js

export default [
  { ignores: ["mode_modules", "dist"] }
];

gn5r 14日前

package.jsonのscriptsにlintを追加

...
"scripts": {
    "lint": "eslint **/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,vue}"
},

lintを実行

yarn run lint

yarn run lint
yarn run v1.22.22
$ eslint **/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,vue}

/home/gn5r/workspaces/practice/boot-rest-security/eslint-flat-config/src/components/HelloWorld.vue
  4:29  error  Parsing error: Unexpected token )

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

gn5r 14日前に更新

src/components/HelloWorld.vueの4行目でエラー

src/components/HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>() //ここでエラー

const count = ref(0)
</script>

gn5r 14日前に更新

scriptが解釈できていないっぽいので@vue/eslint-config-typescriptを追加
また、flat configに対応していないpluginなどを利用する場合は@eslint/eslintrcを使う必要があるらしい

yarn add -D @vue/eslint-config-typescript @eslint/eslintrc

修正後のeslint.config.js

eslint.config.js

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import { FlatCompat } from "@eslint/eslintrc"; // 追加

const compat = new FlatCompat(); // 追加

export default [
  { ignores: ["mode_modules", "dist"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  ...compat.extends("@vue/typescript/recommended"), // 追加
];

gn5r 14日前

再度lintを実行

yarn run lint

yarn run lint
yarn run v1.22.22
$ eslint **/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,vue}
Done in 1.48s.

このスクラップは14日前にクローズされました