当前位置: 首页 > news >正文

前端开发规范

一、开发工具

  1. 开发工具统一使用 VSCode
  2. 代码格式化插件使用 Prettier
  3. 代码格式校验使用 ESLint
  4. VSCode 需安装的插件有:ESLint、Prettier、Vetur

二、命名规范

  1. 项目命名使用小写字母,以连字符分隔
    正确:fe-project
    错误:FE PROJECT、fePROJECT

  2. 目录命名使用小写字母,以连字符分隔(定义组件时除外),采用复数命名法(缩写除外)
    正确:scripts、styles、images
    错误:script、style、image

  3. 文件命名使用小写字符,以连字符分隔(定义组件时除外)
    正确:index.html、element-custom.scss
    错误:Index.html、ElementCustom.scss

  4. 组件名使用大驼峰命名
    正确:MenuItem、Upload
    错误:menu-item、upload

  5. 命名禁止使用拼音与英文混合的方式,不允许使用中文命名

三、项目结构

  1. 目录结构(以 Vue 项目为例)
    project-name
      |–node_modules 依赖
      |–public 公共文件,一般包含index.html、favicon.ico等
      |–src 源码文件目录
        |–api 接口定义目录
        |–assets 静态资源目录
        |–components 全局组件目录
        |–plugins 插件目录
        |–fonts 字体文件目录
        |–directive 自定义指令目录
        |–layout 布局文件目录
        |–icons 图标文件目录
        |–router 路由文件目录
        |–store 全局状态管理文件目录
        |–styles 样式文件目录
        |–utils 公共函数目录
        |–views|pages 页面目录
          |–SystemManage 页面组件目录(示例)
          |–components 页面内组件目录
          |–index.vue 页面文件

  2. 图片、字体等静态资源不应放在局部组件中,应放在全局目录下,组件中使用 @ 或 ~@ 引用。

四、HTML规范(适用于Vue Template)

  1. 使用 2 个空格缩进
  2. 嵌套的节点必须有缩进
  3. 不同的模块之间以空行间隔
  4. 标签必须闭合

五、CSS及其他预处理语言规范

  1. 使用2个空格缩进

  2. 不同的模块之间以空行间隔

  3. 类名使用小写字母,以连字符分隔,遵循 BEM 命名规范,使用【块__元素–修饰符】的形式命名

  4. css 中禁止使用 & 符号拼接类名
    正确:

    .form {.form-item {}
    }
    /* 或 */
    .form {}
    .form-item {}
    /* 仅禁止使用&拼接类名,以下使用方式不禁止 */
    .form-item {&.active {}&::before {}&:nth-child(1) {}
    }
    

    错误:

    .form {&-item {}
    }
    
  5. scss 或 less 中的变量、函数等使用小驼峰形式命名

  6. 颜色使用 16 进制小写的形式,尽量使用简写
    正确:

    color: #abcdef;
    background-color: #012;
    

    错误:

    color: #ABCDEF;
    background-color: #001122;
    
  7. css 中定义样式注意需按以下顺序
    表示元素位置的,如 position
    表示元素如何显示的,如 display
    表示元素尺寸的,如 width、height、padding
    表示元素内容样式的,如 color、font-size
    表示元素对外的状态的,如 border、box-shadow、margin

    示例:

    .box {position: relative;flex-grow: 1;display: flex;align-items: center;justify-content: center;flex-direction: column;width: 350px;height: 350px;padding: 50px;color: #666;font-size: 12px;text-align: center;background: #fff;border-radius: 8px;border: 1px solid #fff;box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.06);margin-bottom: 20px;
    }
    

