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: in TypeScript file in line：

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

和Parsing error: Unexpected token < in .vue file in line：

<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 { line.

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