本文其实是村长的vite 工程化文章内容：https://juejin.cn/post/6910014283707318279
有的小伙伴不喜欢prettier格式化可以参考：https://juejin.cn/post/7022720509875847182
-
package.json安装以下依赖
"babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-vue": "^7.0.0-0", "prettier": "^1.19.1" -
根目录添加.eslintrc.js 文件，以下配置可以处理prettier和eslint之间的规则冲突
module.exports = { root: true, env: { node: true, }, extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"], parserOptions: { parser: "babel-eslint", }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "prettier/prettier": [ "warn", { // singleQuote: none, // semi: false, trailingComma: "es5", }, ], },}; -
根目录添加prettier.config.js 文件
module.exports = { printWidth: 100, // 每行代码长度（默认80） tabWidth: 2, // 每个tab相当于多少个空格（默认2） useTabs: false, // 是否使用tab进行缩进（默认false） singleQuote: true, // 使用单引号（默认false） semi: true, // 声明结尾使用分号(默认true) trailingComma: 'es5', // 多行使用拖尾逗号（默认none） bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true） jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false） arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）}; -
搜索vscode插件库，安装 eslint 插件
-
shift+ctrl/cmd+p 搜索 setting.json 打开 user setting.json 添加以下配置
"editor.codeActionsOnSave": { "source.fixAll": true, }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "eslint.alwaysShowStatus": true, -
重启编辑器即可实现保存自动格式化
