Vite: Мощная настройка проекта React

Язык: [🇪🇸] Español – [🇺🇸] English


Vite на сегодняшний день является лучшей альтернативой для создания React-проектов.

npm create vite@latest <project-name> -- --template <react|react-ts>
# npm 7+, extra double-dash is needed

cd <project-name>
npm install
npm run dev
Вход в полноэкранный режим Выйти из полноэкранного режима

С помощью этих команд мы создали очень простой и чистый проект, который послужит отправной точкой, но ему понадобятся некоторые дополнительные инструменты для автоматизации задач, которые могут облегчить вашу жизнь и жизнь вашей команды разработчиков.


VSCode

Рекомендуется выполнять эти настройки в настройках проекта, а не в глобальных настройках.

Мы начнем с создания папки .vscode с файлом settings.json внутри.

{
    "emmet.excludeLanguages": [],
    "emmet.includeLanguages": {
        "markdown": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "files.exclude": {
        "**/*.js.map": {
            "when": "$(basename)"
        },
        "**/node_modules": true,
    },
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "javascript.suggest.completeFunctionCalls": true,
    "typescript.suggest.completeFunctionCalls": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
    "javascript.inlayHints.parameterNames.enabled": "all",
    "typescript.inlayHints.parameterNames.enabled": "all",
    "javascript.suggest.autoImports": true,
    "search.exclude": {
        "**/coverage": true,
        "**/node_modules": true
    },
    "typescript.autoClosingTags": true,
    "typescript.suggest.autoImports": true,
}
Вход в полноэкранный режим Выход из полноэкранного режима

Существует множество расширений и конфигураций VSCode. Если вы хотите узнать больше, посмотрите VSCode – Essentials и VSCode – React Flavored.

Отладка

Для отладки React из VSCode нет необходимости устанавливать дополнительное расширение.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
Вход в полноэкранный режим Выход из полноэкранного режима

Если вы хотите отключить открытие браузера каждый раз при выполнении команды npm run start, просто добавьте BROWSER=none в файл .env в вашем проекте.


Линтер

  • Расширение ES Lint
{ 
+    "editor.formatOnSave": true,
+    "javascript.format.enable": false,
+    "javascript.validate.enable": true,
+    "typescript.format.enable": false,
+    "typescript.validate.enable": true,
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Установка и настройка в папке проекта:

npm install -D eslint
npx eslint --init
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы можете выбрать лучшую для вас конфигурацию, но мое мнение таково:

Use: To check syntax, find problems, and enforce code style
Type of modules: JavaScript modules (import/export)
Framework: React
Typescript: No #or Yes if the project uses it
Run: Browser #and Node if use Next.js
Style guide: Popular -> Standard #JS without semi-colon ;
Format: JSON
Войти в полноэкранный режим Выйти из полноэкранного режима

Исключение точки с запятой

Поскольку в руководстве по стилю standard не используются точки с запятой (;), имейте в виду следующее. Если следующее утверждение сразу после строки без точки с запятой начинается с одного из следующих специальных операторов [, (, +, *, /, -, ,, ., то оно будет распознано как выражение к предыдущему утверждению. Затем вам нужно будет начать строку с ;.

Вам будет предложено установить дополнительные пакеты. Ответьте “да”. После завершения обновите конфигурации rules:

{
    "rules": {
+     "no-console": "warn",
+     "react/prop-types": "off",
+     "react/self-closing-comp": "warn",
    },
+   "settings": {
+     "react": {
+       "version": "detect"
+     }
+   }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы используете TypeScript, также необходимо добавить эту конфигурацию:

{
    "parserOptions": {
+     "project": ["tsconfig.json"],
+     "createDefaultProgram": true
    },
    "rules": {
      "no-console": "warn",
      "react/prop-types": "off",
      "react/self-closing-comp": "warn",
+     "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+     "@typescript-eslint/explicit-function-return-type": "off",
  },
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

build
coverage
dist
Войти в полноэкранный режим Выйти из полноэкранного режима

Нет необходимости добавлять node_modules, поскольку он игнорируется по умолчанию.

Если вы не хотите использовать расширения ES Lint, добавьте команду list и fix в конец scripts:

{
  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Избегайте ошибки импорта React

Начиная с React 17, вам больше не нужно import React для использования JSX. Но нам все еще нужно импортировать React, чтобы использовать Hooks или другие экспорты, которые предоставляет React.

Чтобы избежать предупреждений ES Lint об импорте React, добавьте плагин:

{
    "extends": [
      "plugin:react/recommended",
      "standard-with-typescript",
+     "plugin:react/jsx-runtime",    
    ],
}
Войти в полноэкранный режим Выход из полноэкранного режима

Пустые строки

Если вы хотите сохранить предыдущие определения пустой строки.

{
    "rules": {
+       "padding-line-between-statements": [
+           "error",
+           {
+               "blankLine": "always",
+               "prev": "*",
+               "next": "return"
+           },
+           {
+               "blankLine": "always",
+               "prev": [
+                   "const",
+                   "let",
+                   "var"
+               ],
+               "next": "*"
+           },
+           {
+               "blankLine": "any",
+               "prev": [
+                   "const",
+                   "let",
+                   "var"
+               ],
+               "next": [
+                   "const",
+                   "let",
+                   "var"
+               ]
+           }
+       ]
    },
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Автоматическая сортировка

Если вы не хотите возиться с сортировкой импорта и свойств, установите эту настройку.

{
    "rules": {
+       "import/order": [
+           "warn",
+           {
+               "pathGroups": [
+                   {
+                       "pattern": "~/**",
+                       "group": "external",
+                       "position": "after"
+                   }
+               ],
+               "newlines-between": "always-and-inside-groups"
+           }
+       ],
+       "react/jsx-sort-props": [
+           "warn",
+           {
+               "callbacksLast": true,
+               "shorthandFirst": true,
+               "noSortAlphabetically": false,
+               "reservedFirst": true
+           }
+       ]
    },
}
Войти в полноэкранный режим Выйти из полноэкранного режима

 Формат

ES Lint может быть достаточно, а Prettier необязателен, так как имеет лучшую производительность форматирования, чем ES Lint. Если вы хотите использовать его – вперед. Но есть проблема, они борются за то, чтобы попробовать оба форматировать код, поэтому вы должны знать, как настроить их для совместной работы.

Если вы хотите использовать это, продолжайте.

  • Prettier – расширение для форматирования кода
{ 
+    "eslint.alwaysShowStatus": true,
+    "eslint.probe": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact"
+    ],
+    "[javascript][typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+        "editor.formatOnSave": false,
         // Runs Prettier, then ESLint
+        "editor.codeActionsOnSave": [
+            "source.formatDocument",
+            "source.fixAll.eslint"
+        ],
+    }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Установите Prettier:

npm install -D prettier 
Войти в полноэкранный режим Выйти из полноэкранного режима

И ESLint (JS) для Prettier:

npm install -D eslint-config-prettier
Войти в полноэкранный режим Выйти из полноэкранного режима

Или TSLint (TS) для более красивых:

npm install -D tslint-config-prettier
Войти в полноэкранный режим Выйти из полноэкранного режима

Создайте файл .prettierignore в корне папки project:

build
coverage
dist
package-lock.json
Войти в полноэкранный режим Выйти из полноэкранного режима

Нет необходимости добавлять node_modules, поскольку он игнорируется по умолчанию.

Создайте файл .prettierrc.json в корне папки project:

{
    "semi": false,
    "singleQuote": true
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Добавьте extends prettier configuration в конец extends:

{
    "extends": [
        "plugin:react/recommended",
        "standard-with-typescript",
        "plugin:react/jsx-runtime",
+       "prettier", //at last
    ],
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы не хотите использовать расширения prettier, добавьте команды check и write в конце scripts:

{
  "scripts": {
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write"
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

HTML Linter

  • HTMLHint
npm install --global htmlhint
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы также хотите выравнивать HTML с помощью eslint, установите этот дополнительный плагин:

npm install -D eslint-plugin-html
Вход в полноэкранный режим Выйти из полноэкранного режима

И добавьте html в список плагинов

{
    "plugins": [
        "react",
+       "html"
    ],
}
Войти в полноэкранный режим Выйти из полноэкранного режима

CSS Linter

  • Расширение Stylelint

Установите и настройте в папке проекта:

npm install -D stylelint stylelint-config-standard
Войти в полноэкранный режим Выйти из полноэкранного режима

Создайте файл конфигурации с именем .stylelintrc.json на верхнем уровне вашего репозитория.

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-colon-newline-after": "always-multi-line",
    "property-no-unknown": [ true, {
      "ingnoreProperties": ["content-visibility"] 
    }]
  },
  "ignoreFiles": [
    "build/**",
    "coverage/**",
    "dist/**",
    "**/*.js",
    "**/*.jsx", 
    "**/*.ts",
    "**/*.tsx" 
  ] 
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Чтобы встроенные линтеры VS Code и Stylelint не сообщали об одинаковых ошибках, вы можете отключить встроенные линтеры.

{ 
+    "stylelint.enable": true,
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "[css][scss]": {
+        "editor.defaultFormatter": "stylelint.vscode-stylelint"
+    }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Stylelint содержит более 170 правил. Иногда он покажет вам ошибку, которая буквально вызовет проблему.

Если вы используете красивый принтер вместе со Stylelint, вам следует отключить все конфликтующие правила.

npm install -D stylelint-config-prettier
Вход в полноэкранный режим Выйти из полноэкранного режима

Добавьте его как extends в файл .stylelintrc.json.

{
  "extends": 
+  [
    "stylelint-config-standard",
+   "stylelint-config-prettier"
+  ]
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

Git Linter

Если у проекта нет git-репозитория. Сначала запустите:

git init
Enter fullscreen mode Выйти из полноэкранного режима
  • Lint Staged

Работает поверх Husky и запускает линтеры только против staged git-файлов. Таким образом вы можете гарантировать, что никакие ошибки не попадут в репозиторий и обеспечить соблюдение стиля кода.

Установите и настройте в папке проекта:

npx mrm@3 lint-staged
Войти в полноэкранный режим Выйти из полноэкранного режима

Тестирование

Используйте Vitest. Он совместим с API языка Jest, поэтому вам не придется заново изучать синтаксис.

npm install -D vitest
Вход в полноэкранный режим Выход из полноэкранного режима

С флагом global вам не нужно импортировать де-зависимости в каждый файл, добавляя автоматическую поддержку Jest.

- import { defineConfig } from 'vite'
+ import { defineConfig } from 'vitest/config'

export default defineConfig({
+  test: {
+    globals: true,
+  },
})
Войти в полноэкранный режим Выход из полноэкранного режима

Если вы используете typescript, также добавьте эту конфигурацию.

{ 
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Следующий шаг не обязателен. Но если вы хотите воспользоваться преимуществами IntelliSense, рекомендуется запускать тестовые файлы с:

import { it, expect, describe } from "vitest";
Войти в полноэкранный режим Выйти из полноэкранного режима

Запускайте тестовые скрипты следующим образом:

{
  "scripts": {
+    "test":    "vitest --run --reporter verbose",
+    "test:w":  "vitest",
+    "test:ui": "vitest --ui",
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Покрытие

Для отчетов о покрытии нам необходимо установить @vitest/coverage-c8.

npm install -D @vitest/coverage-c8
Войти в полноэкранный режим Выйти из полноэкранного режима

Обновление запускает тестовые скрипты следующим образом:

{
  "scripts": {
+    "test:c":  "vitest run --coverage",
+    "test:cw": "vitest watch --coverage"
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Добавьте конфигурацию @vitest/coverage-c8.

import { defineConfig } from 'vitest/config'

export default defineConfig({
+  test: {
+    reporters: ['verbose'],
+    coverage: {
+     all: true,
+      reporter: ['text', 'html', 'lcov'],
+      include: ['**/src/**/*.{js,jsx,ts,tsx}'],
+      exclude: [
+        '**/src/main.{js,jsx,ts,tsx}',
+        '**/*.types.{ts,tsx}',
+        '**/*.test.{js,jsx,ts,tsx}',
+        '**/src/vite-env*',
+      ],
+      statements: 0,
+      branches: 0,
+      functions: 0,
+      lines: 0,
+    },
  },
})
Войти в полноэкранный режим Выйти из полноэкранного режима

RTL (Библиотека тестирования React)

Выполните эту команду для установки RTL.

npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event
Войти в полноэкранный режим Выйти из полноэкранного режима

Также необходимо установить jsdom (или happy-dom)

npm install -D jsdom
Войдите в полноэкранный режим Выйти из полноэкранного режима

И добавьте его в качестве окружения.

import { defineConfig } from 'vitest/config'

export default defineConfig({
   test: {
     globals: true,
+    environment: 'jsdom',
   },
})
Войдите в полноэкранный режим Выйти из полноэкранного режима

С помощью свойств setupFiles мы можем расширить мачеры jest-dom, не импортируя их в каждый тестовый файл.

+ /* Extend Matchers */
+ import '@testing-library/jest-dom'
Вход в полноэкранный режим Выход из полноэкранного режима
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
+   setupFiles: './test/setup.ts',
  },
})
Войти в полноэкранный режим Выход из полноэкранного режима

Если вы используете eslint, то хорошей идеей будет добавить RTL линтеры с помощью этой команды:

npm install --D eslint-plugin-testing-library eslint-plugin-jest-dom
Enter fullscreen mode Выйти из полноэкранного режима

И добавить эти конфигурации в конфигурационный файл eslint.

{
    "extends": [
        "plugin:react/recommended",
        "standard-with-typescript",
        "plugin:react/jsx-runtime",
        "prettier",
+       "plugin:testing-library/react",
+       "plugin:jest-dom/recommended"
    ],
    "plugins": [
        "react",
        "html",
+       "testing-library",
+       "jest-dom"
    ],
    "rules": {
+       "testing-library/await-async-query": "error",
+       "testing-library/no-await-sync-query": "error",
+       "testing-library/no-debugging-utils": "warn",
+       "testing-library/no-dom-import": "off",
+       "jest-dom/prefer-checked": "error",
+       "jest-dom/prefer-enabled-disabled": "error",
+       "jest-dom/prefer-required": "error",
+       "jest-dom/prefer-to-have-attribute": "error"
    },
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Добавьте в setupFiles конфигурацию, чтобы избежать столкновений глобального мачера и jest-dom.

/* Extend Matchers */
import '@testing-library/jest-dom'
+ import '@testing-library/jest-dom/extend-expect'
Вход в полноэкранный режим Выход из полноэкранного режима

Имитация рабочего сервиса

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

npm install -D msw cross-fetch
Войти в полноэкранный режим Выйти из полноэкранного режима

И добавьте эту конфигурацию в глобальную настройку.

+ /* Mock Service Worker */
+ import { afterAll, afterEach, beforeAll } from 'vitest'
+ import { fetch } from 'cross-fetch'
+ import { server } from './mocks/server'

+ // Add `fetch` polyfill.
+ global.fetch = fetch

+ // Establish API mocking before all tests
+ beforeAll(() => server.listen({ onUnhandledRequest: `error` }))

+ // Reset any request handlers that we may add during the tests,
+ // so they don't affect other tests
+ afterEach(() => server.resetHandlers())

+ // Clean up after the tests are finished
+ afterAll(() => server.close())
Войти в полноэкранный режим Выйти из полноэкранного режима

Отладка

Для визуальной отладки тестов.

  • Расширение Vitest

Отладка

  • clic-to-component ⭐.

Это не расширение. Это пакет npm для установки на ваш проект, который помогает в процессе отладки.

npm install -S click-to-react-component
Вход в полноэкранный режим Выход из полноэкранного режима

Даже если click-to-react-component добавлен в dependencies, tree-shaking удалит click-to-react-component из production сборок.

С помощью комбинации клавиш и щелчка по компоненту в браузере, он перенесет вас к исходному компоненту в вашем редакторе.

Работает с vite добавлением этих конфигураций в ваш проект:

import React from "react"
import ReactDOM from "react-dom/client"
+import { ClickToComponent } from "click-to-react-component"

import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
+   <ClickToComponent />
  </React.StrictMode>
)
Войти в полноэкранный режим Выйти из полноэкранного режима

Стили

PostCSS

  • PostCSS

На самом деле я предпочитаю подход PostCSS вместо Sass, потому что он быстрее, ближе к стандарту CSS и не требует переименования расширения файла. Поэтому в будущем вы можете избавиться от PostCSS и ваш проект продолжит работать без необходимости серьезной миграции.

npm install -D postcss
Вход в полноэкранный режим Выход из полноэкранного режима

Для меня это самые необходимые плагины для установки:

npm install -D postcss-nesting
npm install -D autoprefixer
Вход в полноэкранный режим Выход из полноэкранного режима

Установите Autoprefixer только если вам нужна поддержка старых браузеров. Существует множество плагинов PostCSS, постарайтесь не устанавливать слишком много или очень редкие плагины, которые не приближены к стандартам CSS (или предложению).

Создайте файл postcss.config.json в корне папки project:

{
  "plugins": {
    "postcss-nesting": true,
    "autoprefixer": true
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Порядок плагинов важен, потому что нам нужно, чтобы nesting запускался раньше autoprefixer.

Если вы решили использовать Stylelint. Добавьте этот пакет:

npm install --D postcss-lit
Вход в полноэкранный режим Выход из полноэкранного режима

Добавьте его как customSyntax в файл .stylelintrc.json

{
  "extends": "stylelint-config-standard",
+  "customSyntax": "postcss-lit"
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

Sass

  • Sass

  • Расширение Sass

Если вместо PostCSS вы хотите использовать Sass. Vite имеет встроенную поддержку SCSS. Установите этот пакет:

npm install -D sass
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Следите за тем, чтобы использовать sass, а не пакет node-sass, так как он устарел.

Если вы решили использовать Stylelint. Замените эти пакеты:

npm remove stylelint-config-standard stylelint-config-prettier
npm install --D stylelint-config-standard-scss stylelint-config-prettier-scss
Вход в полноэкранный режим Выйти из полноэкранного режима

Замените его как extends в файле .stylelintrc.json.

{
  "extends": [
-    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
-    "stylelint-config-prettier",
+    "stylelint-config-prettier-scss",
  ]
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь переименуйте вручную все файлы .css в .scss и обновите src/App.js, чтобы импортировать src/App.scss.


Вот и все, друзья!
Счастливого кодинга 🖖

Оцените статью
Procodings.ru
Добавить комментарий