9

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.

Improve this question
1
  • 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" } Commented Nov 1, 2021 at 14:17

4 Answers 4

Reset to default
13

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Doing this and adding the "vue/setup-compiler-macros": true flag worked for me.
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

Improve this answer

3 Comments

Thanks - that works. And I have raised a bug report for eslinter as well.
'vue/setup-compiler-macros': true is work, you need to add this line to env, not to rules.
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.
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.
Improve this answer

Comments

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
    }
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.