今天给大家带来的是几大厂商的前端代码规范。前端代码规范，代码千万行，安全第一；前端不规范，同事哭两句。腾讯也收录了很多内容：PC端专题：快速入门、文件目录、页眉、通用标题、通用脚、统计代码、兼容性测试移动端专题：快速入门、文件目录、页眉、REM布局、通用脚，统计代码，共享组件，兼容性要求双端官网：快速入门，页面跳转http://tgideas.qq.com/doc/index.html但是里面也有一些内容是针对其业务的，不普遍的。对比腾讯在京东的代码规范，我推荐O2ConvexLab的代码规范，比较完整。HTML规范是根据W3C、Apple开发者等官方文档，结合团队日常业务需求和团队在日常开发过程中总结提炼的经验而制定的。图片规范了解各种图片格式的特点，根据特点制定图片规范，包括但不限于图片质量协议、图片导入方式、图片合并处理等。CSS规范统一了团队的CSS代码编写和语法SASS预编译语言风格，提供通用的媒体查询语句和浏览器私有属性引用，从业务层面统一常用模块的引用。命名约定从“目录命名”、“图片命名”和“ClassName”命名等方面规定了团队的命名习惯，增强团队代码的可读性。JavaScript规范统一了团队的JS语法风格和书写习惯，降低了程序出错的概率，其中还包括ES6语法规范和最佳实践。傲途实验室：https://guide.aotu.io/index.html阿里巴巴包括：类型、对象、数组、字符串、函数、属性、变量、提升、比较运算符&等号、块、注释、空白、逗号、分号、类型转换、命名约定、访问器、构造函数、事件、模块、jQuery、ECMAScript5兼容性、测试、性能、资源、JavaScript风格指南AirbnbJavascriptStyleGuide：https://github.com/airbnb/javascript百度JavaScript编码规范，HTML、CSS、Less、E-JSON数据传输标准、模块和加载器、包结构、项目目录结构、图表库标准、React编码规范。例如：Indentation[强制]使用4个空格作为缩进级别，不允许使用2个空格或制表符。【强制】switch下的case和default必须加缩进级别。//goodswitch(变量){case'1'://do...break;case'2'://do...break;default://do...}//badswitch(变量){case'1'://do...break;case'2'://do...break;default://do...}规范文档：https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md网易编码规范：CSS规范：一系列规则和方法，帮助你构建和管理样式HTML规范：一系列建议和方法，帮助你构建简洁严谨的结构工程师规范:页面开发工程师的前端Workflow和团队协作规范但是不止于此，还有更多：http://nec.netease.com/standardJavaScriptStandardStyle除了很多公司和组织，很多个人也使用项目中的规范。https://github.com/standard/standardVue这里是Vue特定代码的官方风格指南。如果您在项目中使用Vue，本指南是避免错误、问题和反模式的很好参考。但是，我们不相信风格指南中的所有内容都适用于所有团队或项目。所以建议根据过去的经验、周围的技术堆栈和个人价值观做出有意义的偏差。官方风格指南：https://cn.vuejs.org/v2/style-guide/index.htmles6如何将ES6的新语法应用到编码实践中，将其与传统的JavaScript语法相结合，写出合理的，即代码易于阅读和维护。es6编程风格：http://es6.ruanyifeng.com/#docs/styleBootstrap包含HTML和CSS。HTML语法，HTML5doctype，语言属性，IE兼容模式，字符编码，导入CSS和JavaScript文件，实用为王，属性顺序，布尔属性，减少标签数量，JavaScript生成标签。CSS语法、声明顺序、不要使用@import、媒体查询位置、前缀属性、单行规则声明、属性声明的简写、Less和Sass中的嵌套、Less和Sass中的运算符、注解、类命名、选择器、代码组织。BootstrapCodingSpecification：https://codeguide.bootcss.com/ESLint目前是大多数前端项目都会使用的可组装的JavaScript和JSX检查工具。查找问题ESLint静态分析您的代码以快速查找问题。ESLint内置于大多数文本编辑器中，您可以将ESLint作为持续集成管道的一部分运行。自动修复ESLint发现的许多问题都可以自动修复。ESLint修复是语法感知的，因此您不会遇到传统查找和替换算法引入的错误。自定义预处理代码，使用自定义解析器，并编写您自己的规则以使用ESLint的内置规则。您可以自定义ESLint以完全按照您的项目需要的方式工作。ESLint：https://eslint.org/ESLint中文网址：https://eslint.bootcss.com/PrettierPrettier是一个“决定”的代码格式化工具。总之，这个工具让输出的代码在风格上保持一致。目前也被大部分前端项目使用。更漂亮：https://prettier.io/
