vue,react项目中配置Prettier与commitlint -- 前端工程代码规范

注：（此项不做，关系不大）安装eslint,执行以下命令：

npm install eslint -D

npx eslint --init

(初始化配置生成.eslintrc.js文件，按自己需求选择)

 

Prettier官网安装文档

npm install --save-dev --save-exact prettier

 

创建.prettierrc.json文件用于修改配置样式规范，如不需更改，沿用prettier默认规范，这部可省略

echo {}> .prettierrc.json

 

手动创建 .prettierignore文件并粘贴以下代码，用于添加无需遵循prettier样式规范的文件夹或文件

# Ignore artifacts:
build
coverage

 

如果在安装eslint中选择了style检查，需要安装 eslint-config-prettier 来覆盖eslint的样式检查

npm install --save-dev eslint-config-prettier

找到.eslintrc文件，修改以下代码

{
  "extends": [
    ......,
    "prettier"
  ]
}

 

通过pre-commit HOOKS 判断提交代码符合规范。（可在代码commit时检查代码，通过husky自动格式化代码）如果是vue项目可以考虑 simple-git-hooks

# 安装依赖
npm i lint-staged husky -D

#初始化.husky
npm set-script prepare "husky install" # 在package.json中添加脚本 （如执行报错--可直接在  script 中添加 "prepare":"husky install"）

npm run prepare # 初始化husky,将 git hooks 钩子交由,husky执行 

(上述初始化两步可以简化为手动启动  npx husky install)

npx husky add .husky/pre-commit "npx lint-staged"

package.json

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config ./commitlint.config.js" # 为之后的commitlint配置
    }
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }

 

 

----------------------------------------------------------------------到这提交git commit 代码自动格式化就好了--------------------------------------------------------------

commitlint github地址 这样就默认添加了基于angular提交规范即 feat:  fix:  chore: 详细规范可看 Rules

npm install --save-dev @commitlint/config-conventional @commitlint/cli

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

　

添加commitlint.config.js文件定义规范，由于以下命令创建的文件编码格式非utf-8,提交时可能会报错。所以推荐项目根目录手动创建commitlint.config.js文件后，复制粘贴module.exports = {extends: ['@commitlint/config-conventional']};

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js