您好,登录后才能下订单哦!
本篇内容主要讲解“vue项目代码格式规范怎么设置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue项目代码格式规范怎么设置”吧!
使用vue-cli构建的项目,在项目构建时,就会让你选择格式化方案,如果是已有项目运行vue add eslint添加格式化方式,建议选择Prettier 的格式化方案;如果是uniapp的项目,如果使用的是vue-cli,也是使用vue add eslint,如果是使用HBuilder构建打包,需要安装另外安装@vue/cli-service,不然npm run lint无法正常格式化。
添加eslint之后,根据你的选择,eslint的配置项,可能在.eslintrc.js文件中,如果该文件不存在,配置项应该在package.json,默认配置应该如下:
module.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended", ], parserOptions: { parser: "@babel/eslint-parser", } };
这些配置不建议改动,如果有其他需求,我们可以在其基础上进行自定义配置。
module.exports = { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "plugin:vue/recommended", "eslint:recommended", "@vue/prettier" ], "parserOptions": { "parser": "babel-eslint" }, rules: { "no-console": process.env.NODE_ENV === "production" ? "error" : "warn", "no-debugger": process.env.NODE_ENV === "production" ? "error" : "warn", "no-unused-vars": [ "error", { vars: "all", args: "none", ignoreRestSiblings: true }, ], "vue/order-in-components": ["error", { "order": [ "el", "name", "key", "parent", "functional", ["delimiters", "comments"], ["components", "directives", "filters"], "extends", "mixins", ["provide", "inject"], "ROUTER_GUARDS", "layout", "middleware", "validate", "scrollToTop", "transition", "loading", "inheritAttrs", "model", ["props", "propsData"], "emits", "setup", "asyncData", "data", "fetch", "head", "computed", "watch", "watchQuery", "LIFECYCLE_HOOKS", "onLoad", "onShow", "onReady", "onHide", "onUnload", "onResize", "onPullDownRefresh", "onReachBottom", "onTabItemTap", "onShareAppMessage", "onPageScroll", "methods", ["template", "render"], "renderError" ] }] }, globals: { uni: true, requirePlugin: true }, }
推荐的eslint配置如上。
extends中添加了plugin:vue/recommended,这个插件是限制了vue的一些代码规范,如组件属性的顺序,vue选项的顺序等。
rules中的no-console和no-debugger限制了代码中的console和debugger,在开发环境会生成警告信息,在生产环境会提示报错;no-unused-vars对为使用的变量做了限制,除了参数和reset中不允许出现未使用的变量;vue/order-in-components是在uniapp中对plugin:vue/recommended规范的一个补充,uniapp中存在许多vue没有的选项,设置vue/order-in-components将这些没有的选项也进行格式化排序。
globals中添加使用到的全局变量,如果不添加会在格式化时报错。uni是uniapp常用的全局对象,requirePlugin是微信开发用的的全局变量。
pre-commit在git commit之前做一些处理,我们需要在提交之前对代码格式规范做检查,避免在项目打包时,出现eslint的报错。在项目添加lint-staged,然后再package.json中配置(我们使用vue命令添加eslint时,选择commit时格式化,会自动帮我们添加):
"gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,jsx,vue}": [ "vue-cli-service lint --mode production", "git add" ] }
我们需要用的eslint和vetur这两个插件,eslint插件需要npm全局安装eslint包,两个插件安装完之后,在VS Code的配置中,设置:
"[vue]": { "editor.defaultFormatter": "octref.vetur" }
如果无法格式化,可能是格式化工具冲突导致的,设置:
// 保存时使用VSCode 自身格式化程序格式化 "editor.formatOnSave": true, // 保存时用eslint格式化 "editor.codeActionsOnSave": { "source.fixAll.eslint": true } // 两者会在格式化js时冲突,所以需要关闭默认js格式化程序 "javascript.format.enable": false
到此,相信大家对“vue项目代码格式规范怎么设置”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。