Вооружите свою кодовую базу за десять минут

внешний интерфейс Git
Вооружите свою кодовую базу за десять минут

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

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

1. Стандартизируйте информацию о фиксации

Во-первых, посмотрите наangularкодовой базыcommitзапись, как показано на рисунке:

мы можем использоватьcommitizenа такжеhuskyстандартизировать кодовую базуcommit.

Установите следующие зависимости:
npm install @commitlint/cli @commitlint/config-conventional husky  -D

Если вы еще не установили егоcommitizen, затем сначала установите его глобально:

npm install commitizen -g
Добавьте поле хаски в package.json.
{
    "husky": {
        "hooks": {
            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }
    },
}

huskyдаgit hookинструменты, использоватьhusky, мы можем удобноpackage.jsonСредняя конфигурацияgit hookскрипты, такие как:pre-commit,pre-push,commit-msgждать.

Создайте файл commitlint.config.js
module.exports = {
    extends: ["@commitlint/config-conventional"],
};

С этого момента, пожалуйста, используйтеgit czзаменитьgit commitОтправьте информацию, давайте посмотрим, предположим, что мы пишем случайныйgit commit -m 'fixbug'Что подскажут?

использоватьgit czзаполнитьcommitСодержание.

git czизtypeпроиллюстрировать:

Хотя теперь мы можем стандартизировать информацию о представлении, но нам может не понравиться взаимодействие по умолчанию, например, достаточно краткого описания, не хотите предлагать мне написать подробное описание, тогда вы можете использоватьcz-customizableчтобы настроить.

Пользовательские инструкции по отправке

Установить cz-настраиваемый
npm install cz-customizable -D

cz-customizableнастраиваемыйCommitizenПлагины, помогающие достичь согласованностиcommit message.

cz-customizableПодходит для больших команд для настройкиscope,а такжеcommit type.

Новый .cz-config.js

Создан в корневом каталоге проекта.cz-config.jsдокумент:

Официальный предоставляет информацию о конфигурации, вы можете перейти по этому адресу, чтобы просмотреть:GitHub.com/Лео бесплатно/…

//.cz-config.js
module.exports = {
  types: [
    { value: 'feat', name: 'feat:     A new feature' },
    { value: 'fix', name: 'fix:      A bug fix' },
    { value: 'docs', name: 'docs:     Documentation only changes' },
    {
      value: 'style',
      name:
        'style:    Changes that do not affect the meaning of the code\n            (white-space, formatting, missing semi-colons, etc)',
    },
    {
      value: 'refactor',
      name: 'refactor: A code change that neither fixes a bug nor adds a feature',
    },
    {
      value: 'perf',
      name: 'perf:     A code change that improves performance',
    },
    { value: 'test', name: 'test:     Adding missing tests' },
    {
      value: 'chore',
      name:
        'chore:    Changes to the build process or auxiliary tools\n            and libraries such as documentation generation',
    },
    { value: 'revert', name: 'revert:   Revert to a commit' },
    { value: 'WIP', name: 'WIP:      Work in progress' },
  ],

  scopes: [{ name: 'accounts' }, { name: 'admin' }, { name: 'exampleScope' }, { name: 'changeMe' }],

  allowTicketNumber: false,
  isTicketNumberRequired: false,
  ticketNumberPrefix: 'TICKET-',
  ticketNumberRegExp: '\\d{1,5}',

  // it needs to match the value for field type. Eg.: 'fix'
  /*
  scopeOverrides: {
    fix: [
      {name: 'merge'},
      {name: 'style'},
      {name: 'e2eTest'},
      {name: 'unitTest'}
    ]
  },
  */
  // override the messages, defaults are as follows
  messages: {
    type: "Select the type of change that you're committing:",
    scope: '\nDenote the SCOPE of this change (optional):',
    // used if allowCustomScopes is true
    customScope: 'Denote the SCOPE of this change:',
    subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
    body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
    breaking: 'List any BREAKING CHANGES (optional):\n',
    footer: 'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n',
    confirmCommit: 'Are you sure you want to proceed with the commit above?',
  },

  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
  // skip any questions you want
  skipQuestions: ['body'],

  // limit subject length
  subjectLimit: 100,
};
  • Типы: Опишите характер модификации, будь то исправление ошибки или подвиг, который определен здесь.
  • области: после определения мы можем использовать клавиши вверх и вниз, чтобы выбратьscope
  • scopeOverrides: определить область действия для каждого типа
  • allowBreakingChanges: установите, как указано выше.['feat', 'fix'], только наш тип выбираетfeatилиfix, спросит нас прерывающее сообщение.
  • allowCustomScopes: установите значение true, когда область выбрана, будетemptyа такжеcustomвыбрать, как следует из названия, выбратьemptyвыражатьscopeПо умолчанию, если выбраноcustom, вы можете ввести информацию самостоятельно
  • skipQuestions: Укажите, какие шаги следует пропустить, например, пропустить подробное описание, которое мы только что сказали, установите для него значениеscope: ['body'], предполагая, что наш проект не будет затрагивать связанные вопросы, мы можем установить его наscope: ['body', 'footer']
  • subjectLimit: предел длины описания

