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



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

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

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

Теперь вам предстоят часы перепечатки!


Но если вы готовы довериться магии, то выполните следующие шаги:



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


160   0  
    Ничего не найдено.

Добавить ответ:
Отменить.