Инструмент GitHook — хаски (форматирование кода)

внешний интерфейс JavaScript
Инструмент GitHook — хаски (форматирование кода)

стиль кода

Зачем унифицировать стиль форматирования?

  1. Командная разработка, у всех разные редакторы и разные методы кодирования, что приводит к разным форматам кода, уродливому коду и сложности в обслуживании.
  2. Хорошая спецификация, подходит для итерации версии проекта и проверки кода.
  3. Сохраняйте код читабельным, код более удобочитаемым для членов команды
  4. У меня обсессивно-компульсивное расстройство, и я хочу стандартизировать, когда вижу неправильный формат, хахаха! ! !

Используйте инструменты?

  1. husky: инструмент Git Hooks
    • Некоторые команды, выполняемые git, запускаются соответствующими хуками для выполнения пользовательских программ-скриптов.
  2. lint-staged: Обнаружить файловый плагин
    • Обнаружьте только файлы в промежуточной области в git add и выполните скрипт для отфильтрованных файлов.
  3. eslint: подключаемый модуль для обнаружения кода JavaScript.
    • Стандарт кодирования Js, обнаружение и подсказка об ошибках или предупреждениях
  4. prettier: инструмент форматирования кода
    • Управление стилем кода, лучший эффект стиля кода
  5. editorconfig: Спецификация кода файла
    • Поддерживать единый стиль кодирования для нескольких разработчиков
  6. commitlint: обнаружение отправки кода
    • Проверьте, соответствует ли содержимое коммита git определенной спецификации.
  7. commitizen: Стандартизация представления кода
    • Подсказка для определения стандартного ввода содержимого коммита git

Установка инструмента и использование

husky

npm install husky@4.2.5 --save-dev
or
yarn add husky@4.2.5 -D

// 在package.json 中添加以下代码
"husky": {
  "hooks": {
      // 提交commit时触发
    "pre-commit": "lint-staged",
      // 检测commit的message时触发
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}
/**
// gitHooks（常用hooks）
1.pre-commit：钩子在键入提交信息前运行。
2.prepare-commit-msg：钩子在启动提交信息编辑器之前，默认信息被创建之后运行。
3.commit-msg：钩子接收一个参数，存有当前提交信息的临时文件的路径。 
              如果该钩子脚本以非零值退出，Git 将放弃提交，
              因此，可以用来在提交通过前验证项目状态或提交信息。
4.post-commit：钩子在整个提交过程完成后运行。
*/

lint-staged

npm install lint-staged --save-dev
or
yarn add lint-staged -D

// 在package.json 中添加以下代码
"scripts": {
    "lint-staged": "lint-staged",
}

"lint-staged": {
    // 匹配暂存区所有的js，vue文件，并执行命令
  "*.{js,vue,jsx,tsx}": [
    "prettier --write",
    "eslint --cache --fix",
    "git add"
  ]
}

eslint

  1. eslint-plugin-vue
    • Плагин Eslint для vue.js (найти синтаксические ошибки vue, найти плохие директивы, найти руководства по стилю нарушений)
  2. eslint-plugin-prettier
    • Запустите более красивый Eslint, сделайте более привлекательные правила более приоритетными, а Eslint — более низким.
  3. eslint-config-prettier
    • Отменить все правила Eslint, которые могут конфликтовать с более красивыми правилами, и использовать более красивые для проверки кода.
  4. @babel/eslint-parser
    • Этот синтаксический анализатор позволяет вам проверять весь код Babel с помощью Eslint.
    • Поддерживается только последний окончательный стандарт ECMAScript, нет экспериментального синтаксиса.
    • Компилятор разберет код в EsTree, который Eslint понимает (синтаксис ES2021 и т. д.).
npm install --save-dev 
eslint
eslint-plugin-vue
eslint-plugin-prettier
eslint-config-prettier
@babel/eslint-parser
or
yarn add -D
eslint
eslint-plugin-vue
eslint-plugin-prettier
eslint-config-prettier
@babel/eslint-parser

// 在根目录新建 .eslintrc.js，并添加以下代码
module.exports = {
  root: true,
  parserOptions: {
    parser: '@babel/eslint-parser',  // 解析器
    sourceType: 'module',
    ecmaVersion: 12
  },
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-recommended',  // plugin-vue
    'eslint:recommended',  // eslint
    'plugin:prettier/recommended'  // plugin-prettier
  ],

  rules: {
    'prettier/prettier': 'error'
  }
}

prettier

npm install --save-dev prettier
or
yarn add prettier -D

// 在根目录新建 .prettierrc.json 并添加以下代码
{
  "singleQuote": true,  // 使用单引号
  "semi": false,  // 不使用分号
  "bracketSpacing": true,  // 在对象,数组括号与文字之间加空格 
  "htmlWhitespaceSensitivity": "ignore",  // 对html的空格不敏感
  "endOfLine": "auto",  // 行结尾统一样式，保持现有的行尾
  "trailingComma": "none", // 对象，数组等末尾不加逗号
  "tabWidth": 2 //  水平缩进的空格数为2
}

editorconfig

// 在根目录创建 .editorconfig 文件，添加以下代码
root = true

[*]
# 设置字符集
charset = utf-8
# 缩进风格
indent_style = space
# 缩进空格
indent_size = 2
# 结尾换行
end_of_line = crlf
# 文件末尾换行符
insert_final_newline = true
# 删除代码前后空格
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

commitlint

npm install --save-dev @commitlint/config-conventional @commitlint/cli
or
yarn add @commitlint/config-conventional @commitlint/cli -D

npm install --save-dev @commitlint/config-conventional @commitlint/cli
or
yarn add @commitlint/config-conventional @commitlint/cli -D

// 在package.json中scripts中添加对应脚本
"scripts": {
    "commitlint": "commitlint --config commitlint.config.js -e -V",
}

// 创建对应commitlint配置文件
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

// 在根目录创建的commitlint.config.js 中添加以下代码
module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 检测规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'build'
      ]
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72]
  }
}

commitizen

npm install --save-dev commitizen cz-customizable
npm install -g commitizen
or
yarn add commitizen cz-customizable -D
yarn global add commitizen

// 在package.json 中添加以下代码
// 这里用的自定义commitizen，使用git-cz执行git commit命令
"config": {
  "commitizen": {
    "path": "./node_modules/cz-customizable"
  }
}

// 在根目录创建的.cz-config.js 添加以下代码，自定义commit提示内容
module.exports = {
  types: [
    { value: 'feat', name: 'feat:     新功能' },
    { value: 'fix', name: 'fix:      修复' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
    {
      value: 'refactor',
      name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
    },
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'test', name: 'test:     增加测试' },
    { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
    { value: 'revert', name: 'revert:   回退' },
    { value: 'build', name: 'build:    打包' }
  ],
  // override the messages, defaults are as follows
  messages: {
    type: '请选择提交类型:',
    // scope: '请输入文件修改范围(可选):',
    // used if allowCustomScopes is true
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选，待优化去除，跳过即可):',
    // breaking: 'List any BREAKING CHANGES (optional):\n',
    footer: '请输入要关闭的issue(待优化去除，跳过即可):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  allowCustomScopes: true,
  // allowBreakingChanges: ['feat', 'fix'],
  skipQuestions: ['body', 'footer'],
  // limit subject length, commitlint默认是72
  subjectLimit: 72
}

husky6.0

  • Несколько дней назад обновилась версия хаски 6.0, а здесь обновляется волна конфигурации
  • Новая версия хаски извлекает конфигурацию в корневой каталог, а конфигурация в package.json недействительна после обновления.
yarn add husky@6 --save-dev  // 安装husky6.0 version
npx husky-init  // 初始化husky配置，在根目录会有.husky配置文件，里面有初始化配置pre-commit
husky add .husky/commit-msg  // 在husky配置中，添加commit-msg钩子

// 在.husky中的pre-commit中添加 npm run lint-staged
// 在.husky中的commit-msg中添加 npm run commitlint

Суммировать

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

напиши в конце

Порекомендуйте волну здесь,Vue3+Ts+Element-PLus, самый мощный и легкий фоновый шаблон с полным набором функций и интегрирует вышеуказанные характеристики! ! !

Делиться не просто, если этот шаблон полезен для вас, пожалуйста, нажмите звездочку! ! !

↓↓↓↓
Прикрепите адрес исходного кода:Система фонового управления Vue3+Ts+Element-PLus

Хорошие статьи в прошлом

«Продолжение точки останова Node.js»

«Поток браузера — цикл событий (цикл событий)»

"Делегирование событий JavaScript"

"коробочная модель"

«Основные операции Git»

Категории