В настоящее время 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

Вы готовы часами перепечатывать мир!

Однако, если вы хотите еще немного магии, вы можете: