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

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.