Настройте ESLint, Prettier и Flow в VS Code для разработки React

Это краткое руководство предоставит вам последовательный и многократно используемый рабочий процесс разработки для всех проектов React / React Native. Чем больше усилий вы прикладываете к написанию качественного кода, тем меньше времени вы тратите на отладку. Вы можете повысить качество кода и сократить время, затрачиваемое на отладку, с помощью последовательного рабочего процесса разработки. В этом руководстве я покажу вам, как настроить редактор для обработки форматирования кода, линтинга и проверки типов.

Обновленная статья из моего блога

Рекомендуется разработка через тестирование и предварительно настроенная конфигурация сборки. Я не буду вдаваться в подробности ни по одному из них. Я рекомендую create-react-app для Интернета и использовать React Native CLI для разработки мобильных приложений. Оба требуют нулевой конфигурации сборки. Jest отлично подходит для тестирования React.

Установка

Для начала скачайте и установите VS Code. Вы можете запустить VS Code с терминала, вот как.

Я использую VS Code в качестве редактора по своему выбору. Если вы используете Sublime Text или Atom, эта статья все еще применима, но вам нужно будет использовать соответствующие расширения текстового редактора для вашего текстового редактора.

Давайте сгенерируем наше приложение без какой-либо конфигурации! В этой статье мы будем использовать React Native CLI, но вы также можете использовать create-react-app.

$ react-native init SweetApp && cd SweetApp

Откройте проект SweetApp с помощью VS Code.

$ code .

После открытия VS Code нажмите кнопку Расширения на панели действий. Установите следующие расширения:

• ESLint
• Более красивый инструмент форматирования JavaScript
• Поддержка языка Flow
• Babel ES6 / ES7

Настройка ESLint

Мы установим ESLint, используя правила линтера Airbnb. См. Репозиторий Airbnb для JavaScript на Github за инструкциями по установке.

Затем установите babel-eslint
$ npm install babel-eslint --save-dev

Теперь вы должны увидеть .eslintrc файл в своем проекте. Откройте файл eslintrc и настройте его так:

Prettier Setup

Мы настроим Prettier для форматирования нашего кода на основе наших правил ESLint.

Для начала нам нужно установить prettier-eslint.

$ npm install prettier-eslint --save-dev

Мы хотим, чтобы VS Code форматировал наш код с помощью Prettier после сохранения файла.

Нажмите CMD + ,, если у вас Mac, чтобы открыть Настройки VS Code Workspace, а затем добавьте следующее:

// Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down.
"editor.formatOnSave": true,
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
// Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": true

Настройка потока

Flow - это средство проверки статического типа для JavaScript, которое включается в ваш проект, если вы используете React Native CLI или create-response-app конфигурации сборки.

Из вашего терминала установите Flow с помощью Homebrew.

$ brew install flow

Flow работает лучше всего при установке для каждого проекта с явным управлением версиями, а не глобально. https://flow.org/en/docs/install/

Чтобы запустить Flow для каждого проекта, мы установим flow-bin из npm. Позже мы настроим VS Code для запуска Flow из node_modules вместо глобальной установки Flow.

Перед установкой flow-bin нам нужно выяснить, какую версию установить. Откройте файл .flowconfig и прокрутите его до самого низа, где вы найдете номер версии. Это версия flow-bin, которую мы хотим установить из NPM. На день публикации статьи использовалась версия Flow 0.42.0.

См. документацию по create-response-app, чтобы узнать, как легко добавить Flow

Нам также необходимо установить babel-preset для Flow.

Что такое babel-пресеты? https://babeljs.io/docs/plugins/#presets

$ npm install [email protected] babel-preset-flow --save-dev

Откройте файл .babelrc и добавьте Flow как предустановку, затем добавьте конфигурацию “retainLines”: true

Ваш .babelrc файл должен выглядеть так:

{
  "presets": [
    "react-native",
    "flow"
  ],
  "retainLines": true
}

