ESLint для проекта Typescript? Почему не TSLint?
- Давайте создадим проект 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.