Легкий старт проекта Typescript / React (с Yarn, ESlint и Prettier)

Всем привет, в этом супер быстром руководстве я научу вас, как запустить приложение с ESlint и Prettier, чтобы стандартизировать код и повысить производительность. Поехали?

Создать проект

Создайте проект с помощью приложения create-response-app и шаблона Typescript:

yarn create react-app *your-application-name* — template=typescript

ESlint

Добавляем ESlint в проект в режиме разработки:

yarn add eslint -D

Запустите новый файл eslint:

yarn eslint — init

Выберите эти ответы для указанной выше команды:

1. To check syntax, find problems, and enforce code style
2. JavaScript modules (import/export)
3. React
4. Yes
5. Browser
6. Use a popular style guide
7. Airbnb
8. JSON
9. No

Установите с помощью Yarn список требуемых зависимостей, который появляется после отказа `install with npm` в последнем варианте вышеприведенной команды (Удалить eslint и дополнительные версии перехватчиков реакции). Команда должна выглядеть примерно так:

yarn add eslint-plugin-react@⁷.20.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@⁷.2.0 eslint-plugin-import@².21.2 eslint-plugin-jsx-a11y@⁶.3.0 eslint-plugin-react-hooks@⁴ @typescript-eslint/parser@latest -D

будьте осторожны, зависимости могут измениться.

Создайте файл `.eslintignore` в корне проекта:

src / .eslintignore:

**/*.js
node_modules
build

Добавьте следующую библиотеку в режиме разработки для импорта машинописного текста по умолчанию:

yarn add eslint-import-resolver-typescript -D

Добавьте некоторые конфигурации в файл `eslintrc.json`.

src / eslintrc.json:

{
 …
 “extends”: [
 …
   “plugin:@typescript-eslint/recommended”
 ],
 …
 “plugins”: [
 …
   “react-hooks”
 ],
 “rules”: {
 “react-hooks/rules-of-hooks”: “error”,
 “react-hooks/exhaustive-deps”: “warn”,
 “react/jsx-filename-extension”: [
   1,
   {
     “extensions”: [
       “.tsx”
     ]
   }
 ],
 “import/prefer-default-export”: “off”,
 “import/extensions”: [
   “error”,
   “ignorePackages”,
   {
     “ts”: “never”,
     “tsx”: “never”
   }
 ]
 },
 “settings”: {
   “import/resolver”: {
     “typescript”: {}
   }
 }
}

`…` Представляет собой код, уже находящийся в файле.

Красивее

Добавьте Prettier в проект в режиме разработки:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Интегрируйте prettier с eslint, добавив еще несколько настроек в файл eslintrc.json.

src / eslintrc.json:

{
 …
 “extends”: [
   …
   “plugin:prettier/recommended”
 ],
 …
 “plugins”: [
   …
   “prettier”
 ],
 “rules”: {
   …
   “prettier/prettier”: “error”,
   “@typescript-eslint/explicit-module-boundary-types”: “off”,
   “react/jsx-one-expression-per-line”: “off”,
   “no-use-before-define”:”off”,
 },
 …
}

Создайте файл prettier.config.js в корне проекта.

prettier.config.js:

module.exports = {
 singleQuote: true,
 trailingComma: ‘all’,
 allowParens: ‘avoid’,
}

Перейдите к файлам .src / index.tsx и ./src/reportWebVitals.ts и сохраните их для форматирования с помощью Prettier.

Запускаем проект в режиме разработки:

yarn start

- - -
Оба файла конфигурации для Prettier и ESLint можно настроить в соответствии с вашими потребностями. Если вам нужно добавить правила, вы можете сделать это с обоими файлами.

На сегодня все, ребята. Надеюсь, вам понравилась статья и она может в чем-то помочь вам и вашей команде.

Наслаждаться!

Если у вас есть какие-либо вопросы или предложения, поговорите со мной в моих социальных сетях, я буду безмерно рад вам ответить.

[Twitter] (https://twitter.com/vinidiasdev) или [GitHub] (https://github.com/ViniciusmDias)

Легкий старт проекта Typescript / React (с Yarn, ESlint и Prettier)