ESLint для проекта Typescript? Почему не TSLint?

  1. Давайте создадим проект React:
> npx create-react-app my-app --template typescript
> cd my-app

При этом мы получаем хороший код реакции, созданный с помощью машинописного текста:

2. Отлично! Теперь давайте запустим это:

> npm run start

Прекрасный! Это сработало.

3. Теперь добавим необходимые библиотеки линтера:

> npm i --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

Мы получили это ^^. Это сработало.

4. Затем добавьте .eslintrc.js в корневую папку с содержимым, указанным ниже:

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

5. Чтобы проверить, работает ли наш код, добавьте следующий код в блок scripts:

"lint": "node ./node_modules/eslint/bin/eslint.js src --ext .js,.jsx,.ts,.tsx"

6. Теперь перейдите в терминал и выполните следующую команду:

> npm run lint

Довольно круто, да?

7. Если мы хотим запустить lint перед отправкой кода в репозиторий, добавьте библиотеку husky следующим образом:

> npm install husky --save-dev

И добавьте следующий код в package.json:

"husky": {
  "hooks": {
    "pre-push": "npm run lint"
  }
}

8. Теперь попробуем запушить код на github и проверить, работает ли наш хаски-хук:

Довольно круто, да?

9. Если вы не можете прочитать код на изображении, вам сюда: https://github.com/jerrythimothyj/react-eslint.