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