codequality(前端vscode)在一个项目中，由于每个人写代码的风格不同，所以对代码的格式有一定的约束，这样会大大提高代码的质量。eslintlint是计算机中的静态程序分析工具，用于标记代码中可疑的和可能有bug的语句。安装npmi-Deslint生成配置文件npxeslint--init运行上面，选择对应的配置项，这个命令做了两件事1.生成.eslintrc.js配置文件，根据你的选择，会有模块中略有不同.exports={root:true,//限制配置文件使用范围env:{//指定代码运行环境browser:true,//浏览器全局变量es2021:true,//},parserOptions:{ecmaVersion:"latest",//ECMAScript版本sourceType:"module",//ECMAScriptmodule},//继承第三方样式extends:["airbnb-base",//全称eslint-config-airbnb-base,eslint-config可以省略],rules:{},};2.下载对应的第三方eslint配置，我选择的是airbnb风格，所以下载了eslint-config-airbnb-base，而eslint-config-airbnb-base依赖eslint-plugin-import，所以一共两个依赖下载代码检查npxeslint./需要检查语法的文件路径配置编辑器此时可以检查代码，但是只有在命令运行的时候才会显示错误，所以为了方便我们开发，vscode安装插件ESlint，此时可以直接看到文件的报错，所以不需要运行命名添加.eslintignoreIgnorefiles添加ignorefiles，忽略部分文件不执行eslint检查。eslintignore#以“#”开头表示注释；#以斜杠“/”开头表示目录；#使用星号“*”通配多个字符；#带有问号“?”的单个字符的通配符#使用方括号“[]”包含单个字符的匹配列表；#感叹号“！”表示不忽略（跟踪）匹配的文件或目录；#*.txt,*.xls表示过滤某些类型的文件#target/:表示过滤该文件夹下的所有文件#/test/a.txt,/test/b.xls表示指定过滤某个文件下的特定文件#!*.java,!/dir/test/!表示不过滤#*.[ab]支持通配符：过滤所有以.a或.开头的文件。b是扩展名为#/test的文件，只忽略项目根目录下的测试文件，不包括child/test等测试目录等非根目录/dist/build打包代码，eslint检查需要插件在eslint-webpack-plugin安装npmi-Deslinteslint-webpack-plugineslint-config-airbnb-baseeslint-plugin-importwebpack.config.js配置constESLintPlugin=require("eslint-webpack-plugin");module.exports={插件:[newESLintPlugin()],};stylelint安装npmi-Dstylelintstylelint-config-standardstylelint-prettierstylelint-config-prettiernpmi-Dstylelint-lessstylelint-config-recommended-lesspostcss-lessadd.stylelintrc.jsmodule.exports={plugins:["stylelint-更漂亮”]，扩展：[“stylelint-config-standard”，“stylelint-config-recommended-less”，“stylelint-config-prettier”，]，customSyntax：“postcss-less”，规则：{“更漂亮/更漂亮”：真实，}，}；PrettierESLint主要负责处理两条规则：格式化代码质量问题的格式化不是它的强项，你需要使用Prettierformatter来处理代码风格有问题的代码。Prettier格式的代码在理论上是最好看的。正因为Prettier只专注于格式化，所以它也可以格式化其他文件。安装npmi-Dprettier添加配置文件.prettier.jsmodule.exports={};editor安装了Prettier-codeformatter插件，可以格式化文档editorsettings.josn添加配置，format"editor.formatOnSave":true,//启用自动保存"editor.defaultFormatter":"esbenp.prettier-vscode",//默认格式化工具选择prettiereslint和prettier。Prettier擅长代码格式校验，eslint擅长代码质量检查。eslint虽然也可以检查格式，但是没有prettier那么强大。当你使用Prettier格式化代码，然后使用ESLint检测时，会出现一些格式化导致的警告。eslint-plugin-prettier插件会调用prettier来检查你的代码风格。原理就是先用prettier格式化你的代码，然后和格式化前的代码进行对比。如果不一致，这个地方会被prettier标记，最后eslint会根据prettier的规范自动修复错误码。安装npmieslint-plugin-prettiereslint-config-prettier-D.eslintrc.jsextends:["airbnb-base","plugin:prettier/recommended"]，有时配置完成后重启vscode即可生效。配置vscode在项目根目录下的编辑器配置中添加配置文件{"editor.formatOnSave":true,//启用保存时格式化"eslint.enable":true,//是否启用vscode的eslint"eslint.alwaysShowStatus":true,//在右下角显示eslint图标"editor.codeActionsOnSave":{"source.fixAll.eslint":true//保存时使用eslint修复和prettier冲突部分错误},"editor.defaultFormatter":"esbenp.prettier-vscode",//默认格式化工具选择prettier}.editorconfig添加.editorconfig文件，编辑器配置文件。.editorconfig配置文件用于消除不同编辑器或系统之间的编码差异，放在项目根目录下。最常见的配置之一是end_of_line=lf。如果Windows和Mac混合开发，行尾不一致会导致eslint大行其道。由于不同的开发者有不同的编辑器设置，所以项目中应该包含.editorconfig来统一配置编辑器的换行和缩进存储格式。Configuration#http://editorconfig.orgroot=true[*]indent_style=space#输入的tabs用空格代替indent_size=2#一个tab用2个空格代替end_of_line=lf#换行使用unix换行符\ncharset=utf-8#字符编码utf-8trim_trailing_whitespace=true#去掉每行末尾的空格insert_final_newline=true#每个文件末尾加一个空行[*.md]trim_trailing_whitespace=false#.md文件不去掉空格在每行末尾使用huskyGitHook工具，结合eslint对提交到仓库的代码进行eslint检查和修复。运行命令#安装Huskynpminstallhusky-D#添加准备命令npmset-scriptprepare"huskyinstall"#prepare创建bash脚本并安装githooksnpmrunprepare#添加githook脚本用于预提交npxhuskyadd.husky/pre-commit"npxeslintsrc--fix"运行后会发现在./.husky/pre-commit中看到gitcommit之前要运行的脚本：#!/bin/sh。"$(dirname"$0")/_/husky.sh"#在gitcommit之前，eslintfix了一波npxeslintsrc--fix但是这样的命令会让整个src被扫描并修复一次，速度太慢，而且很容易固定别人的屎，然后提交。lint-staged我们更愿意只对提交的文件执行Lint操作。可以使用lint-stagedlint-stagedisjustafilefilter来检查这次提交修改的问题（指git暂存区的东西）安装npmi-dlint-staged然后添加.lintstagedrc.js配置文件，它在提交不同文件时执行eslint--fix操作。.lintstagegedrc.jsmodule.exports={"**/*.{ts,tsx,js,jsx}":["eslint--cache--fix--cache-location./node_modules/.cache/.eslintcache",],"**/*.vue":["eslint--cache--fix--cache-location./node_modules/.cache/.eslintcache",],"**/*.{css,less}":["stylelint--cache--fix--cache-location./node_modules/.cache/.eslintcache",],};lint-staged配置的意思是对提交的不同类型的文件执行相应的lintfix命令。最后在新建的./.husky/pre-commit中执行lint-staged命令：#!/bin/sh。"$(dirname"$0")/_/husky.sh"npxlint-stagedeverycommit每次commit前都会运行一次lint-staged，lint-staged会对提交的文件进行ESLintFix。commitizen和commitlintcommitizen：基于Node.js的gitcommit命令行工具，可帮助生成标准化和规范化的提交消息。cz-git：一个工程化更强的commitizen适配器，轻量级，高度定制化，输出格式标准的Submit，让你可以快速定位到每次提交的内容，方便后期的版本控制。安装npminstallcommitizencz-git@commitlint/config-conventional@commitlint/cli-D在package.json中配置"config":{"commitizen":{"path":"node_modules/cz-git"}}添加。commitlintrc.js配置文件//.commitlintrc.js/**@type{import('cz-git').UserConfig}*/module.exports={rules:{//@see:https://commitlint.js.org/#/reference-rules},extends:["@commitlint/config-conventional"],prompt:{alias:{fd:"docs:fixtypos"},messages:{type:"选择更改类型您正在提交："，scope："表示此更改的范围（可选）："，customScope："表示此更改的范围："，subject："写一个简短的，命令式的更改描述：\n",body:'提供更详细的更改说明（可选）。使用“|”打破新行：\n'，打破：'列出任何BREAKING更改（可选）。使用“|”打破新行：\n'，footerPrefixesSelect：“通过此更改选择问题类型的更改列表（可选）：”，customFooterPrefix：“输入问题前缀：”，页脚：“通过此更改列出任何问题。例如：#31,#34:\n",confirmCommit:"你确定要继续上面的提交吗？",},types:[{value:"feat",name:"feat:Anewfeature",emoji:":sparkles:"},{value:"fix",name:"fix:Abugfix",emoji:":bug:"},{value:"docs",name:"docs:Documentationonlychanges",表情符号:":memo:",},{value:"style",name:"style:不影响代码含义的更改",emoji:":lipstick:",},{value:"refactor",name:"refactor:既不修复bug也不添加功能的代码更改",emoji:":recycle:",},{value:"perf",name:"perf:代码更改提高性能",emoji:":zap:",},{value:"test",name:"test:添加缺失的测试或更正现有测试",emoji:":white_check_mark:",},{value:"build",name:"build:Changesthataffectthebuildsystemorexternaldependencies",emoji:":package:",},{value:"ci",name:"ci:ChangestoourCI配置文件和脚本",emoji:":ferris_wheel:",},{value:"chore",name:"chore:其他不修改src或t的变化est文件”，表情符号：“：hammer：”，}，{值：“还原”，名称：“还原：还原以前的提交”，表情符号：“：倒带：”，}，]]，useEmoji：假，}，};使用husky生成commit-msg文件，验证commit信息：（截取commit信息）npxhuskyadd.husky/commit-msg"npx--no-installcommitlint--edit$1"这时候，它可以拦截，可以自定义代码提交样式
