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

Question

I has used below preset for TypeScript and Vue for a long time. It works, but I has not understood each option and now going to understand it. First: what the difference between parser and @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

Experimental data

Without parser: "vue-eslint-parser" , we have [unknown]: Parsing error: Unexpected token: in TypeScript file in line:

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

and Parsing error: Unexpected token < in .vue file in line:

<template lang="pug">

If we delete or comment out parserOptions.parser: "@typescript-eslint/parser" ,

• [unknown]: Parsing error: Unexpected token: will remain.
• Parsing error: Unexpected token < will disappear but Parsing error: Unexpected character '@' will appear in @Component export default class extends Vue { line.

Both parser and @typescript-eslint/parser are required?

Answer 1

vue-eslint-parser is the main parser to use instead of the default one ( espree ). It will handle.vue SFC files, especially the <template> tags.

Within this parser, you have a custom option to specify which parser to use to lint the <script> tag in the .vue files.

So basically, you're telling eslint to parse .vue files with vue-eslint-parser , and within this parser, to use @typescript-eslint/parser for the <script> tags.