Как настроить ESlint для приложения JS, которое импортирует модули TypeScript - PullRequest
Новая
       31

Как настроить ESlint для приложения JS, которое импортирует модули TypeScript

0 голосов
/ 05 октября 2018

Цель

У меня есть приложение, которое я хотел бы постепенно перейти на TypeScript.Я хотел бы иметь возможность:

  • импортировать *.ts файлы в отдельные компоненты Vue
  • импортировать *.ts файлы в обычные *.js файлы.
  • импорт *.js файлы в *.ts файлах

Мои настройки

Приложение было настроено с использованием vue-cli 3.x.Я использую Airbnb ESLint config.

Большая часть приложения написана на JS, но все вновь добавленные модули написаны на TypeScript.

My .eslint.js config, до добавления TypeScript было: 

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

После установки модулей @vue/cli-plugin-typescript, typescript и @vue/eslint-config-typescript (с помощью команды vue add @vue/typescript) я начал получать ошибки ESLint после импорта файлов *.ts в файлы *.js. Это были только ошибки ESLint, а не ошибки компиляции TypeScript или Babel .

Поэтому я изменил конфигурацию .eslint.js следующим образом: 

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  overrides: [
    {
      files: [
        '**/*.js',
        '**/*.vue'
      ],
      parserOptions: {
        parser: 'babel-eslint',
      },
    },
    {
      files: [
        '**/*.ts'
      ],
      parserOptions: {
        parser: 'typescript-eslint-parser',
      },
    }
  ],
};

У меня естьдобавлены override разделы для применения разных парсеров в зависимости от расширения файла.

Мой tsconfig.json файл: 

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Так что это стандартный tsconfig.json, который генерирует vue-cli.Единственное, что я изменил, это allowJs: true - благодаря этому я могу импортировать JS-модули, у которых нет d.ts определений типов - что облегчает миграцию.

Вопрос

Кажется, все настроено правильно, но иногда я получаю ошибки ESLint.Похоже, иногда babel-eslint вместо typescript-eslint-parser используется для линкования *.ts файлов.Я не знаю, как воспроизвести его, но я почти уверен, что это происходит, когда я импортирую *.ts файлы в *.vue файлы.Ошибки обычно исчезают, когда я останавливаюсь и снова запускаю Webpack (с yarn serve).

...