一、如何保证代码的质量
- 使用代码风格检查工具：使用诸如 ESLint 等代码风格检查工具，可以规范代码的书写风格，提高代码的一致性和可读性。
- 使用类型和错误检查工具：使用诸如 TypeScript、Flow 等类型检查工具和 ESLint 等错误检查工具，可以避免编码时出现类型和语法错误，用来提高代码质量和可维护性。
- 进行代码复审和 code review：通过与团队成员进行代码复审和 code review，可以发现代码中存在的问题，提高代码的可读性和扩展性。
- 单元测试和集成测试：通过编写单元测试和集成测试，可以检查代码是否符合预期的行为。单元测试和集成测试是保证代码质量和程序正确性的重要手段。
- 模块化：将系统拆分成多个小模块或组件，每个模块都专注于实现特定的功能。这样可以提高代码的可重用性和可维护性，更便于后期的维护和扩展。
- 提高代码的可读性：通过提高代码的可读性，让代码更加易于理解和维护。比如使用有意义的命名、注释、缩进、代码结构等方面加强代码质量。
二、编码规范
1、HTML/Template 编码规范
（1）缩进使用两个空格代替Tab
前端代码层级较深，使用短缩进有利于利用屏幕空间，提升效率，使用两个空格代替Tab可以保证在所有环境下获得一致展现。
<!-- not good --> <div> <div>bar</div> </div> <!- good --> <div> <div>bar</div> </div>
（2）嵌套元素应当缩进一次(即两个空格)，同层级缩进应保持一致
<!- not good --> <div> <div>bar</div> <div>bar</div> </div> <!- good--> <div> <div>bar</div> <div>bar</div> </div>
（3）对于属性的定义，使用双引号，不要使用单引号
<!- not good --> <input class='a' type=text> <!- good--> <input class="a" type="text">
（4）不要省略可选的结束标签(closing tag) (如或)
省略可选的结束标签，虽不会违反H5规范，但可能会造成层级上的困扰，导致代码出现无法预料的问题。
<!-- not good --> <h1>h1 text <h2>h2 text <!-- good --> <h1>h1 text</h1> <h2>h2 text</h2>
（5）td / th 要在 tr ⾥⾯，li 要在 ul / ol ⾥⾯
<!-- not good --> <table> <td>test</td> </table> <!-- good --> <table> <tr> <td>test</td> </tr> </table>
（6）ul / ol 的直接⼦元素只能是 li，不能包含其他元素
<!-- not good --> <ul> <span>123</span> <li>a</li> <li>b</li> </ul> <!-- good --> <ul> <li><span>123</span></li> <li>a</li> <li>b</li> </ul>
（7）⾏内元素⾥⾯不可使⽤块级元素
a 标签是⼀个⾏内元素，⾏内元素⾥⾯套了⼀个 div 的标签，这样可能会导致 a 标签⽆法正常点击
<!-- not good --> <a href="../test"> <div></div> </a> <!-- good --> <a href="../test" style="display: block"> <div></div> </a>
（8）不要在https的链接⾥写http的图⽚
只要https的⽹页请求了⼀张http的图⽚，就会导致浏览器地址栏左边的⼩锁没有了，⼀般不要写死，写成根据当前域名的协议去开头：
<img src="//static.chimeroi.com/hello-world.jpg">
（9）不要在⾃闭合（self-closing）元素的尾部添加斜线（ HTML5 规范中说明这是可选的）
<!-- not good --> <img src="logo.png" alt /> <!-- good --> <img src="logo.png" alt>
（10）不使⽤属性设置样式（img, table等元素）
<!-- not good --> <img src="test.jpg" alt width="400" height="300"> <!-- good --> <img src="test.jpg" style="width:400px;height:300px;">
（11）⾃定义属性要以data-开头 ⾃⼰添加的⾮标准的属性要以data-开头
否则w3c validator会认为是不规范的
<!-- not good --> <div count="5"></div> <!-- good --> <div data-count="5"></div>
2、CSS / Less 编码规范
（1）命名：
- 【强制】类名使⽤⼩写字母，以中划线分隔
- 【强制】id 采⽤驼峰式命名
- 【强制】less 中的变量、函数、混合等采⽤驼峰式命名
@mainFontColor: #444; #companyName, .company-name { color: @mainFontColor; }
（2）语法：
- 【强制】所有声明语句都应当以分号结尾
/* error */ .selector { font-size: 15px color: red } /* good */ .selector { font-size: 15px; color: red; }
- 【强制】⼗六进制值应该全部⼩写，例如：#f3f6fa
- 【推荐】不要使⽤*选择器
- 【推荐】适当使⽤:before和:after来画页⾯的⼀些视觉上的辅助性元素
- 如三⾓形、短的分隔线、短竖线等，可以减少页⾯上没有⽤的标签
- 【推荐】选择器不要超过4层（在 Less 中避免嵌套超过 4 层）
- 【推荐】⽤ border: 0; 代替 border: none;
- 【推荐】使⽤全写形式的⼗六进制值。
- 例如，⽤#ffffff代替#fff，这样颜色能保持统一格式。
- 【推荐】对于属性值或颜⾊参数，省略⼩于 1 的⼩数前⾯的 0
- 例如，.5 代替 0.5；-.5px 代替-0.5px
（3）样式兼容性
- 【强制】当使⽤⼀些较新的 CSS3 语法时，应注意添加浏览器前缀
（ 打包⼯具包含 CSS 预处理，一般⽆需考虑此条） - 【推荐】不要使⽤ input 的 line-height来做垂直居中
设置 line-height 为⼀个很⾼的值会导致 Safari 浏览器的输⼊光标变得巨⼤ (与line-height等⾼)
/* not good */ input { height: 40px; line-height: 40px; } /* good */ input { height: 20px; line-height: 20px; padding: 10px 0; }
- 【强制】⾮通⽤样式使⽤嵌套⽅式进⾏编写，避免影响其他⾃⼰不了解样式，造成样式覆盖
- 【强制】减少使⽤!important，除⾮原样式使⽤内联样式或!important，且⽆法直接修改才考虑使用
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键（二）：https://developer.aliyun.com/article/1628436
