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"，我们在TypeScript 文件中有[unknown]: Parsing error: Unexpected token :：

(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> 标签。

在此解析器中，您有一个自定义选项来指定使用哪个解析器对 .vue 文件中的 <script> 标记进行 lint。

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