typescript - ESLint 配置中的 "parser"和 "parserOptions.parser"有什么区别？

Question

我长期使用下面的 TypeScript 和 Vue 预设。它有效，但我还没有理解每个选项，现在要理解它。第一:parser之间有什么区别？和 @typescript-eslint/parser ？

parser: vue-eslint-parser
parserOptions:
  parser: "@typescript-eslint/parser"
  sourceType: module
  project: tsconfig.json
  tsconfigRootDir: ./
  extraFileExtensions: [ ".vue" ]

env:
  es6: true
  browser: true
  node: true

plugins:
  - "@typescript-eslint"
  - vue

实验数据

没有parser: "vue-eslint-parser" , 我们有 [unknown]: Parsing error: Unexpected token :在 TypeScript 文件中:

(async function executeApplication(): Promise<void> {})()

和Parsing error: Unexpected token <在 .vue行文件:

<template lang="pug">

如果我们删除或注释掉parserOptions.parser: "@typescript-eslint/parser" ,

• [unknown]: Parsing error: Unexpected token :将保留。
• Parsing error: Unexpected token <会消失但是Parsing error: Unexpected character '@'将出现在 @Component export default class extends Vue {行。

两者都是 parser和 @typescript-eslint/parser是必需的吗？

Answer 1

vue-eslint-parser是要使用的主要解析器，而不是默认解析器 ( espree )。它将处理 .vue SFC 文件，尤其是 <template>标签。

在这个解析器中，您有一个自定义选项来指定使用哪个解析器来检查 <script> .vue 中的标签文件。

所以基本上，您是在告诉 eslint 解析 .vue带有 vue-eslint-parser 的文件, 并在此解析器中使用 @typescript-eslint/parser对于 <script>标签。