Теперь мы хотим указать нашему редактору использовать Flow из каталога проектов node_modules. Мы также хотим отключить проверку JavaScript для этого проекта только для того, чтобы исправить известную проблему.

Откройте файл Рабочая область settings.json и настройте поток для использования пакета NPM в node_modules.

// Support using flow through your node_modules folder, WARNING: Checking this box is a security risk. When you open a project we will immediately run code contained within it.
"flow.useNPMPackagedFlow": true

Ваши Настройки рабочей области VS Code теперь должны выглядеть следующим образом:

// Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down.
"editor.formatOnSave": true
// Support using flow through your node_modules folder, WARNING: Checking this box is a security risk. When you open a project we will immediately run code contained within it.
"flow.useNPMPackagedFlow": true,
// Enable/disable JavaScript validation. (For Flow)
"javascript.validate.enable": false
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
// Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": true

Отключение средства форматирования JavaScript по умолчанию позволяет Prettier обрабатывать форматирование нашего кода.

Давайте создадим несколько скриптов npm для Flow.

Откройте файл package.json и добавьте следующие сценарии.

// start the flow server
"flow start": "flow start",
// stop the flow server
"flow stop": "flow stop",
// check the flow status
"flow status": "flow status",
// check the flow coverage percentage
"flow coverage": "flow coverage"

Ваш scripts в package.json теперь должен выглядеть так:

Из того же каталога, что и ваш package.json файл, выполните следующую команду терминала.

$ npm run flow start

Сервер потока запущен и будет выполнять проверку типа любого файла с аннотацией // @flow в верхней части файла.

Тестирование вашего нового рабочего процесса разработки

Откройте файл index.ios.js в проекте SweetApp.

Не используйте index.android.js файл, поскольку .flowconfig файл его игнорирует. См. этот пост на Stack Overflow, чтобы использовать Flow с .android файлами.

ESLint Linter

Вы должны заметить красные волнистые линии в своем коде. Вы можете навести курсор мыши на красную волнистую линию, и ESLint сообщит вам правило линтера, вызывающее предупреждение.

Удалите точку с запятой в конце оператора return внутри метода render класса. Наведите курсор мыши на красную волнистую линию, и вы увидите, что ESLint предупреждает вас об отсутствии точки с запятой!

Если вы не получаете никаких предупреждений о линтере, пожалуйста, ознакомьтесь с частью этого руководства, посвященной настройке ESLint.

Программа форматирования кода Prettier

Prettier будет автоматически форматировать ваш код в соответствии с его правилами всякий раз, когда вы сохраняете файл.

Добавьте массив чисел и сохраните массив в переменной с именем test. Отформатируйте массив чисел так:

Теперь сохраните файл и наблюдайте, как волшебство Prettier вступает в силу!

Теперь тестовый массив отформатирован правильно!

Проверка типа потока

Чтобы убедиться, что Flow работает, запустите сценарий flow start npm, чтобы запустить сервер потока, который работает в фоновом режиме.

$ npm run flow start

Создайте функцию сложения, которая возвращает сумму двух чисел.

Теперь давайте добавим НЕПРАВИЛЬНЫЕ типы (строку) к параметрам add функции и типу возвращаемого значения.

Обратите внимание, что после сохранения файла под числовыми параметрами вызова функции add появляются красные волнистые линии. Наведите курсор мыши на красные волнистые линии, и Flow сообщит вам:

[flow] this type is incompatible with the expected parameter type of string

Давайте исправим функцию добавления, чтобы использовать правильные типы чисел.

Ошибки типа Поток исчезли!

Интересной особенностью Расширения Flow VS Code является всегда актуальный процент покрытия Flow в строке состояния.

🎉 Все готово ! 🎉

Надеюсь, это руководство избавит вас от головной боли, которую я испытал, и станет отличным справочным руководством сейчас и в будущем.

Удачного кодирования! 😀

Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсудить рекламные и спонсорские возможности.

Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!