六、JavaScript规范

  1. 使用 2 个空格缩进

  2. 单行长度不能超过 120 个字符

  3. 句尾是否添加分号不强制,但是单个项目中需统一

  4. 定义变量使用 let、const 代替 var

  5. 统一使用单引号
    正确:

    let name = 'zhangsan';
    

    错误:

    let name = "zhangsan";
    
  6. 下列关键字后必须有大括号(即使代码块的内容只有一行)
    If、else、for、while、do、switch、try、catch、finally、with
    正确:

    if (condition) {doSomething();
    }
    

    错误:

    if (condition) doSomething();
    
  7. 箭头函数的参数必须添加括号
    正确:

    (res) => { };
    

    错误:

    res => { };
    
  8. 对象括号与文字之间需加空格
    正确:

    { name: 'zhangsan' }
    

    错误:

    {name: 'zhangsan'}
    
  9. 对象的最后一个属性值后加逗号(单行除外)
    正确:

    const obj = {name: 'zhangsan',age: 20,
    };
    

    错误:

    const obj = {name: 'zhangsan',age: 20
    };
    
  10. 变量命名使用小驼峰的形式,不能以下划线和美元符号作为开头或结尾(特殊情况除外)

  11. 常量命名使用全大写字母的形式,单词与单词之间使用下划线分隔

  12. 构造函数名首字母大写

  13. 增删改查统一使用 add、delete、update、get 四个单词

  14. 注释符号与注释内容使用一个空格隔开
    正确:

    // 这是一段注释
    /* 这是一段注释 */
    

    错误:

    //这是一段注释
    /*这是一段注释*/
    
  15. 使用 ===、!== 代替 ==、!=

  16. 禁止使用 undefined 进行变量判断,应使用 Object.prototype.toString.call( ) 或 typeof 判断

  17. 判断变量是否为空时,优先使用 ! 或 !! 强制转为布尔类型后进行判断

  18. 创建对象时,优先使用字面量创建,而不使用对象构造器
    正确:

    const user = {age: 18,name: 'zhangsan',
    };
    

    错误:

    const user = new Object();
    user.age = 18;
    user.name = 'zhangsan';
    
  19. 对象合并时,优先使用扩展运算符,而不是 Object.assign( )
    正确:

    const obj = { ...obj1, ...obj2 };
    

    错误:

    const obj = Object.assign({}, obj1, obj2);
    
  20. 接口文件统一放在 src/api 目录中,接口文件应根据模块来定义,接口函数必须添加注释

  21. 新项目应统一使用 dayjs 作为日期处理插件

七、Vue规范

  1. 组件名应该始终是多个单词组成,且使用大驼峰的格式
  2. props 中属性必须使用小驼峰的方式命名,必须指定类型,必须加上 required 或者 default (二选一)
  3. 使用 scoped 限制组件样式作用域
  4. 需要频繁切换显示隐藏状态时,使用 v-show,而不使用 v-if
  5. methods 中定义方法,应以模块划分,相同模块的放在一起。初始化及公用的方法应放在最上方
  6. 组件标签中属性的命名使用小写字符加连字符的形式
    正确:
    <CustomComponent :custom-id="id" />
    
    错误:
    <CustomComponent :customId="id" />
    

