Этот пост является частью серии постов для начинающих, предназначенных для людей, которые используют
готовые инструменты, шаблоны или шаблоны для React, но хотят с самого начала научиться и понимать, как создавать приложение React. .
Все публикации из этой серии:
Часть 1: Введение
Часть 2: Инициализация и первый файл
Часть 3: Использование синтаксиса ES2015 < br /> Часть 4: Применение руководства по стилю
Часть 5: Настройка сервера Express
Часть 6: Использование модуля Bundler
Часть 7 : Настройка React и лучшие практики
Часть 8: Настройка Redux
Часть 9: Настройка React Router
Часть 10: TDD и настройка Jest
Эта проблема
Когда дело доходит до кода, все пишут по-своему, и у каждого есть свое мнение. Это нормально, пока вы работаете над своим кодом, а я работаю над своим.
Это правда, что никто не собирается писать плохой, некрасивый и непоследовательно стилизованный код, но это просто происходит со временем, и это с большей вероятностью произойдет, когда в команде есть несколько разработчиков, работающих над одним и тем же кодом.
Представьте себе двадцать, тридцать или даже сотню разработчиков, работающих над одной и той же кодовой базой. Все очень быстро запутается. Итак, что мы можем сделать, чтобы этого избежать?
Вам нужен Руководство по стилю, и точка.
Руководство по стилю - это набор стандартов, определяющих, как должен быть написан и организован код. Чтобы обеспечить соблюдение руководства по стилю, вам понадобится линтер кода.
Линтер кода - это программа, которая помогает экономить время и писать чистый и поддерживаемый код, анализируя ваш код на предмет потенциальных ошибок.
ESLint для линтинга кода
ESLint - самый популярный инструмент для линтинга JavaScript, и он имеет плагины для многих популярных редакторов, таких как VSCode, Sublime Text и Atom, чтобы обеспечить линтинг кода в реальном времени.
Давайте начнем настраивать ESLint, добавив пакет в наш проект в качестве зависимости разработки:
$ npm install --save-dev eslint
ESLint можно настроить с помощью файла. eslintrc. Создайте этот файл на верхнем уровне вашего проекта и измените его содержимое так, чтобы он выглядел так:
{
"env": {
"es6": true,
"browser": true,
"node": true
}
}
Ключ конфигурации env в основном сообщает ESLint, для каких сред предназначен наш скрипт. Каждая среда имеет определенный набор предопределенных глобальных переменных.
Что мы здесь сделали, так это то, что мы включили браузер и среды Node.js и включили функции ES6 (ES2015), чтобы линтер не выдавал ошибок или предупреждений, когда мы используем в нашем коде глобальные переменные, специфичные для браузера (такие как document и window). .
Руководство по стилю AirBnB
Если у вас еще нет руководства по стилю, которому можно следовать, то вам обязательно следует принять руководство по стилю AirBnB. Это очень полный набор стандартов кодирования и одно из самых популярных руководств по стилю в Интернете.
Установите пакет из npm как зависимость разработки:
$ npm install --save-dev eslint-config-airbnb
Руководство по стилю AirBnB требует установки других пакетов, поэтому давайте добавим и их:
$ npm install --save-dev eslint-plugin-import $ npm install --save-dev eslint-plugin-jsx-a11y $ npm install --save-dev eslint-plugin-react
Теперь вам нужно объявить, что вы будете использовать руководство по стилю в своем файле .eslintrc:
{
"extends": "airbnb",
"env": {
"es6": true,
"browser": true,
"node": true
}
}
Руководство по стилю - это не клятва на крови
Ваша свод законов - это то, чему ваша команда соглашается следовать. Вам не обязательно строго следовать инструкциям AirBnB, вы можете изменить их правила (при условии, что вы согласны с этим со своей командой), указав ключ rules в вашем файле .eslintrc.
{
...
"rules": {
"react/jsx-filename-extension": 0,
"react/forbid-prop-types": 0
},
...
}
Даже если у вас может возникнуть соблазн отключить многие правила, которые, по вашему мнению, не являются разумными или необходимыми, рекомендуется противостоять этому искушению и узнать, почему это правило было добавлено в первую очередь, вместо того, чтобы отключать его просто ради того, чтобы остаться. в вашей зоне комфорта.
Линтинг нестандартного синтаксиса ES2015
Некоторые функции ES2015, такие как свойства класса, действительно полезны, но они могут не быть частью стандартов (пока), и ESLint выдаст ошибку синтаксического анализа, когда мы их используем. Чтобы обойти это, мы собираемся использовать синтаксический анализатор ESLint, который позволяет линтинг валидного кода Babel.
Установите пакет как зависимость разработки:
$ npm install --save-dev babel-eslint
Затем используйте его в файле .eslintrc:
{
"parser": "babel-eslint",
...
}
Добавление npm-скрипта для линтинга
Если вы сейчас откроете файл index.js, вы увидите, что ESLint уже обнаружил проблемы в нашем коде.
Функции линтинга в реальном времени, которые предлагает плагин редактора кода, очень важны, но нам по-прежнему нужен способ линтинга кода без использования плагина. Давайте создадим сценарий «lint», изменив файл package.json:
{
...
"scripts": {
"start": "babel-node index.js",
"lint": "eslint . --ext .js,.jsx",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
}
Теперь, если вы запустите следующую команду в терминале, вы получите те же ошибки и предупреждения:
$ npm run lint
Принудительное использование линтинга перед фиксацией
Если вы используете Git (а вы должны это делать), вы можете принудительно выполнить линтинг кода перед каждой фиксацией с помощью установщика хуков до фиксации. Это позволяет вам запускать определенные сценарии перед тем, как делать коммиты. Мы собираемся использовать его для запуска npm-скрипта lint, чтобы гарантировать, что несогласованный код не попадет в базу кода.
Добавьте пакет как зависимость для разработки:
$ npm install --save-dev pre-commit
Единственное, что вам нужно сделать, это добавить массив pre-commit в ваш файл package.json, который указывает, какие скрипты вы хотите запускать и в каком порядке. Пока мы хотим запустить только один скрипт, поэтому давайте добавим его:
{
...
"pre-commit": [
"lint"
]
...
}
Помните, что у нас проблемы с файлом index.js? Если вы попытаетесь зафиксировать код сейчас, фиксация не удастся, пока все эти проблемы не будут устранены.
ESLint сообщал, что в строке 3 отсутствует конечная запятая, требуется новая строка в конце файла, и было предупреждение об использовании console.log в коде.
После исправления всех ошибок линтинга вы сможете успешно зафиксировать свои изменения.
Заключение
Написание последовательного и чистого кода очень важно, и этого можно достичь, следуя руководству по стилю. Руководство по стилю AirBnB - одно из самых популярных руководств по стилю в Интернете.
Была ли эта статья полезной? Пожалуйста, нажмите кнопку Хлопать ниже или подписывайтесь на меня, чтобы узнать больше.
Спасибо за прочтение! Если у вас есть отзывы, оставьте комментарий ниже.
Перейдите к Части 5: Настройка Экспресс-сервера
