大家好，我是你们的前端章鱼猫，一只不爱吃鱼不爱喵喵的超级猫～简介前端章鱼猫2016年加入GitHub，到现在快5了自2020年以来的年。相信很多人都没有访问GitHub的习惯，所以开源信息总会存在不对称，不知道有哪些优秀的前端开源项目值得学习。初级前端和高级前端之间，最大的差距可能是信息鸿沟造成的。从2018年开始，我养成了每天浏览GitHub的习惯，通常是在早上上班前或午休时间。每天看看有哪些优秀的前端项目开源，使用的主流前端技术栈有哪些，值得学习。因此，我收集了很多不错的开源项目，在这里推荐给大家。每周推送一到三篇精英文章。希望大家在浏览和学习前端章鱼猫推荐的这些开源项目的过程中，能够学到更多的编程知识，提高编程技能，找到编程的乐趣。公众号：前端GitHub，专注于在GitHub上挖掘优秀的前端开源项目，平滑你的前端信息不对称，涵盖JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构和算法等等。以下是【前端GitHub】第五期。今天给大家带来的是几大厂商的前端代码规范。前端代码规范数万行代码，安全第一；前端不规范，同事会哭。腾讯也收录了很多内容：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(variable){case'1'://do...break;case'2'://do...break;default://do...}规范文档：https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md网易编码规范：CSS规范：一系列规则和方法，帮助你构建和管理样式HTML规范：一系列建议和方法，助你打造简洁严谨的结构工程师规范：页面开发工程师前端工作流与团队协作规范但不止于此，还有更多：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是一个“决定”的代码格式化工具。总之，这个工具让输出的代码在风格上保持一致。目前也被大部分前端项目使用。Prettier：https://prettier.io/终于，【FrontEndGitHub】第五期完结了。更多亮点请看下方仓库地址：原文地址：https://github.com/FrontEndGitHub/FrontEndGitHub平时如何寻找好的开源项目，可以看这两篇文章：GitHub上的挖矿仙术——HowtoDiscoverExcellentOpenSourceProjects恕我直言，你甚至可能不会使用GitHub搜索-如何准确搜索技巧的神仙。觉得有用吗？喜欢就收藏一下，顺便给个赞，您的支持就是对我最大的鼓励！微信搜索“前端GitHub”，回复“电子书”，获取160本优秀前端书籍。恕我直言，你可能连GitHub搜索都不会用——如何准确搜索GitHub上最火的数据结构和算法项目最值得前端学习的神技！全球最受欢迎的WEB开发学习路线，没有之一！没有一个！3天的时间，我在GitHub上获得了近10000个赞，在GitHub上获得了1.6W+的star。程序员不得不知道的“潜规则”又流行起来了。如果我早知道，我就不会秃头了
