TypeScript - ما الفرق بين "parser" و "parserOptions.parser" في إعدادات ESLint؟

لقد استخدمت الإعداد المسبق أدناه لـ 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"، لدينا [unknown]: خطأ في التحليل: رمز غير متوقع : في ملف TypeScript في السطر:

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

و خطأ في التحليل: رمز غير متوقع < في ملف .vue في السطر:

<template lang="pug">

إذا قمنا بحذف أو تعليق parserOptions.parser: "@typescript-eslint/parser",

• [unknown]: خطأ في التحليل: وجود رمز غير متوقع : سيبقى.
• ستختفي Parsing error: Unexpected token < لكن ستظهر Parsing error: Unexpected character '@' في سطر @Component export default class extends Vue {.

هل كلا من parser و @typescript-eslint/parser مطلوبان؟

الإجابة رقم 1

vue-eslint-parser هو المحلل الأساسي للاستخدام بدلاً من المحلل الافتراضي (espree). سيتعامل مع ملفات .vue SFC، وخاصة وسوم <template>.

ضمن هذا المحلل، لديك خيار مخصص لتحديد أي محلل يجب استخدامه لتحليل وكتابة <script> في ملفات .vue.

إذن باختصار، أنت تخبر eslint بتحليل ملفات .vue باستخدام vue-eslint-parser، وداخل هذا المحلل، باستخدام @typescript-eslint/parser لعناصر <script>.