От известно време съм програмист от предния край и видях как нашият свят преминава от „трябва да конфигурирате хиляданеща, ако искате да работи ” до „щракнете тук и всичко ще простоработи”.

Наскоро започнах да си играя с 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!