TypeScript сегодня является одним из самых популярных языков благодаря удобству и надежности его системы набора текста.
Очень важно настроить подходящую среду для разработки на Typescript, поскольку она дает возможность воспользоваться всеми возможностями, которые он может предложить.
В этой статье мы покажем, как настроить чистую и простую среду разработки на основе следующих элементов:
- VS Code: функциональный редактор, который можно превратить в IDE по своему вкусу.
- ESLint: настраиваемый линтер для проверки кода на предмет проблем и использования при его написании плохих практик.
- Prettier: настраиваемый форматировщик кода, позволяющий вам и вашей команде следовать единым правилам оформления кода.
- Yarn: менеджер пакетов; он предпочтительнее стандартного npm, так как работает намного быстрее.
Короткий путь
Вы можете найти окончательный вариант настройки проекта в этом репозитории GitHub и клонировать его:
git clone https://github.com/Myreage/typescript-starter
yarn install
После этого просто установите расширение ESLint VS Code и расширение Prettier VS Code.
Можете приступать!
1. Настройка проекта
Инициализируйте новый репозиторий:
mkdir typescript-starter && cd typescript-starter && npm init
Установите Typescript:
yarn add typescript --dev
Добавьте намеренно плохо отформатированный файл-образец в src/index.ts:
type Book={
title:string
author: string
}
const book:Book ={
title: 'Cool Book',
author:"John Doe"
}
2. Конфигурация ESLint
Установите ESLint, его плагин Typescript и соответствующий парсер:
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
Добавьте базовую конфигурацию ESLint для Typescript в новый файл .eslintrc.json:
{
“env”: {
“browser”: true,
“es2021”: true
},
“extends”: [
“eslint:recommended”,
“plugin:@typescript-eslint/recommended”
],
“parser”: “@typescript-eslint/parser”,
“parserOptions”: {
“ecmaVersion”: “latest”,
“sourceType”: “module”
},
“plugins”: [
“@typescript-eslint”
]
}
Установите расширение ESLint VS Code.
Создайте новую папку .vscodeв корне вашего проекта. Теперь вы можете отредактировать файл конфигурации настроек рабочего пространства .vscode/settings.json, чтобы ESLint автоматически исправлял устранимые проблемы при сохранении:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
3. Конфигурация Prettier
Установите Prettier:
yarn add prettier eslint-config-prettier --dev
eslint-config-prettier гарантирует отсутствие конфликтов между ESLint и Prettier, поскольку он отключает правила ESLint, которые могут создавать проблемы.
Отредактируйте конфигурацию ESLint так, чтобы значение "extends”выглядело следующим образом:
“extends”: [
“eslint:recommended”,
“plugin:@typescript-eslint/recommended”,
“prettier”
],
Установите расширение Prettier VS Code и отредактируйте ваш файл .vscode/settings.json, чтобы включить автоформатирование при сохранении:
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“editor.formatOnSave”: true
Добавьте базовую конфигурацию Prettier по вашему выбору в файл.prettierrc.json:
{
"semi": true,
"trailingComma": "all",
"singleQuote": true
}
4. Следите за магией!
Вернитесь к файлу index.tsи пересохраните его.
Если все прошло по плану, ваш файл должен был быть отформатирован при сохранении, а ESLint должен был автоматически исправить все, что мог! У вас осталась ошибка в const book:
‘book’ is assigned a value but never used.eslint@typescript-eslint/no-unused-vars
Теперь вам предстоят часы перепечатки!
Но если вы готовы довериться магии, то выполните следующие шаги:
- Настройте правила ESLint/Prettier или создайте свои собственные!
- Поищите классные плагины в VS Code Marketplace.
- Добавьте пользовательские сниппеты VS Code.
Читайте также:
- Как настроить Next.js на TypeScript, чтобы получить оценку в 100% от Google Lighthouse и Vercel Analytics
- 8 пунктов по стилю React + TypeScript
- Индексация строк в Rust и TypeScript в сравнениях
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Rémy van Dyk, Setup a Typescript project with ESLint, Prettier and VS Code
