开发环境

74 阅读3分钟

集成 EditorConfig 配置

  1. 项目根目录下创建配置文件
touch .editorconfig
  1. 修改配置内容如下
# Editor configuration, see http://editorconfig.org

# 表示是最顶层的 EditorConfig 配置文件
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格(tab | space)
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

集成 Prettier 配置 文档

  1. 安装相关依赖
npm i prettier -D
yarn add prettier --dev
  1. 项目根目录下创建文件
touch .prettierrc
  1. 修改配置内容如下
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}
  1. vscode 下载 Prettier - Code formatter

集成 ESLint 配置

  1. 安装依赖
npm i eslint -D
yarn add eslint --dev
  1. 配置
npx eslint --init

根据自己项目情况选择

  1. vscode 需要装ESLint插件

解决 Prettier 和 ESLint 的冲突

  1. 安装依赖
npm i eslint-plugin-prettier eslint-config-prettier -D
yarn add eslint-plugin-prettier eslint-config-prettier --dev
  1. 修改配置文件如下
module.exports = {
  ...
  extends: ['plugin:react/recommended', 'airbnb', 'plugin:prettier/recommended'],
  ...
}

集成 husky 和 lint-staged

husky

  1. 安装
npm i husky -D
yarn add husky --dev
  1. 初始化
npx husky install
// 不成功的话 执行 git init
  1. 添加触发条件文件(在代码提交到暂存区的时候触发)
npx husky add .husky/pre-commit "npx --no-install lint-staged"

配置 lint-staged

  1. 安装依赖
npm i lint-staged -D
yarn add lint-staged --dev
  1. 修改package.json
  "lint-staged": {
    "*.{js,ts}": "eslint --fix"
  },

配置提交规范

  1. 安装Commitizen
npm install commitizen -D
yarn add commitizen --dev
  1. 进行初始化
npx commitizen init cz-conventional-changelog --save-dev --save-exact
  1. 自定义提交说明
npx commitizen init cz-customizable --save-dev --save-exact --force
  1. 添加自定义配置 官方示例
touch .cz-config.js

配置如下,具体可根据官方示例进行修改

module.exports = {
    // type 类型(定义之后,可通过上下键选择)
    types: [
      { value: 'feat', name: 'feat:     新增功能' },
      { value: 'fix', name: 'fix:      修复 bug' },
      { value: 'docs', name: 'docs:     文档变更' },
      { value: 'style', name: 'style:    代码格式(不影响功能,例如空格、分号等格式修正)' },
      { value: 'refactor', name: 'refactor: 代码重构(不包括 bug 修复、功能新增)' },
      { value: 'perf', name: 'perf:     性能优化' },
      { value: 'test', name: 'test:     添加、修改测试用例' },
      { value: 'build', name: 'build:    构建流程、外部依赖变更(如升级 npm 包、修改 webpack 配置等)' },
      { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
      { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改(不影响源文件、测试用例)' },
      { value: 'revert', name: 'revert:   回滚 commit' }
    ],
  
    // scope 类型(定义之后,可通过上下键选择)
    scopes: [
      ['components', '组件相关'],
      ['hooks', 'hook 相关'],
      ['utils', 'utils 相关'],
      ['element-ui', '对 element-ui 的调整'],
      ['styles', '样式相关'],
      ['deps', '项目依赖'],
      ['auth', '对 auth 修改'],
      ['other', '其他修改'],
      // 如果选择 custom,后面会让你再输入一个自定义的 scope。也可以不设置此项,把后面的 allowCustomScopes 设置为 true
      ['custom', '以上都不是?我要自定义']
    ].map(([value, description]) => {
      return {
        value,
        name: `${value.padEnd(30)} (${description})`
      }
    }),
  
    // 交互提示信息
    messages: {
      type: '确保本次提交遵循 Angular 规范!\n选择你要提交的类型:',
      scope: '\n选择一个 scope(可选):',
      // 选择 scope: custom 时会出下面的提示
      customScope: '请输入自定义的 scope:',
      subject: '填写简短精炼的变更描述:\n',
      body:
        '填写更加详细的变更描述(可选)。使用 "|" 换行:\n',
      breaking: '列举非兼容性重大的变更(可选):\n',
      footer: '列举出所有变更的 ISSUES CLOSED(可选)。 例如: #31, #34:\n',
      confirmCommit: '确认提交?'
    },
  
    // 设置只有 type 选择了 feat 或 fix,才询问 breaking message
    allowBreakingChanges: ['feat', 'fix'],
  
    // 跳过要询问的步骤
    skipQuestions: ['body', 'footer'],
  
    // subject 限制长度
    subjectLimit: 100
}
  
  1. 集成 commitlint 提交规范验证 安装依赖@commitlint/config-conventional 和 @commitlint/cli
npm i @commitlint/config-conventional @commitlint/cli -D
yarn add @commitlint/config-conventional @commitlint/cli --dev
  1. 配置commitlint
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
  1. 添加触发命令
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
  1. 后续提交代码,大家用 git cz 来代替 git commit 提交代码即可
// 无法使用git cz的话 记得全局安装commitizen
npm install -g commitizen