解决历程:
-
在Vue3中, script 标签支持 setup 属性,声明了这个属性之后script标签会支持一些新语法,即该属性是单文件组件 (SFC) 中使用组合式 API 的编译时语法糖,详情见官方文档。
但在其中使用 defineProps 函数时,eslint语法会检测到没有引入
-
然后我们可以新建一个 .eslintrc.js文件 (如果根目录下没有这个文件的话),
然后在里面声明以下内容解决这个问题:
module.exports = {
root: true,
env: {
node: true,
'vue/setup-compiler-macros': true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
//在rules中添加自定义规则
//关闭组件命名规则
"vue/multi-word-component-names": "off",
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
注意,也有可能是需要更新 eslint-plugin-vue 的版本,指令如下:
npm update [email protected]
或者直接在 package.json 文件中更改版本号,再执行 npm i
指令
-
有了这个文件之后,defineProps 是不报错了,但每次运行都提示我
Parsing error: Cannot find module '@babel/eslint-parser'
既然缺少这个包,那我就安装这个包呗,于是就输入对应指令:
npm install eslint babel-eslint -g
完事儿再一运行,好了,看起来没问题。但是我随便更改一个字符,自动保存后它自动编译,就又报这个错误,难道我每次运行都要重新按一遍这个 @babel/eslint-parser 吗?
这不合理!
经过百般排查,发现是上面的 .eslintrc.js 文件的锅:
它的优先级比 package.json 里的 “eslintConfig” 配置项高,如果它们二者同时存在,则只执行.eslintrc.js,而这个js文件里面的
parserOptions
配置项里多了一句:
给他注释掉就可以完美运行了!
两个解决方法:
- 如果根目录下没有 .eslintrc.js 这个文件的话需要自己创建一个,然后在里面输入以下内容:
module.exports = {
root: true,
env: {
node: true,
'vue/setup-compiler-macros': true
},
'extends': [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended"
],
parserOptions: {
// parser: '@babel/eslint-parser',
"ecmaVersion": 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
//在rules中添加自定义规则
//关闭组件命名规则
"vue/multi-word-component-names": "off",
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
-
直接关闭 eslint 检测,在根目录下的 vue.config.js 中(同样的,如果没有就新建一个)添加配置项:
lintOnSave: false //关闭eslint检查
但是直接关闭的话,一开始创建项目的时候不选eslint就好了!!!