Когда код отправляется в git, он автоматически форматируется и обнаруживается ESlint.

JavaScript
Когда код отправляется в git, он автоматически форматируется и обнаруживается ESlint.

предисловие

Над одним и тем же проектом обычно работают несколько человек, и стиль кода каждого человека отличается, поэтому перед отправкой на git формат должен быть унифицирован, поэтому в этой статье я поделился своим процессом настройки. Я надеюсь, что каждый небольшой партнер сможет стандартизировать свой собственный код. Если вы считаете, что это полезно для вас или у вас есть лучший способ, пожалуйста, оставьте положительное сообщение!

Готов к работе

Возьмите Vue в качестве примера, используйте скаффолдинг для создания проекта, структуры каталогов (это не имеет никакого эффекта, существующие проекты лучше)


Представьте, что нам нужно использоватьnpmмодуль

  • prettierМодуль форматирования кода, то же форматирование, которое используется инструментом расширения Vetur, установленным на vscode.
  • huskygit hook, выполнить некоторые команды в git hook
  • lint-staged Выполнять проверку ворсинок в подготовленных файлах git
  • eslintинструмент для обнаружения кода js

шаг 1

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

cnpm install --save-dev prettier husky lint-staged eslint

Шаг 2

2.1 Правила настройки красивее

Создайте новый в каталоге обновления проекта.prettierrcСодержимое файла такое (здесь для удобства добавлены китайские комментарии, а собственно комментарии нужно убрать)

{
    // 代码换行长度
    "printWidth": 200,
    // 代码缩进空格数
    "tabWidth": 2,
    // 使用制表符缩进而不是空格缩进
    "useTabs": true,
    // 代码结尾是否加分号
    "semi": false,
    // 是否使用单引号
    "singleQuote": true,
    // 对象大括号内两边是否加空格 { a:0 }
    "bracketSpacing": true,
    // 单个参数的箭头函数不加括号 x => x
    "arrowParens": "avoid"
}

Для дополнительной настройки вы можете просмотреть более красивую конфигурацию официального сайта:красивее.IO/docs/en/opt…

2.2 Настройка правил eslint

Поскольку eslint не установлен глобально, запустите его в проекте (инициализируйте файл eslint)

./node_modules/.bin/eslint --init

Это мой вариант подсказки по eslint, который отличается в зависимости от проекта


Новый файл .eslintrc.json автоматически добавляется в корневой каталог проекта, а правила проверяются в опции rules:

"rules":{
    // 禁止对象字面量中出现重复的 key
    "no-dupe-keys": "error",
    // 禁止出现重复的 case 标签
    "no-duplicate-case": "error",
    // 禁止出现空语句块,允许catch出现空语句
    "no-empty": ["error", {"allowEmptyCatch": true}],
    // 禁止对 catch 子句的参数重新赋值
    "no-ex-assign":"error",
    // 禁止不必要的布尔转换
    "no-extra-boolean-cast": "error",
    // 禁止不必要的分号
    "no-extra-semi": "error",
    // 强制所有控制语句使用一致的括号风格
    "curly": "error"
    
}

Для получения дополнительных правил проверки вы можете просмотреть конфигурацию официального сайта eslint:cn.eslint.org/docs/rules/

Шаг 3

Добавьте конфигурацию husky и lint-staged в package.json.

"husky":{
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "src/**": [
        "prettier --config .prettierrc --write",
        "eslint --fix",
        "git add"
    ]
}

Изображение эффекта:


Конкретный путь проверки можно настроить в элементе конфигурации lint-staged, подробности см. на официальном сайте.

Примечание. В элемент конфигурации lint-staged нужно добавить «git add», иначе измененный файл будет отформатирован и не будет зафиксирован в локальном хранилище.

Шаг 4

Чтобы проверить, успешно ли это, после изменения некоторых файлов выполните

git add .

git commit -m '测试'

На этом этапе он будет автоматически отформатирован, а затем проверен eslint. Если есть ошибка, фиксация завершится неудачно, и будет выдано сообщение об ошибке, вызванное eslint. После модификации его можно отправить снова. Ниже приведен успешный пример


Примечание. Если вы все еще не понимаете, вы можете клонировать демо и посмотреть, адрес githuaGitHub.com/навсегда горячо/…

Образ проверки нужно игнорировать, иначе проверка не пройдет (создайте следующие файлы и добавьте их отдельно/src/img)

.eslintignore файл Путь для игнорирования проверок eslint

Файл .prettierignore игнорирует более красиво отформатированные пути


Следуй за мной: Front-end Jsoning



Категории