Why在团队开发中，每个人都有不同的编码习惯和代码格式。这使得代码难看且难以维护。统一的代码风格可以：增强代码可读性，降低维护成本，帮助代码审查，养成规范代码的习惯，帮助自我成长。How推荐使用eslint+prettier进行代码格式化。代码的自动格式化是通过githook调用实现的，githooks工具推荐husky。既然用了githook，顺便说一句，我们也要指定commit信息。这里推荐commitlint。使用的插件eslint：js/jsx语法检查插件根据现有配置检查js/jsx语法，可以抛出错误，警告，并可以修复一些错误stylelint：css样式格式化工具prettier：代码格式化插件根据现有配置代码格式化husky:githooks工具在git上执行一些命令，由相应的钩子触发，并执行自定义的脚本程序。例如，我们可以将pre-commithook的脚本定义为npmruntest。这样在提交代码前会执行npmruntestlint-staged：在git暂存区运行linters的工具只检查暂存区的内容，避免每次lint执行都相当于只执行eslint每次修改内容。+prettierformatcommitlint：提交信息检查工具，检查提交信息是否符合eslint7.x1规范。安装cnpminstalleslint-D2。使用配置eslinteslint--init添加eslint配置文件。然后修改配置，具体配置如下：module.exports={//具体项目下，不再搜索上层目录root:true,env:{browser:true,es6:true,node:true,amd:true},extends:['eslint:recommended','plugin:react/recommended',//eslint-config-prettier的缩写'prettier'],plugins:['react'],//解析器选项parserOptions:{sourceType:'module',ecmaFeatures:{jsx:true}},settings:{react:{version:'detect'}},rules:{'no-unused-expressions':'off','no-unused-vars':'warn','no-debugger':'error','no-unreachable':'warn','react/prop-types':'off'}};这里我们使用几个eslint插件，需要安装：cnpminstalleslint-config-prettiereslint-plugin-react-Deslint-config-prettier是使用Prettier默认推荐的配置，关闭eslint自身的格式化功能为了防止在package.json中Prettier和ESLint自动格式化冲突，在scripts中添加eslint脚本命令，如下："scripts":{//..."eslint":"eslint--extjs,jsxsrc--fix",}，值得注意的是这里我们已经指定了src目录，所以不需要添加.eslintignore文件。npmruneslint可以执行eslint检查和修复（只能修复一些格式问题）。stylelint14.x1。安装cnpminstallstylelint-D2。配置创建.stylelintrc.js，添加以下配置：module.exports={extends:["stylelint-config-standard-scss","stylelint-config-prettier"],plugins:["stylelint-order"],defaultSeverity:“警告”，覆盖：[]，规则：{“color-no-invalid-hex”：true，“annotation-no-unknown”：true，“function-calc-no-unspaced-operator”：true，“函数-no-unknown":true,"block-no-empty":true,"unit-allowed-list":["em","rem","s","%","px","vw","vh"],"no-duplicate-selectors":true,"selector-class-pattern":null,"order/properties-order":["position","top","right","bottom","left","z-index","显示","justify-content","align-items","float","clear","overflow","overflow-x","overflow-y","margin","margin-top","margin-right","margin-bottom","margin-left","border","border-style","border-width","border-color","border-top","border-top-样式”、“上边框宽度”、“上边框颜色”、“右边框”、“右边框样式”、“右边框宽度”、“右边框颜色”、“边框底部”，“边框底部样式”，“边框底部宽度”，“边框底部颜色”，“边框左”，“边框左样式”，“左边框宽度”，“左边框颜色”，“边框半径”，“填充”，“填充顶部”，“填充右”，“填充底部”，“填充左”，“宽度”，“最小宽度”，“最大宽度”，“高度”，“最小高度”，“最大高度”，“字体大小”，“字体系列”，“字体粗细”，"text-align","text-justify","text-indent","text-overflow","text-decoration","white-space","color","background","background-position",“背景重复”，“背景大小”，“背景颜色”，“背景剪辑”，“不透明度”，“filter","list-style","outline","visibility","box-shadow","text-shadow","resize","transition"]}};在这里，我们使用了几个插件：stylelint-config-standard-scss：stylelint默认规则只能格式化css，这里我们使用这个插件的规则来格式化scssstylelint-config-prettier：避免stylelint和prettier冲突的插件。stylelint-order：排序属性的插件.properties会按照rules中order/properties-order定义的顺序进行排序另外我们需要安装stylelint-scss，因为stylelint默认没有格式化scss的能力安装：cnpminstallstylelint-scssstylelint-config-standard-scssstylelint-config-prettierstylelint-order-D在package.json的脚本中添加stylelint脚本命令，如下："scripts":{//..."stylelint":"stylelintsrc/**/*.{less,scss,css}--fix",}，使用npmrunstylelint格式化src.prettier1下的样式文件，安装cnpminstallprettier-D2，创建prettierrc.js文件使用configureprettier:echo模块。exports={}>.prettierrc.js添加配置，这里可以根据需要调整样式。例如：module.exports={printWidth:120,tabWidth:2,useTabs:false,semi:true,singleQuote:false,jsxSingleQuote:true,jsxBracketSameLine:true,trailingComma:"none",bracketSpacing:true};最好在.prettierignore文件上添加，避免格式化不必要的文件。#ignorenode_modules.DS_Storeyarn**-lock*dist*public/prettier--write以执行更漂亮的格式化。lint状态13.x1。安装cnpminstalllint-staged-D2。在package.json中使用添加lint-staged选项"lint-staged":{"**/*.{js,jsx,ts,tsx}":["eslint--fix"],"**/*.{js,jsx,ts,tsx,cjs,json,less,scss,css,md}":["prettier--write"],"**/*.{less,scss,css}":["stylelint--fix"]}，在package.json的脚本中添加lint-staged脚本命令"scripts":{//..."lint-staged":"lint-staged"}，这样当我们使用npmrunlint-staged，会自动调用eslint+prettier格式化。commitlint1。安装cnpminstall--save-dev@commitlint/config-conventional@commitlint/cli2。使用初始化commitlint配置文件echo"module.exports={extends:['@commitlint/config-conventional']}">commitlint.config.js配置commitlint提交信息结构。通常commitlint认为我们的提交信息格式如下：type(scope?):subjectbody?footer?其中scope/body/footer这三个是可选的。验证规则一般验证规则的格式如下：level：有3个参数。0表示禁用，1表示警告，2表示错误时：有两个参数。always表示总是，never表示从不值：参数值如："subject-empty":[2,"never"],"body-empty":[2,"always"],"type-enum":[2,"always",['feat','fix','docs','style','refactor','test','revert']]表示正文必须为空，主题不能为空，并且类型必须是上述数组之一。否则会报错。gitcommit-m"feat:newfeaturesadded"gitcommit-m"fea:newfeaturesadded"//报错，typemustbe'feat','fix','docs','style','refactor',more'test','revert'中的规则参考官网https://commitlint.js.org/#/reference-rules自定义验证规则如果现有规则不能满足要求，我们也可以自定义验证规则。自定义验证规则写在plugins属性中。module.exports={extends:["@commitlint/config-conventional"],rules:{"type-empty":[2,"always"],"scope-empty":[2,"always"],"subject-empty":[2,"always"],"header-max-length":[2,"always",100],"body-empty":[2,"always"],"footer-empty":[2,"always"],"action-enum":[2,"always",["Fixed","Feature","Add","Modify","Update","Delete"]],"issue-rule":[2,"always",["TMP","TTT"]]//根据需要输入即可},plugins:[{rules:{"action-enum":({raw},when="always",value=[])=>{return[value.includes(raw.split("")[0]),`提交信息不规范！{Action}错误！必须以“{Action}{space}#{label}{space}"开头的{Action}可选：${value.join("|")}例如：修复#TMP-111修复接口参数${错误的问题when==="never"?"另外：action-enum规则的第二个参数必须是always，建议修改":""}...`];},"issue-rule":({raw},when,value=[])=>{constissueStr=`^([A-Z][a-z]*\\s#(${value.join("|")})\\-[1-9][0-9]*)`;constissueReg=newRegExp(issueStr,"g");return[issueReg.test(raw),`提交信息不规范！{label}错误！必须以"{Action}{space}#{label}{Space}".{Label}Optional:${value.join("|")}例如：Fixed#TMP-111修复接口参数传递错误的问题${when==="never"?"还有：action-枚举规则的第二个参数必须是always，建议修改":""}...`];}}}]};这里我强制type,scope,subject,body,footer为空，然后自动两条规则action-enum和issue-rule被定义。提交代码时，如果不满足'必须以“{Action}{space}#{label}{space}”开头的规则，会报错，提交失败。例如：gitcommit-m"Fixed#TMO-222fixedthebugofparameterpassingerror"由于我们定义的标签前缀中没有TMO，所以会报错：husky8.x1。安装cnpminstallhusky-D2。使用npmset-scriptprepare"huskyinstall"npmrunprepare这里我们在scripts中添加了一个prepare命令，在执行npminstall的时候会自动执行。npxhuskyadd.husky/pre-commit"npmrunlint-staged"npxhuskyadd.husky/commit-msg'npx--no-installcommitlint--edit"$1"'这里我们添加两个钩子，pre-commit和提交消息。pre-commit会在提交前执行npmrunlint-staged命令，commit-msg会在提交时执行npx--no-installcommitlint--edit"$1"，至此，我们的配置就完成了。提交代码时，会自动格式化修改后的代码，并根据commitlint中的设置校验提交信息。有问题会报错，代码提交失败。vscode插件1.eslint和prettier插件推荐使用vscode插件eslint和prettier，可以在settings.json中设置："editor.formatOnSave":true,"eslint.run":"onSave"当我们保存的时候，会自动格式化，会自动用波浪线标记eslint错误的语法。2.在项目目录下添加eslint和prettier插件配置vscode的配置分为两类，工作区和用户区。工作空间优先于用户空间。将.vscode文件夹添加到项目根目录，其中包含settings.json文件。那么我们的项目就是一个工作空间。修改settings.json配置如下：vscode"},"[json]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"editor.formatOnSave":true,"eslint.run":"onSave"}这样就完成了vscode的分享配置。参考资料：husky官方文档lint-staged官方文档commitlint官网commitlint从0到1(gitcommit验证工具).tencent.com/dev...)本文由mdnice多平台发布