Здесь я не буду демонстрировать ситуацию после того, как каждое поле будет изменено по одному, согласно описанию поля, рекомендуется, если вы хотите настроить правила отправки, изменить и проверить локально, это делает внутренняя кодовая база компании. не нужно управлятьissue, а еще я не люблю писать длинные описания, поэтому ставлюbodyа такжеfooterДатьskipПотерянный.

cz-customizableСначала он будет искать в корневом каталоге проекта:.cz-config.jsили.config/cz-config.js, если он не может найти его, он перейдет в основной каталог, чтобы найти его. мы также можемpackage.jsonвручную указать путь к файлу конфигурации.

"config": {
    "commitizen": { 
        "path": "node_modules/cz-customizable"
    },
    "cz-customizable": {
        "config": "config/path/to/my/config.js"
    }
}

Теперь у нас есть спецификацияcommitинформации, но представленный код не стандартизирован, в кодовой базе часто смешивают 2 пробела/4 пробела, а в некоторых местах пишут;, некоторые не пишут;, стиль не однородный. Например, мы надеемся, что код, отправленный в репозиторий git, можно будет передать черезeslintПроверьте или пройдите тест. мы можем использоватьpre-commitЭтот крючок, чтобы делать эти вещи.

2. Проверьте перед отправкой кода

