前端开发代码规范

最新推荐文章于 2024-06-25 22:00:00 发布

bfbzxdl

最新推荐文章于 2024-06-25 22:00:00 发布

阅读量358

点赞数

文章标签：代码规范前端 javascript vue.js

本文链接：https://blog.csdn.net/bfbzxdl/article/details/125440819

版权

本文详细介绍了前端开发的代码规范，包括命名规范、使用prettier和eslint、HTML、CSS、JS、Vue、Vuex的规范，以及图片处理和代码提交规范。强调了语义化、可读性和性能优化的重要性，提倡使用ES6+语法，遵循Vue官方规范，以及合理使用CSS选择器和JS逻辑。

摘要由CSDN通过智能技术生成

1. 基本规范

1.1. 命名法名称

PascalCase：大驼峰，首字母大写，如：MyComponent
camelCase：小驼峰，首字母小写，如：myComponent
kebab-case：多个小写单词，中间使用中线分隔，如：my-component

1.2. 项目、目录、文件

除非是特殊说明的文件（如：README.md ），文件名应为全小写
所有的 项目、目录、文件 都用小写命名，以中线分隔
引入资源使用相对路径；外部链接不要指定具体的协议（ http，https ），使其自适应

1.3. 注释规范

单行注释：用 // 来注释，与被注释的内容隔一个空格；行尾注释，则还需与前面的内容给隔一个空格
多行注释：用 /* */ 来注释，每一行前面要有 * ，且与内容隔一个空格
```
/*
* 我是多行注释
*/
```

2. 使用 prettier、eslint 插件开发

// .prettierrc 部分配置项
{
   
  "printWidth": 160,
  "semi": false,
  "singleQuote": true,
  // 缩进字节数
  "tabWidth": 2,
  // 缩进不使用tab，使用空格
  "useTabs": false,
  // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "trailingComma": "all",
  "quoteProps": "as-needed",
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "bracketSpacing": true,
  // 在jsx中把'>' 单独放一行
  "jsxBracketSameLine": false,
  //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "arrowParens": "always"
}

3. HTML规范

每个块级元素独立一行；行内元素可选
行内元素不要嵌套块级元素；段落和标题只能嵌套行内元素
优先使用语义化标签，避免全是 div + span

4. CSS 规范

4.1. 样式命名

class、id 都需小写，class 用小写和中线，id 用小驼峰
全英文，禁止使用特殊字符
样式名不能包含 ad、guangao、ads、gg 等广告含义的关键词，避免网页被屏蔽

命名需具有语义化，如：

 头：header
 内容：content/container
 尾：footer
 导航：nav
 子导航：subnav
 侧栏：sidebar
 栏目：column
 页面外围控制整体佈局宽度：wrapper
 左右中：left right center
 登录条：loginbar
 标志：logo
 广告：banner
 页面主体：main
 热点：hot
 新闻：news
 下载：download
 菜单：menu
 子菜单：submenu
 搜索：search
 友情链接：friendlink
 页脚：footer
 版权：copyright
 滚动：scroll
 内容：content
 标签：tags
 文章列表：list
 提示信息：msg
 小技巧：tips
 栏目标题：title
 加入：joinus
 指南：guide
 服务：service
 注册：regsiter
 状态：status
 投票：vote
 合作伙伴：partner