Инструменты¶

Вот несколько отличных инструментов, которые я рекомендую вам использовать или, по крайней мере, попробовать в своих проектах TypeScript.

Prettier¶

Prettier - отличный инструмент от Facebook, который настолько упрощает форматирование кода, что о нем стоит упомянуть. Настроить его для TypeScript с использованием рекомендованной нами настройки проекта (все в папке src) очень просто:

Установка¶

• npm install prettier -D
• Добавьте scripts в package.json:

1
2
3

"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:

1

    "precommit": "npm run prettier:write",

Всякий раз, когда вы коммитите код и есть какие-либо изменения форматирования, которые необходимо внести, вы получите их как измененный файл в журнале git. Теперь вы можете:

• Если вы уже отправили изменения в удаленный репозиторий, просто закоммитьте его с комментарием pretty.
• Если вы еще не отправили изменения в удаленный репозиторий, исправьте последний коммит с помощью флага --amend.

ESLint¶

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

Установка EsLint¶

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

1

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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:

1
2
3
4
5

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

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

Настройка VSCode¶

• Установите расширение
• Добавьте в settings.json:

1
2
3
4
5
6

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

История изменений¶

Читать markdown файл с прогрессом в проекте легче, чем читать журнал коммитов.

Автоматическая генерация истории изменений из сообщений коммитов - довольно распространенная практика в настоящее время. Существует проект под названием conventional-changelog, который генерирует журнал изменений из сообщений коммитов, которые следуют соглашению.

Соглашение об именах коммитов¶

Наиболее распространенное соглашение - это соглашение angular, которое подробно описано здесь.

Настройка¶

• Установите:

1

npm install standard-version -D

• Добавьте script в ваш package.json:

1
2
3
4
5

{
  "scripts": {
    "release": "standard-version"
  }
}

• Необязательно: чтобы автоматически отправить в удаленный репозиторий новые git commit и tag плюс опубликовать в npm, добавьте скрипт postrelease:

1
2
3
4
5
6

{
  "scripts": {
    "release": "standard-version",
    "postrelease": "git push --follow-tags origin master && npm publish"
  }
}

Релизы¶

Просто запустите:

1

npm run release

На основе имён коммитов major | minor | patch вид релиза определяется автоматически. Чтобы явно указать вид, вы можете указать --release-as, например:

1

npm run release -- --release-as minor

Комментарии