Я уже некоторое время являюсь фронтенд-разработчиком и видел, как наш мир изменился: «вам нужно настроить тысячу вещей, если вы хотите, чтобы он работал "Нажмите здесь, и все будет просто работать".

Недавно я начал экспериментировать с React, потому что моя работа связана с одностраничным приложением на React. Я был поражен тем, насколько легко было настроить новое приложение с помощью инструмента, разработанного Facebook, шаблона create-react-app.

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

Вам не нужно устанавливать или настраивать такие инструменты, как Webpack или Babel.
Они предварительно настроены и скрыты, так что вы можете сосредоточиться на коде.

Просто создайте проект, и все готово.

Они даже обеспечивают горячую перезагрузку и конфигурацию по умолчанию для ESLint! Но достаточно ли этого кода?

Я использую VS Code как текстовый редактор. Что ж, текстовый редактор, мне, наверное, следует перестать использовать эти слова для его описания, поскольку в настоящее время он ближе к полноценной среде IDE, чем к простому текстовому редактору. Может быть, умный редактор кода?

В любом случае, чего вы ожидаете от умного редактора кода? Правильно, волнистые красные линии при ошибке, автозаполнение и автоформатирование.

Давайте посмотрим, как этого добиться с помощью VS Code.

Установка правильных зависимостей

Во-первых, вам нужно установить правильные зависимости npm.

Если использовать пряжу, можно:

yarn add -D \
  @types/react \
  @types/react-dom \
  eslint-plugin-prettier \
  husky \
  prettier \
  pretty-quick

В противном случае с npm:

npm install --save-dev
  @types/react \
  @types/react-dom \
  eslint-plugin-prettier \
  husky \
  prettier \
  pretty-quick
  • types / react и types / react-dom установят определения Typescript для React. Это позволит VS Code определять автозаполнение для встроенных функций React. Попробуйте прямо сейчас, набрав «Реагировать». в файле компонента и нажав «CTRL + SPACE», чтобы запустить автозаполнение.
  • eslint-plugin-prettier и prettier (самоуверенный форматировщик кода) будут работать вместе, чтобы правильно линковать ваши файлы и автоматически форматировать код.
  • хаски предотвращает ошибочные коммиты и нажатия, связывая себя с хуком git, таким как precommit. В сочетании с довольно быстро он будет следовать вашей более красивой конфигурации при этом.

Пока мы касаемся зависимостей и файла package.json, давайте добавим запись скриптов:

"scripts": {
    "precommit": "pretty-quick staged",

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

Хотя приложение create-react-app абстрагирует для нас файлы конфигурации, нам все равно нужно написать один небольшой файл конфигурации.

.eslintrc

Этот файл необходим для того, чтобы ESLint понял, что он должен линтировать.

Создайте файл с именем .eslintrc в корне вашего приложения:

{
  "extends": "react-app",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Расширения VS Code

Теперь нам просто нужно установить правильные расширения для VS Code. Найдите ESLint и Prettier и установите их оба.

Возможно, потребуется перезагрузка, поскольку кажется, что кнопки «перезагрузить» не всегда достаточно.

Теперь, если все сработало, как задумано, вы можете начать набирать мусор в своем редакторе и сразу увидеть, как он сходит с ума от красных линий!

settings.json

И последнее: я рекомендую вам создать файл settings.json. Это стандартный файл настроек рабочего пространства в VS Code. Вы можете получить к нему доступ, набрав «CTRL-SHIFT-P» + «настройки рабочего пространства».

Скопируйте и вставьте этот пример:

{
    "files.associations": {
        "*.js": "javascriptreact"
    },
    "editor.formatOnSave": true
}

Первая строка сообщает VS Code, что когда вы находитесь в файле * .js, вы хотите включить подсветку синтаксиса «javascriptreact».

Вторая строка сообщает редактору, что он должен запускать Prettier каждый раз, когда вы сохраняете файл. Забудьте об отступах в скобках навсегда!

Бонус: импорт абсолютного пути

Что, если бы ты мог сделать

import MyComponent from "components/MyComponent"

откуда угодно, вместо того, чтобы считать "../" и делать что-то вроде

import MyComponent from "../../../components/MyComponent"

В этом нет необходимости, но я считаю, что это может быть полезно, и поскольку мне потребовалось некоторое время, чтобы заставить его работать как с VS Code, так и с приложением create-response-app, я подумал, что могу поделиться им.

Это возможно по двум причинам. Во-первых, вам нужно сообщить webpack, что вы хотите, чтобы ваш путь включал вашу папку src. Затем вы хотите, чтобы VS Code знал об этом выборе.

Create-react-app позволяет определять переменные среды через файлы .env. Создайте файл с именем «.env» в корне вашего приложения и определите переменную NODE_PATH:

NODE_PATH=src/

Затем создайте файл с именем «jsconfig.json», также в корне вашего приложения:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src/",
    "paths": {
      "*": [
        "*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "**/node_modules/*"
  ]
}

Подробнее о том, почему это работает, читайте в этой документации.

Надеюсь, вы сочтете это полезным. Удачного кодирования с React и VS Code!