爱学习前端代码规范v0.1

  • 基础配置:

编辑器请采用:vscode 下载链接:https://code.visualstudio.com/

设置代码缩进为2,采用空格缩进:”editor.tabSize”: 2

  • 文件名命名:

文件(文件夹)名单词间隔用“-”隔开,不要采用大小写(因为windows git不识别大小写)

例如:item-scroll.jsx、inner-top.vue、class-list/

  • 文件目录说明:

components/ 基础组件存放位置,*说明:基础组件一定不要携带任何业务及上下文,比如在button中写死了某个文案,就是携带业务

modules/ 基础模块存放位置,*说明:与基础组件一致,有多个基础组件组成

assets/ 静态文件存放目录

utils/ 公共函数库

pages/ 页面存放目录,*说明:每个大的页面尽量拆分子模块,子模块存放到自己页面的文件夹下,例如:pages/index/top.vue、pages/index/body.vue、pages/index/.vue

  • 代码规范(eslint配置):
“no-unused-vars”: “off”, // 关闭未使用变量检测
“no-console”: “off”, // 关闭使用console检测
“no-undef”: “off”, // 关闭未定义变量检测
“no-unreachable”: “off”, // 关闭强制返回检测
“no-constant-condition”: “off”, // 关闭判断条件中的常量检测
“semi”: “off”, // 关闭分号检测
“no-multi-spaces”: 1, // 不能有多余的空格
“curly”: [2, “all”], // 必须使用 if(){} 中的{}
“comma-dangle”: [“error”, “only-multiline”], // 允许对象末尾逗号,也可不写
“comma-spacing”: [“error”, { “before”: false, “after”: true }], // 逗号后面必须带空格
/**
* 对象空格限制 正确的例子
* var obj = { “foo”: 42 }
*/
“key-spacing”: [
  “error”, { “beforeColon”: false, “afterColon”: true, “mode”: “strict” }
],
/**
* 函数定义风格
    function foo() {
    }
    var bar = function () {
    }
    class Foo {
      constructor() {
      }
    }
    var foo = {
      bar() {
      }
    }
*/
“space-before-function-paren”: [
  “error”, {“anonymous”: “always”, “named”: “never”}
],
// 缩进必须用tab缩进 两个空格一个缩进
“indent”: [2, 2, { “SwitchCase”: 1 }],
// 不要写分号,除非自执行函数
“semi”: [“error”, “never”],
// 操作符前后在空格
“space-infix-ops”: “error”,
// 关键字后必须带空格
“space-after-keywords”: [“error”],
// 关键字前不能带空格
“space-before-keywords”: [“error”, “never”]

代码示例

基础组件示例:
DB5788DA-3AD6-4306-B6C9-752EC425E47C
DB5788DA-3AD6-4306-B6C9-752EC425E47C
68A218B7-B57A-4BEA-B0C0-5E878DF5889E
具体页面代码示例:
64EDC79B-A1D5-4183-9F34-94DD41C9DC76
业务页面具体实例:
2E4DEB19-A917-414B-954A-F2614A859D2F
方法名定义
所有绑定事件类的方法统一前缀 on 例如:onOpen、onMessage
所有后端拉取数据的方法统一前缀 get 例如:getList、getStudentDetail、保存统一前缀save、更新统一前缀update、删除统一前缀delete
所有内部私有方法统一前缀 _ 例如:_compareTime、_isStudent