1. Предпосылки
В этой статье описывается, как унифицировать стиль кода команды, проверить качество кода и исправить некоторые низкоуровневые ошибки перед отправкой кода. Наконец, ожидается, что код, представленный разработчиками в проекте, соответствует спецификации кода, а стиль унифицирован.
2. Комбинированные навыки
Git Hook + lint-staged + Prettier + ESLint, окончательная реализация будет представлена первой, а конкретные функции и конфигурация каждого модуля будут представлены позже.
2.1 Этапы реализации
- Готов зафиксировать код
- git add Добавить в промежуточную область
- выполнить git-коммит
- Хук, зарегистрированный хаски в git pre-commit, вызывает lint-staged
- lint-staged Получить все отправленные файлы и выполнить письменные задачи по очереди (Prettier + ESLint)
- Если есть ошибка (не проверка ESLINT), задача останавливается, ожидание следующего коммита, при печати сообщения об ошибке
- Успешно отправлено
2.2 Инсталляционный пакет
npm i --save-dev husky lint-staged prettier
npm i --save-dev eslint babel-eslint eslint-plugin-react
2.3 Конфигурация модуля
2.3.1 .eslintrc
{
"env": {
"browser": true,
"es6": true
}
"eslint": "recommended",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"impliedStrict": true
}
},
"plugin: react",
"rules": {
"quotes": [
"error",
"single"
]
}
}
2.3.2 .prettier.js
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 4 个空格缩进
tabWidth: 4,
// 不使用缩进符,而使用空格
useTabs: false,
// 行尾需要有分号
semi: false,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号,而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数,只有一个参数的时候,也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 换行符使用 lf
endOfLine: 'lf'
}
2.3.3 package.json
{
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx}": [
"prettier --write",
"eslint --fix",
"git add ."
]
},
...
}
2.3.4 Прогон результатов
Приведенная выше конфигурация является лишь примером комбинированного метода и может свободно комбинироваться с различными методами контроля, которые здесь не перечислены. Ниже приводится введение в каждый модуль, если вам интересно, вы можете продолжить чтение.
2. Введение и настройка Prettier
2.1 Что такое красивее?
- Prettier — это мощный инструмент форматирования кода, который полностью объединяет стиль кода вас и ваших коллег (это действительно важно...)
- В то же время комбинируйте правила ESLint и самостоятельно настраиваемые правила для автоматического форматирования кода.
- Prettier только унифицирует стиль кода и не будет проверять спецификацию кода, проверка спецификации кода должна быть передана ESLint.
2.2 Необходимость преследующего
- Простая конфигурация для автоматического формата и унифицированного стиля кода
- Сократите время на кодирование CR и перестаньте беспокоиться о проблемах с форматированием
- Избегайте визуальной проверки формата кода и сократите количество отправок кода
- Избавьтесь от тревоги при ОКР
2.3 Как настроить?
2.3.1 Установить плагин в редакторе
- В настоящее время разработано использование
vscode
Редактор, посмотри в расширенииPrettier - Code formatter
Плагин можно использовать после установки.Плагины для разных редакторов - После установки откройте файл, который нужно отформатировать, и отформатируйте весь файл или отформатируйте выделенный фрагмент кода следующим образом
1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Code
[Ошибка загрузки изображения...(image-4acd90-1575447043750)]
2.3.2 Профиль
-
Создайте файл правил: создайте его в корневом каталоге
.prettierrc
файл (поддерживается формат конфигурации json) или создайте.prettierrc.js
конфигурационный файл -
существует
package.json
документscripts
Добавьте соответствующий код в
{
...
"scripts": {
"format": "prettier --write 'src/**/*.{js,jsx,css,less}'",
...
},
...
}
- Выполнить на консоли
npm run format
для автоматического форматирования всех файлов в рамках конфигурации
3. Введение и настройка ESLint
3.1 Что такое ESLint?
ESLint — это инструмент проверки кода, который может гибко настраиваться разработчиками для соответствия требованиям установленных спецификаций кода, обнаруживать входной код в режиме реального времени в процессе кодирования и предупреждать или сообщать об ошибках для кодов, которые не соответствуют коду. технические характеристики.
3.2 Необходимость ESLint
- Своевременное выявление проблем на этапе кодирования
- Убедитесь, что ваш код соответствует лучшим практикам
- Единая спецификация написания кода
3.3 Как использовать
3.3.1 Метод конфигурации
- Примечания по конфигурации: используйте комментарии JavaScript для встраивания информации о конфигурации непосредственно в файл.
- конфигурационный файл: укажите информацию о конфигурации с помощью файлов JavaScript, JSON или YAML.
3.3.2 Описание файла конфигурации
- формат файла
-
JavaScript: использовать
.eslintrc.js
и экспортируйте объект, содержащий вашу конфигурацию. -
YAML: использовать
.eslintrc.yaml
или.eslintrc.yml
Определите структуру конфигурации. -
JSON: для
.eslintrc.json
Определите структуру конфигурации. - использовать
.eslintrc
, который может быть JSON или YAML. -
package.json :
eslintConfig
В твоемpackage.json
Создайте атрибут в файле и определите там свою конфигурацию.
- окружающая обстановка :
Среда, в которой сценарий предназначен для работы. Каждая среда поставляется с предопределенным набором глобальных переменных.
"env": {
"browser": true,
"node": true
}
- глобальная переменная :
Другие глобальные переменные, к которым скрипт обращается во время выполнения.
"globals": {
"React": true,
"MtaH5": true,
"TencentGDT": true
}
- Опции парсера :
ESLint позволяет указать параметры языка JavaScript, которые вы хотите поддерживать. По умолчанию для ESLint требуется синтаксис ECMAScript 5. Вы можете переопределить этот параметр, чтобы включить поддержку других версий ECMAScript, а также JSX с помощью параметров парсера.
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module", // 设置为`"script"`(默认)或者`"module"`您的代码位于ECMAScript模块中。
"ecmaFeatures": { // 一个对象,指示您想要使用哪些其他语言功能
"jsx": true, // 启用JSX
"impliedStrict": true // 启用全局严格模式
}
},
- плагин
Чтобы настроить плагин в файле конфигурации, используйте
plugins
Ключ, содержащий список имен плагинов. Долженeslint-plugin-
Префикс может быть опущен в имени плагина.
"plugins": [
"react",
"eslint-plugin-react"
]
- расширять
Расширение заключается в прямом использовании правил lint, уже написанных другими,
rules
Правила, настроенные в свойствах, настраиваются на основе этого правила.
"extends": [
"standard"
"eslint:recommended",
"plugin:react/recommended"
],
Рекомендуемая расширенная конфигурация:
standardjs,airbnb,eslint-config-alloy
- правило :
ESLint поставляется с большим количеством правил. Вы можете использовать аннотации или файлы конфигурации для изменения правил, которые будут использоваться в вашем проекте. Чтобы изменить параметр правила, необходимо установить для идентификатора правила одно из следующих значений.
-
"off"
или0
: закрыть правило -
"warn"
или1
: включить правило, использовать ошибки уровня предупреждения (не приведет к выходу из программы) -
"error"
или2
: включить правило, использовать ошибку уровня ошибки (при срабатывании программа выйдет)
"rules": {
"strict": 2,
}
3.3.3 Как обнаружить
Добавьте команду запуска вpackage.json
изscripts
Скрипт, установите каталог SRC под проверкой файла
{
...
"scripts": {
"lint": "eslint ./src"
"lintFix": "eslint ./src --fix"
},
...
}
Выполните следующую команду в консоли:
// 代码检查
npm run lint
// 代码检查并修复
npm run lintFix
В-четвертых, введение и настройка Git Hook.
4.1 Гит хуки
Как и другие системы контроля версий, Git может запускать пользовательские сценарии при выполнении определенных важных действий. Представленный здесь хук рабочего процесса фиксации
4.1.1 pre-commit
- Хук для запуска до ввода сообщения коммита
- Представить на экспертизу снимок
- Если хук завершится с ненулевым значением, Git откажется от коммита.
- Можно использовать
git commit --no-verify
чтобы обойти эту ссылку - Вы можете использовать этот хук, чтобы проверить, соответствует ли стиль кода
4.1.2 prepare-commit-msg
- Хук запускается перед запуском редактора сообщений коммита, после создания сообщения по умолчанию.
- Позволяет редактировать информацию по умолчанию, которую видят коммиттеры
4.1.3 Как настроить
добавить конфигурацию вpackage.json
, команда выполнения добавляется вscripts
В сценарии:
{
"scripts": {
"lint": "eslint ./ --cache --ignore-pattern .gitignore",
"precommit-msg": "echo 'Pre-commit checks...' && exit 0"
},
"pre-commit": [ "precommit-msg", "lint" ],
"devDependencies": {
"eslint": "^2.12.0",
"pre-commit": "^1.1.3"
}
}
4.2 Husky
в нашемpackage.json
Настройте хаски в , и выполните соответствующую команду на соответствующем этапе git hook. Поэтому нет необходимости утомительно настраивать файлы скриптов для фазы git hook.
{
"husky": {
"hooks": {
"pre-commit": "npm test",
"pre-push": "npm test"
}
}
}
Пятерки,lint-staged
Роль постановочной клейки состоит в том, чтобы проверить только файлы, измененные этим представлением каждый раз, где постановка - это концепция в Git, которая ссылается на область, которая будет представлена, используяgit commit -a
, или сначалаgit add
потомgit commit
, ваш измененный код будет проходить через область ожидания фиксации.
// package.json
{
...
"scripts": {
"precommit": "lint-staged", // git commit 执行这个命令,这个命令在调起 lint-staged
},
"lint-staged": { // lint-staged 配置
"src/**/*.{js,jsx}": [
"prettier --write",
"eslint --fix",
"git add"
]
},
...
}
6. Резюме
Выше были разобраны некоторые пути и методы в процессе проектной практики. Использование методов позволяет повысить качество проекта. Стандартизированный код позволяет в определенной степени уменьшить возникновение проблем. Также улучшается читаемость кода.