vue 代码规范,vue基本格式
本文主要介绍vue3对输入组件的简单封装和统一表单数据的相关信息。不管你学的是哪种编程语言，相信大家都会把这部分稍微做一下。有需要的朋友可以参考一下。
目录
前言将eslint添加到项目自定义eslint配置提交前设置与代码配置参考摘要
前言
为了尽可能统一项目成员的代码风格，降低开发人员理解代码的成本，我们需要统一项目的代码格式规范；同时也不能为了降低理解成本而增加开发成本，所以使用VS代码的相关插件来完成代码格式化的功能。
为项目添加eslint
使用vue-cli构建项目时，会要求您选择格式化方案。如果现有项目运行vue add eslint添加格式化，建议选择更漂亮的格式化方案；如果是uniapp项目，如果使用vue-cli，也使用vue add eslint。如果使用HBuilder进行构建打包，需要安装@vue/cli-service，否则npm run lint无法正常格式化。
添加eslint后，根据你的选择，eslint的配置项可能在eslintrc.js文件中。如果文件不存在，配置项应该在package.json中。默认配置应该如下所示：
模块.导出={
根：没错，
环境：{
节点：真，
},
扩展：[
插件：vue/essential ，
eslint:推荐，
插件：更漂亮/推荐，
],
语法分析选项：{
解析器：“@babel/eslint-parser”，
}
};
不建议更改这些配置。如果有其他需求，我们可以根据这些需求定制配置。
自定义eslint配置
模块.导出={
root: true，
环境:{
node: true
},
扩展:[
插件：vue/essential ，
插件：vue/推荐，
eslint:推荐，
@ vue/prettle
],
语法分析选项:{
分析器:巴别-埃斯林
},
规则：{
“no-console”:process . ENV . node _ ENV=== production ？错误:警告，
无调试器:process . ENV . node _ ENV=== production ？错误:警告，
“无未使用变量”:[
错误，
{ vars: all ，args: none ，ignoreRestSiblings: true }，
],
vue/订单组件:[错误，{
订单:[
埃尔，
姓名，
键，
父级，
功能性，
[分隔符，注释]，
[组件，指令，过滤器]，
扩展，
混音，
[提供，注入]，
路由器_防护装置，
布局，
中间件，
验证，
scrollToTop，
过渡，
正在加载，
继承人，
型号，
[props ， propsData]，
发出，
设置，
异步数据，
数据，
获取，
头部，
计算，
观看，
观察查询，
生命周期_挂钩，
加载，
昂秀，
“准备好了”，
在侧面，
卸载，
onResize ，
onPullDownRefresh ，
每个底部，
onTabItemTap ，
onShareAppMessage ，
onPageScroll ，
方法，
[template ， render]，
renderError
]
}]
},
全局：{
uni:没错，
要求插件：真
},
}
推荐的eslint配置如上。
扩展添加插件：vue/推荐。这个插件是一些限制vue的代码规范，比如组件属性的顺序，Vue选项的顺序等等。
规则中的No-console和no-debugger限制了代码中的控制台和调试器，会在开发环境中生成警告信息，在生产环境中提示错误；No-unused-vars限制用于的变量，只是参数和reset中不允许使用未使用的变量；E/order-in-components是对uniapp中plugin:vue/推荐规范的补充。uniapp里有很多选项是Vue没有的。设置vue/order-in-components来格式化和排序这些选项。
添加全局变量中使用的全局变量。如果不添加它们，格式化时会出错。Uniapp是通用的全局对象，requirePlugin是用于微信开发的全局变量。
pre-commit设置
预提交在git提交之前做一些处理。我们需要在提交前检查代码格式规范，避免项目打包时出现eslint的错误。在项目中添加lint-staged，然后在package.json中配置(当我们使用vue命令添加eslint时，提交时选择format，它会自动为我们添加):
gitHooks: {
“预提交”:“lint-staged”
},
lint-staged :
*.{js，jsx，vue}: [
vue-CLI-服务lint模式生产，
git添加
]
}
VS Code配置
我们需要使用的两个插件，eslint和vetur。eslint插件要求npm在全局范围内安装eslint软件包。安装完这两个插件后，在VS代码的配置中，设置：
[vue]: {
editor . default formatter : octref . vetur
}
如果不能格式化，可能是格式化工具冲突造成的。设置：
//保存时使用VSCode自己的格式化程序进行格式化。
editor.formatOnSave: true，
//保存时用eslint格式化
editor.codeActionsOnSave: {
source.fixAll.eslint: true
}
//格式化js时两者会冲突，所以需要关闭默认的js格式化程序
JavaScript . format . enable :false
参考
Vue风格指南
eslint-plugin-vue
Eslint文档
总结
关于vue项目代码格式规范设置的这篇文章到此为止。有关vue3封装的输入组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。