前端开发规范梳理

前端开发规范是确保团队协作、代码可维护性和项目一致性的重要文档。以下是一份前端开发规范梳理，欢迎参考和补充。

一个良好的开发规范，至少要做到以下方面，如果没有做到，还增加了了一些额外的工作量，可以直接放弃该规范。

提高代码可读性，使代码更加易于维护提高团队协作效率，减少沟通成本，提高效率提高代码质量，减少bug运行环境当前大环境下，很多项目都是前后端分离，而且大部分项目都使用 Vue 或者 React 等框架开发，由于每个项目中使用了不同的框架版本和包版本。因此我们要确保每个项目运行在最佳版本的环境中。

Node.js版本：日常开发中保证 Node.js 版本与当前项目的最佳版本一致。

由于不同项目使用的 Node.js 版本不同，需要我们频繁切换版本，我们可以借助 nvm或n 等工具来管理 Node.js 版本。Mac: 推荐使用 n 作为Node版本管理 Node.js版本管理器 - nWindows: 推荐使用 nvm 作为Node版本管理）Node.js版本管理器 - nvm使用锁文件：锁定项目依赖包版本。

使用 package-lock.json（npm）或 yarn.lock（yarn）文件锁定依赖版本，确保所有开发者使用相同的依赖版本。并且还能避免一些依赖冲突问题导致的项目启动失败。如果需要使用 package-lock.json 或者 yarn.lock ，需要在 .gitignore 文件中取消 package-lock.json 和 yarn.lock 文件。Git 提交规范Git Commit Message 规范在现在的团队多人协作开发中越来越重要，已经成为一种新的标准实践。尤其是在一些大型项目和追求高质量和可维护性的项目中。遵循一定的规范，能为我们带了很多好处。

按照规范的提交信息有助于确保每个提交的信息都是清晰且一致的，使得其他同事能够迅速理解提交的目的和影响。清晰的提交信息减少了需要额外沟通的情况，因为大部分信息都可以从提交记录中直接获取。使用特定的类型（如 feat, fix, docs）可以传达提交的性质，帮助团队识别哪些是新功能，哪些是修复，哪些是文档更新等。规范总示例：

[TYPE]:[相关需求或者BUG编号][修改或者新增模块-具体操作]以下为一些示例：

// BUG修复

git commit -m '[fix]:[BUG_20201205_01][用户列表-修复搜索错误]'

// 新功能

git commit -m '[feat]:[202012_05_01][用户列表-新增用户]'

// 样式修改

git commit -m '[style]:[202012_05_01][全局样式-顶部导航栏统一化]'前端常用TYPE：

TYPE类型释义示例init项目初始化[init]:[][XX项目初始化]feat添加或优化新功能[feat]:[Feat_20221001_01][新增角色添加功能-页面开发]fix修复BUG相关[fix]:[BUG_20221001_01][角色列表-新增角色修复]refactor代码重构[refactor]:[][全局方法-文档导出优化]style样式改动[style]:[][全局样式-全局主题色调整]docs文档更改[docs]:[][README修改]build构建相关的更改[build]:[][构建配置修改]Git可视化工具

推荐使用 Sourcetree 作为Git可视化工具，它可以提供直观的界面和功能，方便团队协作。

命名规范所有命名推荐使用语义话命名，命名要具有描述性，禁止使用拼音或者拼音缩写，禁止使用中文命名。可以使用规范缩写。

例如：my-project、assets/styles/base.css

错误示范：ceshi、page1.vue

项目命名项目名：小写字母，多个单词用中划线连接。

例如：my-project

错误示范：MyProject、my_project

文件命名文件名：小写字母，多个单词用中划线连接。

文件扩展名：根据文件类型使用相应的扩展名，例如：.html 、.css 、.js 、.png 、.jpg 等。

例如：index.html、user-profile.vue、api-service.js

错误示范：Index.html、userProfile.vue、apiservice.js

HTML 规范文档结构文档类型：使用 HTML5 的文档类型 。

字符编码：在 中使用 指定字符编码。

指定语言：在 标签中使用 lang 属性指定文档的语言。

文档内容：确保文档包含 html、head 和 body 三个基本部分。

示例：

元素属性元素属性：所有元素和属性必须使用小写字母，属性值必须用双引号括起来。

语义话标签：使用语义化标签，如