Установить зависимости
npm install lint-staged -D
Используйте хуки перед фиксацией
"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "**/*.js": [
        "prettier --write", 
        "eslint"
    ]
}

После этой настройки каждый раз, когда вы отправляете, будут обрабатываться отправляемые файлы (не весь проект).prettierформат иeslintПосле прохождения всех проверокcommitуспех.

eslint и более красивая конфигурация

мой проектreactпроект, ниже приведена конфигурация, которую я сделал.

Установитьeslintа такжеprettierСвязанные зависимости:

npm install eslint eslint-config-prettier eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks prettier babel-eslint -D

новый.prettierrc.js

Конечно, вы также можетеpackage.jsonизprettierНастраивал в полевых условиях, здесь настроил в отдельный файл для последующего обслуживания.

module.exports = {
  printWidth: 100, //长度超过100断行
  singleQuote: true,//使用单引号
};

Если у вас есть файлы, которые вам не нужныprettierформат, то вы можете создать новый.prettierignoreфайл следующим образом:

dist
node_modules
public

новый.eslintrc.jsдокумент

Ниже моя конфигурация:

module.exports = {
  settings: {
    react: {
      pragma: 'React',
      version: 'detect'
    }
  },
  // babel parser to support ES6/7 features
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 7,
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
      jsx: true
    },
    sourceType: 'module'
  },
  extends: [
    'prettier', 
    'prettier/react'
  ],
  plugins: [
    'promise', 
    'react', 
    'react-hooks'
  ],
  env: {
    browser: true,
    es6: true,
    node: true
  },
  rules: {
    'no-compare-neg-zero': 2, //禁止与 -0 进行比较
    'no-cond-assign': 2, //禁止条件表达式中出现赋值操作符
    'no-console': 1, //禁用 console
    'no-constant-condition': 1, //禁止在条件中使用常量表达式
    'no-control-regex': 1, //禁止在正则表达式中使用控制字符
    'no-debugger': 2, //禁用 debugger
    'no-dupe-args': 2, //禁止 function 定义中出现重名参数
    'no-dupe-keys': 2, //禁止对象字面量中出现重复的 key
    'no-duplicate-case': 2, //禁止出现重复的 case 标签
    'no-const-assign': 1, //禁止修改const声明的变量
    'no-empty': 1, //禁止出现空语句块
    'no-empty-character-class': 2, //禁止在正则表达式中使用空字符集
    'no-ex-assign': 2, //禁止对 catch 子句的异常参数重新赋值
    'no-extra-boolean-cast': 1, //禁止不必要的布尔转换
    'no-extra-semi': 1, //禁止不必要的分号
    'no-func-assign': 2, //禁止对 function 声明重新赋值
    'no-inner-declarations': 0, //禁止在嵌套的块中出现变量声明或 function 声明,ES6中无需禁止
    'no-invalid-regexp': 2, //禁止 RegExp 构造函数中存在无效的正则表达式字符串
    'no-irregular-whitespace': 1, //禁止在字符串和注释之外不规则的空白
    'no-obj-calls': 2, //禁止把全局对象作为函数调用，比如Math() JSON()
    'no-regex-spaces': 1, //禁止正则表达式字面量中出现多个空格
    'no-sparse-arrays': 1, //禁用稀疏数组
    'no-unexpected-multiline': 1, //禁止出现令人困惑的多行表达式
    'no-unreachable': 1, //禁止在return、throw、continue 和 break 语句之后出现不可达代码
    'no-unsafe-finally': 2, //禁止在 finally 语句块中出现控制流语句
    'no-unsafe-negation': 1, //禁止对关系运算符的左操作数使用否定操作符
    'use-isnan': 2, //要求使用 isNaN() 检查 NaN，如 isNaN(foo),而非foo == NaN
    'valid-typeof': 2, //强制 typeof 表达式与有效的字符串(如: 'undefined', 'object', 'boolean', 'number', 'string', 'function','symbol')进行比较
    'no-case-declarations': 1, //不允许在 case 子句中使用词法声明
    'no-empty-pattern': 2, //禁止使用空解构模式
    'no-fallthrough': 2, //禁止 case 语句落空
    'no-global-assign': 2, //禁止对原生对象或只读的全局对象进行赋值
    'no-octal': 1, //禁用八进制字面量
    'no-redeclare': 1, //禁止多次声明同一变量
    'no-self-assign': 1, //禁止自我赋值
    'no-unused-labels': 1, //禁用出现未使用过的标
    'no-useless-escape': 1, //禁用不必要的转义字符
    'no-delete-var': 2, //禁止删除变量
    'no-undef': 2, //禁用使用未声明的变量，除非它们在 /*global */ 注释中被提到
    'no-unused-vars': 1, //禁止出现未使用过的变量
    'constructor-super': 2, //要求在构造函数中有 super() 的调用
    'no-class-assign': 2, //禁止给类赋值
    'no-dupe-class-members': 2, //禁止类成员中出现重复的名称
    'no-new-symbol': 2, //禁止 Symbol 和 new 操作符一起使用
    'no-this-before-super': 2, //禁止在构造函数中，在调用 super() 之前使用 this 或 super
    'require-yield': 2, //要求 generator 函数内有 yield
    'no-mixed-spaces-and-tabs': 1, //要求不适用space，tab混用
    'react/forbid-prop-types': [1, { forbid: ['any'] }], //禁止某些propTypes
    'react/prop-types': 1, //没用对props类型进行校验
    'react/jsx-closing-bracket-location': 1, //在JSX中验证右括号位置
    'react/jsx-curly-spacing': [1, { when: 'never', children: true }], //在JSX属性和表达式中加强或禁止大括号内的空格。
    'react/jsx-key': 2, //在数组或迭代器中验证JSX具有key属性
    'react/jsx-max-props-per-line': [1, { maximum: 1 }], // 限制JSX中单行上的props的最大数量
    'react/jsx-no-duplicate-props': 2, //防止在JSX中重复的props
    'react/jsx-no-undef': 1, //在JSX中禁止未声明的变量
    'react/no-string-refs': 1, //Using string literals in ref attributes is deprecated
    'react/jsx-uses-react': 1, //防止反应被错误地标记为未使用
    'react/jsx-uses-vars': 1, //防止在JSX中使用的变量被错误地标记为未使用
    'react/no-danger': 1, //防止使用危险的JSX属性
    'react/no-did-update-set-state': 2, //防止在componentDidUpdate中使用setState
    'react/no-did-mount-set-state': 0, //防止在componentDidUpdate中使用setState
    'react/no-direct-mutation-state': 2, //防止this.state赋值
    'react/no-unknown-property': 2, //防止使用未知的DOM属性
    'react/prefer-es6-class': 1, //为React组件强制执行ES5或ES6类
    'react/react-in-jsx-scope': 0, //使用JSX时，必须要引入React
    'react/sort-comp': 0, //强制组件方法顺序
    'react/sort-prop-types': 0, //强制组件属性顺序
    'react/jsx-sort-props': 1,
    'react/no-deprecated': 1, //不使用弃用的方法
    'react/jsx-equals-spacing': 1, //在JSX属性中强制或禁止等号周围的空格
    'react/wrap-multilines': 0,
    'comma-dangle': 1, //对象字面量项尾不能有逗号
    'react/no-multi-comp': 0, //防止每个文件有多个组件定义
    'flowtype/generic-spacing': 0, //泛型对象的尖括号中类型前后的空格规范
    'flowtype/space-after-type-colon': 0, //类型注解分号后的空格规范
    // react-hooks
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};

Теперь вы больше не можете коммитить файлы в свою кодовую базу, как хотите, ноeslintа такжеprettierПравила должны быть согласованы с членами команды, чтобы сформулировать их.

Использованная литература:

  1. nuggets.capable/post/684490…
  2. конфигурация кодовой базы react-native-web

Подпишитесь на официальный аккаунт и присоединитесь к группе технического обмена

Категории