“代码规范”这样做【高级前端必备软技能之一】

✨在前端开发领域，良好的代码规范是团队协作、项目可维护性的基石。最近在梳理我们团队关于代码规范相关的一些文档，顺便给大家分享一下我们是从哪些方面入手来从一个草台班子，到开发规范的高效团队。
✨本文旨在提供一份详尽的前端代码规范指南，覆盖文件命名、组件编写、路由设计及代码风格等方面，帮助开发者建立清晰、一致的开发准则，进而提升项目质量与开发效率。

🚀1.文件命名规范 src下文件目录命名规范

api 通用接口请求管理，子文件夹按模块划分，使用单英文单词命名。

方法名使用当前接口模块名+方法名，驼峰命名规则
例如：
url: "/contract/template/list"
方法名为templateList

assets:静态资源css,image,js,scss

css,scss文件命名规则：_+模块名.css
img文件命名规则:英文单词命名，多单词以_连接
js文件命名规则:以第三方引入的js文件名为准，不允许修改

common:公共模块（业务相关的公共模块）

config:全局配置文件
fetch:axios封装
message:全局消息提示
mixins:混入组件
storage:本地储存封装
plugins:业务相关的全局方法

components:基础组件；组件命名必须为多单词,用驼峰命名规范，首字母大写，基础组件内不处理业务逻辑，仅向外部传输数据
directives:指令文件命名规则小驼峰命名规范;该文件夹仅需一个index入口文件，其他方法需要放在modules文件夹
filter:过滤器文件命名规则小驼峰命名规范，该文件夹仅需一个index入口文件，其他方法需要放在modules文件夹
pages:公用页面，英文单词命名，小驼峰命名规范，该文件夹导出一个index.js的路由文件，任意子模块必须引入此文件，保持公用页面的name统一性
utils:全局公用方法，与业务无关，改文件夹导出一个index.js,暴露一个 install方法，使用Vue.use方法注册到全局
stroe:全局状态管理,

getter.js Vuex暴露出口，属性名使用驼峰命名
modules 模块文件夹，各模块包含state,actions,mutations
state属性使用驼峰命名
action属性使用set_+state属性名,例如：set_token
mutations属性使用SET_+state属性名全大写命名规则,例如：SET_TOKEN

hooks 钩子函数方法，index.js统一暴露出所有方法
libs：全局常量

const.js 常量

🚀2.组件代码规范

props命名规范

props: {
    status: {
        type: String,
        required: true,
        validator: function (value. {
            return [
                'syncing',
                'synced',
                'version-conflict',
                'error'
            ].indexOf(value. !== -1
        }
    }
}

data书写规范

data: function () {
    return {
        foo: 'bar'
    }
}

css 组件内的css必须使用scoped标签
模板内复杂表达式必须使用计算属性
生命周期函数按生命周期顺序书写
页面初始化在mothods添加onload方法
添加使用add+模块名例如 addUser
编辑使用edit+模块名例如 editUser
点击按钮打开某个弹框使用方法名示例：openDialogByUser
删除方法示例 removeUser
路由跳转方法示例 linkTo + 路由名（route信息的name字段）
boolean类型的变量使用is或has开头

🚀3.路由命名规范

路由对象约定

{
    path: '/user-mgt',  // 路由path和使用的文件名一致，以-连接
    name: 'UserMgt',    // path的大驼峰连接
    component: () => import("@/views/user-mgt/index.vue"),    // 使用import按需加载组件
    meta: {
      title: "用户列表",  // 页面描述
      icon: 'icon-a-icon-xuqiuguanlisvg', // icon
      roles: ['UserMgt'] // 当前模块权限
    },
    children: [
      path: '',  // 路由path和使用的文件名一致，以-连接
      name: 'UserMgtList', // path的大驼峰连接
      component: () => import("@/views/user-mgt/list/index.vue"),    // 使用import按需加载组件
      meta: {
        title: "用户管理-列表",  // 页面描述
        activeRouter: "UserMgt", // 如果是子路由，必需设置改项，当前激活菜单
        moduleRoles: ['user_page'] // 当前模块权限
      },
    ]
}

🚀4.Views 文件夹命名规范

务必于路由保持一直，采用树形结构
在这里插入图片描述

list 存放对应的列表页面，如果有多个sheet，按照模块区分
detail 中存放对应的详情页面
dialog 存放该模块下的所有相关弹框
components 存放该模块下的业务组件

🚀5.代码风格

代码风格使用standard无需配置的代码风格管理
js代码规范：https://standardjs.com/readme-zhcn.html
项目开发使用vscode进行开发
vscode插件安装: StandardJS、ESLint、Prettier-Standard

vscode配置文件

{
    "editor.tabSize": 2,
    "editor.fontSize": 14,
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[script]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[markdown]": {
        "editor.defaultFormatter": "yzhang.markdown-all-in-one"
    },
    "prettier.bracketSameLine": true,
    // 函数前面加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // 去掉代码结尾的分号
    "prettier.singleQuote": true,
    // 使用带引号替代双引号
    "prettier.semi": false,
}

🔥 结论

遵循上述规范，不仅可以提升代码的可读性和可维护性，还能加速团队成员之间的协作，减少因个人习惯差异带来的代码审查和维护成本。规范化的代码结构和风格，是每一个高质量前端项目不可或缺的基础。通过持续优化和遵循这些准则，我们能够构建出更加健壮、易维护的前端应用。