Vue3+TS项目新增ESLint和Prettier后台eslint用于校验代码语法规范，保证项目质量；prettier用于保证项目代码的格式和风格；Vue3项目初始化是指建立一个Vite项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+，需要额外加双横线：npminitvite@latestmy-vue-app----templatevue#yarnyarncreatevitemy-vue-app--templatevue#pnpmpnpmcreatevitemy-vue-app--templatevueESLintinstallnpmaddeslint-Dinitializenpxeslint--init初始化期间的交互选项：(1)您想如何使用ESLint？Choose:Tochecksyntaxandfindproblems(2)你的项目使用什么类型的模块？选择：JavaScript模块（导入/导出）(3)您的项目使用哪个框架？选择：Vue.js(4)你的项目是否使用TypeScript？选择：Yes(5)你的代码在哪里运行？选择：浏览器(6)您希望您的配置文件采用什么格式？选择：JavaScript(7)Wouldyouliketoinstallthemnow?选择：Yes(8)Whichpackagemanagerdoyouwanttouse?选择：pnpm/npm/yarn根据这个选择，会自动安装需要的插件识别vue和ts文件。初始化完成后，会在项目的根目录下生成一个配置文件。eslintrc.js.eslintrc.js配置更改写配置如下module.exports={env:{browser:true,es2021:true,node:true,},extends:["eslint:recommended","plugin:vue/vue3-essential","plugin:@typescript-eslint/recommended","prettier",],解析器:"vue-eslint-parser",parserOptions:{ecmaVersion:"latest",解析器:"@typescript-eslint/parser",sourceType:"module",},plugins：[“vue”，“@typescript-eslint”，“更漂亮”]，规则：{“无控制台”：process.env.NODE_ENV===“生产”？“警告”：“关闭”，“无调试器”：process.env.NODE_ENV===“生产”？“警告”：“关闭”，“@typescript-eslint/ban-types”：“警告”，“@typescript-eslint/no-explicit-any”：“关闭”，“vue/no-unused-vars”：“警告”，“vue/multi-word-component-names":"warn",},};script在pakcage.json中配置新脚本如下"scripts":{"lint":"eslint.--ext.vue,.js,.ts,.jsx,.tsx--fix",}eslint.指定当前项目中的lint文件--ext指定对哪些后缀文件进行lint--fix开启自动修复并执行脚本使用eslint进行全局检查和修复npmrunlint安装VSCode插件ESLint每次保存代码时自动执行lint命令修复代码错误，新建.vscode/settings.json文件project，然后在其中添加如下配置。{//启用自动修复"editor.codeActionsOnSave":{"source.fixAll":false,"source.fixAll.eslint":true}}Prettier安装npminstallprettier-Dconfiguration在根目录新建一个.prettierrc.jsmodule目录。exports={//一行字符数，超过则换行，默认80printWidth:100,//一个缩进使用多少个空格tabWidth:2,//是否使用制表符缩进，默认false，表示用空格缩减useTabs:false,//句末是否使用分号semi:true,//字符串是否强制使用单引号，默认false，使用doublequotessingleQuote:false,//是否使用尾随逗号，有三个可选值"