八、项目配置

  1. 项目根目录需创建以下文件:
    .editorconfig、jsconfig.json、.prettierrc.js、.eslintrc.js、.prettierignore、.eslintignore

  2. VSCode 中用户的 settings.json 配置内容如下:

    {"files.exclude": {"**/.git": true,"**/.svn": true,"**/.hg": true,"**/CVS": true,"**/.DS_Store": true,"**/.vscode": true},"files.associations": {"*.wxss": "css","*.wxml": "html","*.wxs": "javascript"},"explorer.compactFolders": false,"javascript.format.enable": false,"javascript.updateImportsOnFileMove.enabled": "prompt","emmet.triggerExpansionOnTab": true,"emmet.includeLanguages": {"vue-html": "html","javascript": "javascriptreact"},"emmet.syntaxProfiles": {"javascript": "jsx"},"editor.tabSize": 2,"editor.fontSize": 16,"editor.wordWrap": "off","editor.formatOnSave": true,"editor.formatOnType": true,"editor.detectIndentation": false,"editor.defaultFormatter": "esbenp.prettier-vscode","editor.codeActionsOnSave": {"source.fixAll": false},"vetur.format.options.tabSize": 2,"vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatter.html": "prettier","vetur.format.defaultFormatter.scss": "prettier","vetur.format.defaultFormatter.css": "prettier","eslint.validate": ["javascript", "javascriptreact", "jsx", "vue", "html"],"prettier.semi": true,"prettier.tabWidth": 2,"prettier.printWidth": 120,"prettier.singleQuote": true,"prettier.trailingComma": "es5","prettier.endOfLine": "lf","prettier.bracketSpacing": true,"prettier.arrowParens": "always","prettier.bracketSameLine": false,"prettier.singleAttributePerLine": false,"prettier.htmlWhitespaceSensitivity": "ignore","[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"git.enableSmartCommit": true,"workbench.tree.indent": 16,"workbench.colorTheme": "Monokai","workbench.startupEditor": "newUntitledFile","breadcrumbs.enabled": false
    }
    
  3. 用户的 settings.json 仅作为通用配置,对于有特殊需求的项目,需配置工作区中的 settings.json。工作区的 settings.json 路径为项目根目录下的 .vscode/settings.json。注意此文件不应该被 git 忽略

  4. editorconfig 文件配置如下

    # 告诉 EditorConfig 插件,这是根文件,不用继续往上查找
    root = true# 匹配全部文件
    [*]
    # 设置字符集
    charset = utf-8
    # 缩进风格,可选 space、tab
    indent_style = space
    # 缩进的空格数
    indent_size = 2
    # 结尾换行符,可选 lf、cr、crlf
    end_of_line = lf
    # 在文件结尾插入新行
    insert_final_newline = true
    # 删除一行中的前后空格
    trim_trailing_whitespace = true# 匹配 md 结尾的文件
    [*.md]
    insert_final_newline = false
    trim_trailing_whitespace = false
    
  5. jsconfig.json 文件配置如下

    {"compilerOptions": {"baseUrl": "./","target": "ES6","paths": {// 解决项目中使用@作为路径别名,导致vscode无法跳转文件的问题"@/*": ["src/*"]},// 解决prettier对于装饰器语法的警告"experimentalDecorators": true,// 解决.jsx文件无法快速跳转的问题"jsx": "preserve","allowSyntheticDefaultImports": true},// 提高 IDE 性能"include": ["src/**/*"],"exclude": ["node_modules", "dist", "build"]
    }
    
  6. prettierrc.js文件配置如下

    module.exports = {printWidth: 120, // 限制每行字符个数semi: false, // 句尾是否添加分号singleQuote: true, // 是否使用单引号tabWidth: 2, // 指定每个缩进级别的空格数useTabs: false, // 是否使用制表符缩进arrowParens: 'always', // 始终给箭头函数的参数加括号, // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号trailingComma: 'es5',endOfLine: 'lf', // 结尾是 \n \n\r lf , autobracketSpacing: true, // 在对象括号与文字之间加空格 "{ foo: bar }"htmlWhitespaceSensitivity: 'ignore', // "css" ignorebracketSameLine: false, // 将>单独一行还是在最末尾 为 true 时放在末尾singleAttributePerLine: false, // 标签中是否单个属性占一行,有多个属性时进行换行 为 true 时换行
    }
    
  7. eslintrc.js文件配置如下

    module.exports = {root: true,parserOptions: {parser: 'babel-eslint',sourceType: 'module',},env: {browser: true,node: true,es6: true,},extends: ['plugin:vue/recommended','eslint:recommended',// 'plugin:prettier/recommended' 需要添加到数组的最后一个元素// 需要安装 prettier、eslint-plugin-prettier、eslint-config-prettier'plugin:prettier/recommended',],// 填加自定义规则// 基于 (https://github.com/vuejs/eslint-config-vue)rules: {},
    };
    
  8. 手动格式化代码需要在 package.json 中做如下配置(注意配置 .prettierignore 将不需要格式化的文件忽略)

    {"scripts": {"prettier": "prettier --write ./src"},...
    }
    

九、

相关文章:

前端开发规范

一、开发工具 开发工具统一使用 VSCode代码格式化插件使用 Prettier代码格式校验使用 ESLintVSCode 需安装的插件有&#xff1a;ESLint、Prettier、Vetur 二、命名规范 项目命名使用小写字母&#xff0c;以连字符分隔 正确&#xff1a;fe-project 错误&#xff1a;FE PROJECT…...

不用科学上网,免费的GPT-4 IDE工具Cursor保姆级使用教程

大家好&#xff0c;我是可乐。 过去的一周&#xff0c;真是疯狂的一周。 GPT-4 震撼发布&#xff0c;拥有了多模态能力&#xff0c;不仅能和GPT3一样进行文字对话&#xff0c;还能读懂图片&#xff1b; 然后斯坦福大学发布 Alpaca 7 B&#xff0c;性能匹敌 GPT-3.5&#xff…...

【艾特淘】抖音小店物流体验分提升的6个维度,新手做店必看

抖音小店体验分&#xff0c;考核的内容包括商品、物流以及服务。大部分人会把重心放在商品评价和服务上&#xff0c;忽略了物流体验。但其实&#xff0c;抖音小店物流体验占比有20%&#xff0c;比服务分的占比还高一点。如果你的订单物流出了问题&#xff0c;很有可能会导致用户…...

数据结构——二叉树与堆

作者&#xff1a;几冬雪来 时间&#xff1a; 内容&#xff1a;二叉树与堆内容讲解 目录 前言&#xff1a; 1.完全二叉树的存储&#xff1a; 2.堆的实现&#xff1a; 1.创建文件&#xff1a; 2.定义结构体&#xff1a; 3.初始化结构体&#xff1a; 4.扩容空间与扩容…...

Three.js——learn02

Three.js——learn02Three.js——learn02通过轨道控制器查看物体OrbitControls核心代码index2.htmlindex.cssindex2.jsresult添加辅助器1.坐标轴辅助器AxesHelper核心代码完整代码2.箭头辅助器ArrowHelper核心代码完整代码3.相机视锥体辅助器CameraHelper核心代码完整代码Three…...

零基础小白如何入门网络安全?

我经常会看到这一类的问题&#xff1a; 学习XXX知识没效果&#xff1b; 学习XXX技能没方向&#xff1b; 学习XXX没办法入门&#xff1b; 给大家一个忠告&#xff0c;如果你完全没有基础的话&#xff0c;前期最好不要盲目去找资料学习&#xff0c;因为大部分人把资料收集好之…...

【前缀和】

前缀和前缀和子矩阵的和结语前缀和 输入一个长度为 n的整数序列。 接下来再输入 m 个询问&#xff0c;每个询问输入一对 l,r 对于每个询问&#xff0c;输出原序列中从第 l 个数到第 r个数的和。 输入格式第一行包含两个整数 n和 m 第二行包含 n个整数&#xff0c;表示整数…...

ChatGPT可以做WebRTC音视频质量性能优化,惊艳到我了

摘要 随着GPT-4的发布&#xff0c;AI的风越吹越旺。GPT-4可以回答问题&#xff0c;可以写作&#xff0c;甚至可以基于一张草图生成html代码搭建一个网站。即构社区的一位开发者倪同学就基于目前在研究的WebRTC QOS技术点对GPT-3.5跟GPT-4进行一场实验&#xff0c;ChatGPT会取代…...

MySQL数据库实现主从同步

安装MySQL数据库8.0.32 前言 今天来学习数据库主从同步的原理及过程&#xff0c;数据库主要是用来存储WEB数据&#xff0c;在企业当中是极为重要的&#xff0c;下面一起来看下。 1.1 数据库做主从的目的 MySQL主从复制在中小企业&#xff0c;大型企业中广泛使用&#xff0c…...

go语言gin框架学习

让框架去做http解包封包等&#xff0c;让我们的精力用在应用层开发 MVC模式 M: model&#xff0c;操作数据库gorm view 视图 处理模板页面 contoller 控制器 路由 逻辑函数 解决gin相关代码飘红的问题 记得启用gomodule go env -w GO111MODULEon然后到相应目录下执行 go mod i…...

Java奠基】Java经典案例讲解

目录 卖飞机票 找质数 开发验证码 数组元素的复制 评委打分 数字加密 数字解密 抢红包 模拟双色球 二维数组 卖飞机票 需求&#xff1a;机票价格按照淡季旺季、头等舱和经济舱收费、输入机票原价、月份和头等舱或经济舱。按照如下规则计算机票价格&#xff1a; 旺季&…...

新闻文本分类任务:使用Transformer实现

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️&#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…...

如何在 Vue 中使用 防抖 和 节流

大厂面试题分享 面试题库前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★地址&#xff1a;前端面试题库 https://mp.weixin.qq.com/s?__bizMzU5NzA0NzQyNg&mid2247485824&idx3&sn70cd26a7c0c683de64802f6cb9835003&scene21#wech…...

美国Linux服务器系统增强安全的配置

美国Linux服务器系统可能出现的安全漏洞中&#xff0c;更多是由于不当的系统配置所造成的&#xff0c;用户们可以通过一些适当的安全配置来防止问题的发生。美国Linux服务器系统上运行的服务越多&#xff0c;不当配置的概率也就越高&#xff0c;那么系统出现安全问题的可能性也…...

【史上最全面esp32教程】oled显示篇

文章目录前言介绍及库下载基础使用引脚的连接使用函数总结前言 本节课主要讲的是OLED的基础使用。使用的oled为0.96寸&#xff0c;128*64。 大家的其他型号也是可以用的。 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 介绍及库下载 oled的简介&…...

第十四届蓝桥杯三月真题刷题训练——第 21 天

目录 第 1 题&#xff1a;灭鼠先锋 问题描述 运行限制 代码&#xff1a; 思路&#xff1a; 第 2 题&#xff1a;小蓝与钥匙 问题描述 答案提交 运行限制 代码&#xff1a; 思路 : 第 3 题&#xff1a;李白打酒加强版 第 4 题&#xff1a;机房 第 1 题&#xff1…...

css绘制一个Pinia小菠萝

效果如下&#xff1a; pinia小菠萝分为头部和身体&#xff0c;头部三片叶子&#xff0c;菠萝为身体 头部 先绘制头部的盒子&#xff0c;将三片叶子至于头部盒子中 先绘制中间的叶子&#xff0c;利用border-radius实现叶子的效果&#xff0c;可以借助工具来快速实现圆角的预想…...

OpenCV入门(二十)快速学会OpenCV 19 对象测量

OpenCV入门&#xff08;二十&#xff09;快速学会OpenCV 19 对象测量1.对象测量2.多边形拟合3.计算对象中心作者&#xff1a;Xiou 1.对象测量 opencv 中对象测量包括&#xff1a; 如面积&#xff0c;周长&#xff0c;质心&#xff0c;边界框等。 弧长与面积测量&#xff1b; …...

TCP和UDP协议的区别?

是否面向连接&#xff1a; TCP 是面向连接的传输&#xff0c;UDP 是面向无连接的传输。 是否是可靠传输&#xff1a;TCP是可靠的传输服务&#xff0c;在传递数据之前&#xff0c;会有三次握手来建立连接&#xff1b;在数据传递时&#xff0c;有确认、窗口、重传、拥塞控制机制…...

【C语言蓝桥杯每日一题】——排序

【C语言蓝桥杯每日一题】—— 排序&#x1f60e;前言&#x1f64c;排序&#x1f64c;总结撒花&#x1f49e;&#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右铭&#xff1a;全神贯注的上吧&#xff01;&#xff01;&#xff01; &#x1f60a;作者简介&am…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...