ESLint 配置中的“parser”和“parserOptions.parser”有什么区别？

问题描述

我长期以来一直在为 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？

解决方法

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

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

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