Боретесь со всей этой штукой с ESLint & Prettier, а?

Дай угадаю. Потратили часы на настройку проекта, когда вы уже должны были отправить свой первый коммит? Я чувствую тебя. Вот почему я не буду мучить вас длинными абзацами, заполненными историями о депрессивных разработчиках и их будущих проектах.

Давайте нырнем!

Но сначала небольшая информация.

ESLint

Подключаемый и настраиваемый инструмент линтера для выявления шаблонов в JavaScript и создания отчетов о них. С легкостью поддерживайте качество кода. ["источник"]

Красивее

Что такое красивее? Самоуверенный форматировщик кода; Поддерживает множество языков; Интегрируется с большинством редакторов; Есть несколько вариантов [источник]

VSCode

Visual Studio Code - это редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. ["источник"]

0. Создайте свое приложение с помощью CRA (create-response-app).

… Если вы еще этого не сделали. Если да, то можете пропустить этот шаг.

> npx create-react-app my-project

Я назвал проект my-project.Вы можете использовать вместо него имя вашего проекта.

1. Установите необходимые зависимости:

> npm i -D [email protected] prettier babel-eslint eslint-plugin-react eslint-plugin-import eslint-config-prettier eslint-config-airbnb eslint-plugin-prettier

Если указать флаг -D, зависимости появятся в разделе «devDependencies» в package.json.

2. Установите расширения VSCode для ESLint и Prettier:

Запустите VS Code Quick Open (Ctrl+P), вставьте следующие команды и нажмите Enter.

Для ESLint:

ext install dbaeumer.vscode-eslint

Для красивее:

ext install esbenp.prettier-vscode

OR

Найдите расширения прямо в VSCode, перейдя в раздел Extensions на панели действий и установив его с помощью кнопки Install.

3. Создайте .eslintrc.js файл в корневой папке вашего проекта со следующим содержимым:

4. Создайте .prettierrc.js файл в корневой папке вашего проекта со следующим содержимым:

Вот и все. Мы сделали это!

Но вот несколько примечаний.

  • Возможно, вам потребуется перезагрузить окно VSCode, чтобы изменения вступили в силу. Для этого нажмите Ctrl+Shift+P, чтобы открыть палитру команд, и введите Reload Window или просто нажмите Ctrl+R.
  • Некоторые правила в обоих файлах конфигурации являются необязательными, потому что я скорректировал их в соответствии со своими потребностями. Вы можете изменить их по своему желанию.
  • В этой статье отсутствуют детали, потому что первоначальной целью было предоставить быстрое и простое решение задачи по настройке проекта. Вы можете найти дополнительную информацию об установленных пакетах и ​​определенных правилах во всемирной паутине.

PS. У меня для тебя подарок.

Вот ссылка на репозиторий github с уже настроенным проектом. Не стесняйтесь использовать его для собственных нужд.



haykerman / cra-eslint-prettier
Этот проект был загружен с помощью приложения Create React. В каталоге проекта вы можете выполнить: Запускает приложение на… github.com



Спасибо за прочтение :)