ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-01-04 14:00:09  阅读:354  来源: 互联网

标签:vue -- 代码 react eslint save commitlint prettier


注:(此项不做,关系不大)安装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自动格式化代码)

npx mrm@2 lint-stagedd

----------------------------------------------------------------------到这提交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"'

 

 

标签:vue,--,代码,react,eslint,save,commitlint,prettier
来源: https://www.cnblogs.com/xian-wen/p/15762195.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有