'What is causing Error: .eslintrc.js: Environment key "vue/setup-compiler-macros" is unknown

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.

vue.jseslinteslintrc


Solution 1:[1]

I have 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

Solution 2:[2]

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

Solution 3:[3]

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.

Solution 4:[4]

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
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jd Li
Solution 2 Alexander Hartmaier
Solution 3
Solution 4 Alex Fuentes

Related Questions