Языки: [🇺🇸] английский — [🇪🇸] испанский
На сегодняшний день 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.
Вот и все, друзья!
Счастливого кодинга 🖖
