Инструменты¶
Вот несколько отличных инструментов, которые я рекомендую вам использовать или, по крайней мере, попробовать в своих проектах TypeScript.
Prettier¶
Prettier - отличный инструмент от Facebook, который настолько упрощает форматирование кода, что о нем стоит упомянуть. Настроить его для TypeScript с использованием рекомендованной нами настройки проекта (все в папке src
) очень просто:
Установка¶
npm install prettier -D
- Добавьте
scripts
вpackage.json
:
"prettier:base": "prettier --parser typescript --single-quote",
"prettier:check": "npm run prettier:base -- --list-different \"src/**/*.{ts,tsx}\"",
"prettier:write": "npm run prettier:base -- --write \"src/**/*.{ts,tsx}\""
Использование¶
На вашем CI-сервере:
npm run prettier:check
Во время разработки (или используя в хуке перед коммитом):
npm run prettier:write
Husky¶
Husky может предотвратить плохие коммиты, отправки плохих изменений в удаленный репозиторий и многое другое 🐶!
Если вы хотите запустить какой-то код JavaScript / TypeScript до того, как произойдет коммит, для этого вам подойдет husky.
Например, вы можете использовать husky, чтобы убедиться, что файлы форматируются с помощью prettier автоматически, поэтому вам больше не нужно беспокоиться о ручном форматировании файлов и вместо этого сосредоточиться на цели кода. Вот настройка:
npm install husky -D
- Добавьте
scripts
вpackage.json
:
"precommit": "npm run prettier:write",
Всякий раз, когда вы коммитите код и есть какие-либо изменения форматирования, которые необходимо внести, вы получите их как измененный файл в журнале git. Теперь вы можете:
- Если вы уже отправили изменения в удаленный репозиторий, просто закоммитьте его с комментарием
pretty
. - Если вы еще не отправили изменения в удаленный репозиторий, исправьте последний коммит с помощью флага
--amend
.
ESLint¶
ESLint существовал для линтинга JavaScript, но теперь он также становится де-факто линтером для TypeScript, благодаря сотрудничеству между двумя командами.
Установка EsLint¶
Чтобы настроить 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¶
- Установите расширение
- Добавьте в
settings.json
:
"eslint.validate": [
"javascript",
"javascriptreact",
{"language": "typescript", "autoFix": true },
{"language": "typescriptreact", "autoFix": true }
],
История изменений¶
Читать markdown файл с прогрессом в проекте легче, чем читать журнал коммитов.
Автоматическая генерация истории изменений из сообщений коммитов - довольно распространенная практика в настоящее время. Существует проект под названием conventional-changelog, который генерирует журнал изменений из сообщений коммитов, которые следуют соглашению.
Соглашение об именах коммитов¶
Наиболее распространенное соглашение - это соглашение angular, которое подробно описано здесь.
Настройка¶
- Установите:
npm install standard-version -D
- Добавьте
script
в вашpackage.json
:
{
"scripts": {
"release": "standard-version"
}
}
- Необязательно: чтобы автоматически отправить в удаленный репозиторий новые git commit и tag плюс опубликовать в npm, добавьте скрипт
postrelease
:
{
"scripts": {
"release": "standard-version",
"postrelease": "git push --follow-tags origin master && npm publish"
}
}
Релизы¶
Просто запустите:
npm run release
На основе имён коммитов major
| minor
| patch
вид релиза определяется автоматически. Чтобы явно указать вид, вы можете указать --release-as
, например:
npm run release -- --release-as minor