wingmeng/code-guide

Web 前端代码规范

code-guide Web 前端代码规范

@Version: 1.0 Beta
@Author: Wing Meng
@Update: 2017-11-08

---

完整版查看地址：https://wingmeng.github.io/code-guide/

目录

• 文件/资源命名规范
• HTML 规范
• CSS, SCSS 规范
• JavaScript 规范

规范实施流程

1. 编辑器（或 IDE）安装对应的 EditorConfig 插件，传送门：编辑器插件和配置文件；
2. 下载本规范的编辑器配置文件（包含了缩进方式、缩进字符数、字符编码、换行符等配置项）；
3. 将配置文件放到项目根目录中；
4. 严格按照规范写代码；
5. Enjoy it!

唏嘘的过往

先上图感受下没有代码规范的以往项目：

• 未分类且命名杂乱的项目文件，找文件效率极低 😭

  

• 结构、样式、事件耦合在一起的代码，毫无维护性可言 😨

  

• 缩进、空格、换行混乱，代码排版凌乱不堪，可读性极差 😱

  

• 不规范的命名，极易造成代码冲突，引发低级 bug 😩

  

希冀的未来

1. 好的代码规范可以尽可能的减少项目维护成本；
2. 好的代码规范可以改善代码的可读性，提高协作开发效率；
3. 好的代码规范可以减少低级 bug 的出现概率；
4. 长期的规范性编码还可以让开发人员养成好的编码习惯，甚至锻炼出更加严谨的思维。