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> {})()

在.vue文件的以下行中出现了Parsing error: Unexpected token <:

<template lang="pug">

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

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

那么，parser 和 @typescript-eslint/parser 都是必需的吗？

- Takeshi Tokugawa YD

Answer 1

vue-eslint-parser是用来替代默认解析器(espree)的主要解析器。它将处理.vue单文件组件，特别是<template>标签。

在这个解析器中，你可以使用自定义选项来指定在.vue文件中lint <script>标签时要使用哪个解析器。

基本上，你告诉eslint使用vue-eslint-parser解析.vue文件，并在这个解析器内部使用@typescript-eslint/parser来处理<script>标签。

- Kapcash

---

谢谢您的回答。那么，parserOptions.parser 是指“<script> 部分的单独解析器”吗？ - Takeshi Tokugawa YD

@TakesiTokugawaYD 没错！ :) - Kapcash

我已经接受并点赞了你的出色答案。 - Takeshi Tokugawa YD

这个答案对我有所帮助，虽然我的问题有些不同。我配置了"@typescript-eslint/parser"作为主解析器，但是我正在为一些普通的JavaScript设置一个"overrides"部分。这是我发现默认解析器是"espree"的第一个地方，所以现在我知道该将覆盖"parser"设置为什么，而不必明确地撤消我关闭基本ESLint规则以使用与TypeScript相关的规则的所有情况。 - kshetline