Настройка проекта TypeScript с помощью ESLint, Prettier и VS Code

Источник: Nuances of Programming

Жизнь становится лучше, если вы развиваетесь в хорошем окружении, не так ли? (Источник)

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.

In Your Face — это расширение VS Code, показывающее вам рожицы из игры Doom, которые появляются при обнаружении ошибок в вашем коде (источник)

Читайте также:

• Как настроить 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