8

I am developing a sample app using Vue 3 and Typescript. Specifically, I am using the new Vue v3.2 setup option in the section of the Vue SFC. Vue docs advise me to add "vue/setup-compiler-macros" to the env secyion of the eslintrc.js file which was working. But I am now getting an error

Syntax Error: Error: .eslintrc.js:
        Environment key "vue/setup-compiler-macros" is unknown
    at Array.forEach (<anonymous>)

for a while this seemed to disappear if I restarted VS Code (not a great workaround, I admit), but now even this does not work. The error occurs when I save a file and the project is compiled. I appear to be using VS Code extension - ESLint v2.2.2.

eslintrc.js:

  module.exports = {
  root: true,
  env: {
    'vue/setup-compiler-macros': true,
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
}

Any ideas would be greatly appreciated.

maxweld
  • 229
  • 2
  • 15
  • Additional info: ```"devDependencies": { "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "^4.5.15", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-typescript": "^7.0.0", "apollo": "^2.33.7", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "typescript": "~4.1.5" }``` – maxweld Nov 01 '21 at 14:17

4 Answers4

12

You need to upgrade eslint-plugin-vue to version 8 which added it according to its release notes. Se also https://github.com/vuejs/eslint-plugin-vue/pull/1685

snoob dogg
  • 2,491
  • 3
  • 31
  • 54
Alexander Hartmaier
  • 2,178
  • 12
  • 21
11

I had the same problem, solved by config

  globals: {
    defineProps: "readonly",
    defineEmits: "readonly"
  }

the offical guide is here, I dont't know the 'vue/setup-compiler-macros': true, why not work

Supun Praneeth
  • 3,087
  • 2
  • 30
  • 33
Jd Li
  • 175
  • 1
  • 5
  • Thanks - that works. And I have raised a bug report for eslinter as well. – maxweld Nov 02 '21 at 08:22
  • 1
    `'vue/setup-compiler-macros': true` is work, you need to add this line to env, not to rules. – n4ks Feb 17 '22 at 12:07
  • 1
    Per another answer, you need `eslint-plugin-vue` `^8.0.0` for that `env` flag to work. Also for this answer's solution, you may also want to add `withDefaults` and any other of the macros you're using. – V. Rubinetti Apr 02 '22 at 22:33
2

You can check this answer which helped me properly solve this problem.

You basically need to:

  1. Remove babel-eslint by running npm uni -D babel-eslint on your terminal.
  2. Install @babel/eslint-parser by running npm i -D @babel/eslint-parser on your terminal.
  3. Update the env line in your ESLint config (could be inside .eslintrc.js, .eslintrc.json or package.json) with the following:
  env: {
    node: true,
    'vue/setup-compiler-macros': true,
  },
  1. Update the parserOptions line in your ESLint config with the following:
  parserOptions: {
    parser: '@babel/eslint-parser',
    ecmaVersion: 2018,
    requireConfigFile: false, // This will prevent Babel from looking for a config file you possibly don’t have or need.
  },
  1. If there’s a parser line outside parserOptions, you can simply remove it to avoid conflicts.
Rodrigo D'Agostino
  • 671
  • 5
  • 22
1

Creating an eslintrc.is file with the configurations didn't work for me.

I fixed this error without running any upgrades, all I did was add the "vue/setup-compiler-macros: true" in the eslintConfig part of the package.json file

That is:

"eslintConfig": {
    ...
    "env": {
        node: true,
        "vue/setup-compiler-macros": true
    }
}
Alex Fuentes
  • 61
  • 2
  • 5
Ibrahim Abdulhameed
  • 11
  • 2