От известно време съм програмист от предния край и видях как нашият свят преминава от „трябва да конфигурирате хиляданеща, ако искате да работи ” до „щракнете тук и всичко ще простоработи”.
Наскоро започнах да си играя с React, защото работата ми включва React Single Page Application. Бях изумен колко лесно беше да настроя ново приложение с помощта на инструмент, разработен от 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. Опитайте веднага, като напишете „React“. в компонентен файл и натиснете „CTRL+SPACE“, за да задействате автоматичното довършване.
- eslint-plugin-prettierи prettier(„убедителният форматиращ код“)ще работи заедно, за да линтира файловете ви правилно и да автоматично форматира кода ви.
- huskyпредотвратява лоши ангажименти и натискания, като се свързва с git hook като precommit. В комбинация сprety-quickтой ще следва вашата по-красива конфигурация, докато го прави.
Докато се докосваме до зависимостите и файла package.json, нека добавим запис scripts:
"scripts": { "precommit": "pretty-quick staged",
Това ще гарантира, че вашите файлове винаги са форматирани преди да бъдат ангажирани, следвайки вашата по-красива конфигурация.
Въпреки че create-react-app абстрахира конфигурационните файлове вместо нас, все пак трябва да напишем един малък конфигурационен файл.
.eslintrc
Този файл е от съществено значение, за да накара ESLint да разбере какво трябва да линтира.
Създайте файл с име .eslintrcв основата на вашето приложение:
{ "extends": "react-app", "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } }
Разширения на VS код
Сега просто трябва да инсталираме правилните разширения за 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-react-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!