1.CreateaprojectusingVite创建一个新项目yarncreatevite2.添加ESlint到ESlintusepartaddeslint--devinitializeESlintyarnruneslint--init这时候代码会被eslint校验，我们来配置整个项目校准验证命令配置package.json"scripts":{//..."lint":"eslint'src/**/*.{js,jsx,vue,ts,tsx}'--fix"}，执行lintCheckyarnrunlint这个时候可以看到哪里检查失败了。一般会提示以下问题。让我们解决错误Thetemplaterootrequiresexactlyoneelementerror'defineProps'isnotdefined.解决Vue3模板根元素校验问题修改。eslintrc.js，将plugin:vue/essential替换为plugin:vue/vue3-recommendedextends:[//'plugin:vue/essential','plugin:vue/vue3-recommended','standard'],解决defineProps定义问题修改.eslintrc.js，添加globalsConfigureglobals:{defineProps:'readonly',defineEmits:'readonly',defineExpose:'readonly',withDefaults:'readonly'}在执行yarnrunlint下保存，然后就可以看到所有的了检查已经通过。此时.eslintrc.js配置module.exports={env:{browser:true,es2021:true,node:true},extends:['plugin:vue/vue3-recommended','standard'],parserOptions:{ecmaVersion:'latest',解析器:'@typescript-eslint/parser',sourceType:'module'},插件:['vue','@typescript-eslint'],规则:{},globals:{defineProps:'readonly',defineEmits:'readonly',defineExpose:'readonly',withDefaults:'readonly'}}3.配置运行时验证，安装vite-plugin-eslint插件yarnaddvite-plugin-eslint--devconfigurationvite.config.ts...importeslintPluginfrom'vite-plugin-eslint'...plugins:[...eslintPlugin({//配置缓存:false//禁用eslint缓存})]在此time重启项目，可以看到报错了。控制台会报错。4.集成prettieryarnaddprettier--dev添加配置文件.prettierrc.jsmodule.exports={//根据自己项目需要printWidth:200,//单行长度tabWidth:4,//缩进长度semi:false,//在句末使用分号singleQuote:true,//使用单引号trailingComma:'none'//在句末使用逗号}配置验证脚本package.json"scripts":{..."format":"prettier--write'./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'"}配置执行yarnformat后，可以格式化代码，解决eslint和prettier的冲突，一般实际情况下eslint和prettier的规则会冲突，我们参考下面的插件完成yarnaddeslint-config-prettiereslint-plugin-prettier--devmodify.eslintrc.jsconfiguration...extends:['plugin:vue/vue3-recommended','standard',//new,必须放在末尾'plugin:prettier/recommended'],...结合vscode保存自动格式化安装prettier插件配置vscode.vscode/settings.json{"editor.codeActionsOnSave":{"source.fixAll.eslint":true},"editor.formatOnType":true}现在编辑保存5.在Git提交验证部分添加husky+lint-stagednpxmrm@2lint-staged配置package.json//..."lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["npmrunlint","gitadd"]}此时如果尝试提交代码，会进行eslint验证.如果失败会报错，无法提交和添加git提交规范配置yarnadd@commitlint/config-conventional@commitlint/cli--devaddconfigurationfilecommitlint.config.jsmodule.exports={extends:['@commitlint/config-conventional']}npxhuskyadd.husky/commit-msg'npx--no--commitlint--edit"$1"'这时候会要求提交文件指明变更类型。commoncommit提交类型描述chores构建过程或辅助Toolchangesfeat新特性，如feat:loginfixrepairbugperfoptimizationrelated，如提升性能，体验不影响代码含义的样式修改，如空格，格式化,缺少分号等问题，而不是css修改test添加测试代码或者修改现有测试参考项目的git地址：https://github.com/jyliyue/vite-ts-template.git
