В настоящее время Typescript является одним из самых любимых языков благодаря мощности и надежности его системы типизации.
Настройка подходящей среды для разработки в Typescript имеет решающее значение для использования большинства функций, которые он может предложить.
В этой статье я покажу вам, как настроить чистую и простую среду разработки на основе:
- VS Code: мощный редактор, который вы можете превратить в IDE по своему вкусу.
- ESLint: настраиваемый линтер для проверки вашего кода на наличие проблем и плохих практик.
- Prettier: настраиваемый форматировщик кода, который гарантирует, что вы и ваша команда будете следовать одним и тем же правилам оформления кода.
- Yarn: менеджер пакетов, предпочтительнее стандартного npm, так как он намного быстрее.
TL;DR
Вы можете найти окончательный сетап проекта в этом репозитории GitHub и клонировать его:
git clone https://github.com/Myreage/typescript-starter yarn install
После этого просто установите ESLint VS Code extension и Prettier VS Code extension.
Вы можете идти!
1. Настройка проекта
Инициализируйте новый репозиторий:
mkdir typescript-starter && cd typescript-starter && npm init
Установить машинопись:
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 extension.
Наконец, создайте новую папку .vscode
в корне вашего проекта. Теперь вы можете отредактировать файл конфигурации параметров рабочей области .vscode/settings.json
, чтобы ESLint автоматически исправлял ваши исправимые проблемы при сохранении:
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, }
3. Более красивая конфигурация
Установить красивее:
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 extension и отредактируйте свой .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