eslint.md

ESLint

ESLint существовал для линтинга JavaScript, но теперь он также становится де-факто линтером для TypeScript, благодаря сотрудничеству между двумя командами.

Установка

Чтобы настроить ESLint для TypeScript, вам потребуются следующие пакеты:

npm i eslint eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

ПОДСКАЗКА: eslint называет пакеты, содержащие правила для линтера - "plugin"

• eslint : Ядро eslint
• eslint-plugin-react : Для правил react, предоставленных eslint. Список поддерживаемых правил
• @typescript-eslint/parse : Чтобы позволить eslint понять ts / tsx файлы
• @typescript-eslint/eslint-plugin : Для правил TypeScript. Список поддерживаемых правил

Как видите, есть два пакета eslint (для использования с js или ts) и два пакета @typescript-eslint (для использования с ts). Так что издержки для TypeScript не так уж велики.

Конфиг

Создайте .eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules:  {
    // Перезаписать правила, указанные в расширенных конфигах, например:
    // "@typescript-eslint/explicit-function-return-type": "off",
  }
}

Запуск

В вашем package.json добавьте в scripts:

{
  "scripts": {
    "lint": "eslint \"src/**\""
  }
}

Теперь вы можете выполнить npm run lint для проверки.

Настройка VSCode

• Установите расширение https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Добавьте в settings.json:

"eslint.validate":  [
  "javascript",
  "javascriptreact",
  {"language":  "typescript",  "autoFix":  true  },
  {"language":  "typescriptreact",  "autoFix":  true  }
],