Vue/Nuxtのlinter/formatterにxoを導入する際の注意点

xoを導入する背景についてはこちらに書きました。
https://blog.howtelevision.co.jp/entry/2023/12/02/153945

なぜか以下の通りにextendsの設定を書いてもうまくいかなかったので共有
https://github.com/ChocPanda/eslint-config-xo-vue#tip

Issue起票しました
https://github.com/ChocPanda/eslint-config-xo-vue/issues/131

Reactの場合との差分をメモ

$ yarn add --dev xo eslint-config-xo-vue eslint-plugin-vue

.vscode/settings.json

{
  "xo.format.enable": true,
  "[javascript]": {
    "editor.defaultFormatter": "samverschueren.linter-xo"
  },
  "[typescript]": {
    "editor.defaultFormatter": "samverschueren.linter-xo"
  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "samverschueren.linter-xo"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "samverschueren.linter-xo"
-  },
+  "[vue]": {
+    "editor.defaultFormatter": "samverschueren.linter-xo"
+  },
+  "xo.validate": ["javascript", "typescript", "vue"]
}

Parsing error with Top Level await の解決のためにparserOptionsを指定する
https://eslint.vuejs.org/user-guide/#using-eslint-v8-x

xo.config.js

module.exports = {
  prettier: true,
  space: true,
+  extends: ['plugin:vue/recommended'],
+  extensions: ['ts', 'vue'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
};