ESLint дилемма "Определено, но никогда не использовалось" VS "Не удается найти имя" при использовании импорта для набора текста

Question

Я только что столкнулся с трудной дилеммой, и мне нужна ваша помощь, чтобы знать, что нужно сделать. Я использую

$ yarn lint -v
yarn run v1.22.4
$ eslint . -v
v6.8.0

С плагинами vue и @typescript-eslint, и у меня есть это в файле .ts:

import Vue, { VNode } from 'vue';

export default Vue.extend ({
  render(createElement): VNode {
    return createElement('div',
      {},
      'Simple reproducible example'
    );
  }
});

Я получаю ошибку:

 error  in ./src/components/Demo.ts

Module Error (from ./node_modules/eslint-loader/index.js):

/full/path/to/src/components/Demo.ts
  1:15  error  'VNode' is defined but never used  no-unused-vars

И веб-приложение, обслуживаемое yarn serve (vue-cli), показывает ту же ошибку, что делает его несправедливым. Использование импорта в typehint, похоже, не считается «использованием» его. Поэтому я только что удалил импорт, но затем у меня появляется эта ошибка:

ERROR in /full/path/to/src/components/Demo.ts(302,26):
4:26 Cannot find name 'VNode'.
    2 | 
    3 | export default Vue.extend ({
  > 4 |   render(createElement): VNode {
      |                          ^
    5 |     return createElement('div',
    6 |       {},
    7 |       'Simple reproducible example'

Что кажется как-то лучше, потому что, по крайней мере, я могу ориентироваться в веб-приложении, обслуживаемом службой пряжи. Любая идея, чтобы справиться с этой ошибкой правильным способом?

РЕДАКТИРОВАТЬ: .eslintrc.js содержимое файла

module.exports = {
  'env': {
    'browser': true,
    'es6': true,
    'node': true
  },
  'extends': [
    'eslint:recommended',
    'plugin:vue/essential',
    'plugin:@typescript-eslint/eslint-recommended'
  ],
  'globals': {
    'Atomics': 'readonly',
    'SharedArrayBuffer': 'readonly'
  },
  'parserOptions': {
    'ecmaVersion': 2018,
    'parser': '@typescript-eslint/parser',
    'sourceType': 'module'
  },
  'plugins': [
    'vue',
    '@typescript-eslint'
  ],
  'rules': {
    'indent': [
      'error',
      2
    ],
    'linebreak-style': [
      'error',
      'unix'
    ],
    'quotes': [
      'error',
      'single'
    ],
    'semi': [
      'error',
      'always'
    ]
  }
};

Answer 1

Убедитесь, что для парсера eslint настроено использование @typescript-eslint/parser вместо espree. Typescript анализируется не так, как обычный Javascript, и не все правила lint, применимые к коду, написанному в Javascript, применяются к этому в Typescript.

Раздел конфигурации @ typescript-eslint / typescript-eslint project предоставляет образец .eslintrc.js файла, с которого вы можете начать.

Вы можете расширить эту конфигурацию с помощью плагинов для vue.

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/recommended',
    '@vue/standard',
    '@vue/typescript'
  ],
};