Vite: Конфигурация для React

Языки: [🇺🇸] английский – [🇪🇸] испанский


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

npm create vite@latest <project-name> -- --template <react|react-ts>
# npm 7+, extra double-guión es requerido

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.


Линтер

  • Расширение 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 #o Yes si tu proyecto lo usa
Run: Browser #y Node si usa Next.js
Style guide: Popular -> Standard #JS sin punto y coma ;
Format: JSON
Войдите в полноэкранный режим Выход из полноэкранного режима

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

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

В конце он спросит, хотите ли вы установить какие-либо дополнительные пакеты. Ответ должен быть таким: да. После завершения обновите настройки правила следующим образом:

{
    "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 в корне проекта:

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, но мы должны делать это для использования Hooks или других методов, предоставляемых React.

Чтобы ES Lint не предупреждал нас о import 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,
         // Corre primero Prettier y luego ESLint
+        "editor.codeActionsOnSave": [
+            "source.formatDocument",
+            "source.fixAll.eslint"
+        ],
+    }
}
Войдите в полноэкранный режим Выход из полноэкранного режима

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

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

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

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

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

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

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

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

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

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

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

Добавьте следующую конфигурацию в конец extends:

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

Если вы не хотите использовать расширение 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" 
  ] 
}
Войдите в полноэкранный режим Выход из полноэкранного режима

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

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

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

Если вы решили использовать Prettier, вам нужно будет использовать другой пакет, чтобы избежать конфликтов между ними.

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

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

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

Гит Линтер

Если в проекте еще не создан git-репозиторий, необходимо сначала выполнить команду:

git init
Войдите в полноэкранный режим Выход из полноэкранного режима
  • Постановка ворса

Используйте Husky ниже и запускайте линтер только против файлов в staged. Это гарантирует, что никакие изменения не будут загружены без предварительной проверки настроенными лайнерами.

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

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

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

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

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
Войдите в полноэкранный режим Выход из полноэкранного режима

И добавьте его как environment.

import { defineConfig } from 'vitest/config'

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

С помощью setupFiles вы можете расширить matchers из 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
Войдите в полноэкранный режим Выход из полноэкранного режима

И добавьте эти условия в конфигурационный файл 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 – адаптер Test Explorer

Отладка

  • щелчок по компоненту ⭐

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

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

Даже если click-to-react-component добавлен как dependencies, при создании продакшн build пакет будет удален с помощью tree-shaking.

С помощью комбинации идентификаторов и кликов по компоненту в браузере мы сможем перейти к коду компонента в редакторе.

Он работает с 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 в корне проекта:

{
  "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
Добавить комментарий