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

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

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

What the difference between "parser" and "parserOptions.parser" in ESLint config?

typescript

vue.js

eslint

typescript-eslint

typescript-eslintparser

实验数据