游戏陪玩系统，前端项目编码规范有哪些？

游戏陪玩系统，前端项目编码规范有哪些？

开发工具配置规范统一。
首先，请下载使用vscode编辑器，其次，其相关插件及编码配置请手动安装推荐的相关插件实现统一配置，比如 VsCode Snippets 代码片段自动补全文档，优化代码提高编程速度。
项目模版内配置基本的规范统一。
首先遵循eslint基本语法规范 ，执行npm run lint， --fix能自动检测并修复 。
代码提交规范。

1、每次代码提交之前，请确保无任何语法错误、功能性错误等再提交；
2、每次代码提交之时，请写清楚注释, 修改的主要功能一一列出，如git commit -am"1.修改用户管理-新增功能 2. 优化冗余代码"；

Js 代码块引号类型为单引号 ‘’
生产环境下禁止代码含断点 debugger 提交
总是使用 =精 确的比较操作符，而少使用“”，避免强类型转换带来的困扰
js 代码尽量使用小驼峰命名， js 事件方法名，多以动词命名，且选取有意义的词，并写清必要的注释。 允许的变量命名和事件方法名如下：

const max = 20;
let myFavoriteColor = [];
const _myFavoriteColor = '#112C85';
/*** 监听input值变化* @param val String input输入值* @param oldVal String input原来旧值* */
function onInputChangeVal(val, oldVal) {}

 

不能含有未使用的变量, 未使用请及时删除

不能含有未使用的组件, 未使用请及时删除

不能含有无用的代码块, 未使用请及时删除

同一个项目内的文件结构尽量一致，如

1、样式预编译严格使用 less，避免同时使用多种，造成开发维护困扰。
2、文件命名、静态资源名, 请使用纯小写字母或小写字母和下划线组合。

文件夹或文件(组件)命名：home, layout, file_upload, zixun, zx_service etc.静态资源名：imgbg.jpg, home_top_img.png, base.css etc.

 

3、id/class 类名，css 命名组织结构这里采用 BEM 规则。 请使用纯小写字母或小写字母和下划线组合。
BEM 规则: block_element–modifier 语法
Block 块级元素，容器类，如.form .header .top .main；
Element 主要是以 1 个下划线接在 block 之后，来表示从属关系；没有对同一页上其他 blocks/elements 的依赖， 如.form_input;
Modifier 修饰符，主要是以两个中短线连接，block 或 element 上的标记，使用他来改变外观或行为。如：disabled,highlighted,checked,fixed。

 布局容器类：#header, #main, #footer,.l_left, .l_right, .l_main, .l_list, .l_list_item模块类：.module, .mod_list, .mod_title, .mod_bottom, .dialog, .dialog_title,状态类：.is_collapsed.is_clicked.is_error.is_success.is_hidden

 

   /* BEM规则: */.block {}.block_element {}.block_element--modifier {}.form {}.form_input {}.form_input--checked {}/* Modifier修饰符: *//* block--modifier_value 语法 */.button--state_success {}.form--theme_xmas {}.form--simple {}.input--disabled {}

 

4、尽量使用公用的变量或已封装的混入样式来开发，方便后期维护，公用的文件尽量不要改动。
增加 proxy 本地代理规范，参见 vue.config.js

proxy: {'/api': {target: 'http://192.168.1.1:8080', // 域名+端口号，不能加路径changeOrigin: true, // 发送请求头中的host会设置成target
        pathRewrite: {}}
}

 

以上就是游戏陪玩系统，前端项目编码规范有哪些？， 更多内容欢迎关注之后的文章