Vue3、Typescript 和 Eslint 引发:“解析错误:'}'预期" [英] Vue3, Typescript and Eslint raise: "Parsing error: '}' expected"
问题描述
我用Vue3和Typescript写代码,这是App.vue
的代码,是根组件:
<router-view v-if="inited";/><div v-else>启动...
</模板><script lang="ts">从'./router'导入路由器;从'vue'导入{defineComponent};从 'vuex' 导入 { useStore };从'./store'导入{键};const store = useStore(key);导出默认defineComponent({数据() {返回{初始化:store.state.inited};},});
但是 eslint
告诉我:
/home/peter/proj/skogkatt-next/src/App.vue17:9 错误解析错误:'}' 预期
我在谷歌等上使用了很多时间,但仍然找不到有用的解决方案.这是 package.json
中 eslint 的配置:
{//...eslintConfig":{根":真,环境":{节点":真},解析器":@typescript-eslint/parser",插件":[@typescript-eslint"],扩展":[插件:vue/vue3-essential",eslint:推荐",@vue/打字稿",插件:@typescript-eslint/eslint-recommended",插件:@typescript-eslint/推荐"],解析器选项":{解析器":@typescript-eslint/parser"},规则":{@typescript-eslint/camelcase":关闭"}},//...}
我不确定哪个配置有用或没有用,所以我把它们贴出来.谢谢.
该错误是由"plugin:@typescript-eslint/recommended"
引起的,它设置了顶级解析器
,与 Vue 的 vue-eslint-parser
发生冲突.此外,您自己的配置重复了插件中已经设置的顶级 parser
设置,也应该删除.
Vue 的 TypeScript 项目的 ESLint 配置 解决了这个问题问题,所以考虑复制它:
module.exports = {插件:['@typescript-eslint'],//先决条件`eslint-plugin-vue`,被扩展,设置//根属性 `parser` 到 `'vue-eslint-parser'`,用于代码解析,//依次委托给解析器,在`parserOptions.parser` 中指定://https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error解析器选项:{解析器:require.resolve('@typescript-eslint/parser'),extraFileExtensions: ['.vue'],ecma特征:{jsx: 真的}},扩展:['插件:@typescript-eslint/eslint-推荐'],覆盖:[{文件:['*.ts', '*.tsx'],规则:{//核心 'no-unused-vars' 规则(在 eslint:recommeded 规则集中)//不适用于类型定义'no-unused-vars': '关闭',}}]}
另一种选择是使用 Vue CLI 生成一个 TypeScript 项目,并复制生成的 ESLint 配置.
I am writing code by Vue3 and Typescript, and this is the code of App.vue
, which is the root component:
<template>
<router-view v-if="inited" />
<div v-else>
Initing...
</div>
</template>
<script lang="ts">
import router from './router';
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
import { key } from './store';
const store = useStore(key);
export default defineComponent({
data() {
return { inited: store.state.inited };
},
});
</script>
But the eslint
tell me:
/home/peter/proj/skogkatt-next/src/App.vue
17:9 error Parsing error: '}' expected
I use many time on Google and so on, but still cannot find a useful solution. This is the config of eslint in package.json
:
{
// ...
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"parserOptions": {
"parser": "@typescript-eslint/parser"
},
"rules": {
"@typescript-eslint/camelcase": "off"
}
},
// ...
}
I am not sure which config is useful or not, so I post those out. Thanks.
The error is caused by "plugin:@typescript-eslint/recommended"
, which sets the top-level parser
, which collides with Vue's vue-eslint-parser
. In addition, your own config duplicates the top-level parser
setting already set in the plugin, and should also be removed.
Vue's ESLint config for TypeScript projects addresses this problem, so consider copying it:
module.exports = {
plugins: ['@typescript-eslint'],
// Prerequisite `eslint-plugin-vue`, being extended, sets
// root property `parser` to `'vue-eslint-parser'`, which, for code parsing,
// in turn delegates to the parser, specified in `parserOptions.parser`:
// https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error
parserOptions: {
parser: require.resolve('@typescript-eslint/parser'),
extraFileExtensions: ['.vue'],
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:@typescript-eslint/eslint-recommended'
],
overrides: [{
files: ['*.ts', '*.tsx'],
rules: {
// The core 'no-unused-vars' rules (in the eslint:recommeded ruleset)
// does not work with type definitions
'no-unused-vars': 'off',
}
}]
}
Another option is to generate a TypeScript project with Vue CLI, and copying the resulting ESLint config.
这篇关于Vue3、Typescript 和 Eslint 引发:“解析错误:'}'预期"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!