Tianyi's Blog Tianyi's Blog
首页
  • 计算机网络
  • 操作系统
  • 计算机科学
  • Nginx
  • Vue框架
  • 环境配置
  • Java
  • JVM
  • Spring框架
  • Redis
  • MySQL
  • RabbitMQ
  • Kafka
  • Mirror Sites
  • Dev Tools
  • Docker
  • Jenkins
  • Scripts
  • Windows
  • 科学上网
  • 旅行
  • 网站日记
  • 软件
  • 电子产品
  • 杂野
  • 分类
  • 友情链接
GitHub (opens new window)

Tianyi

一直向前,永不停止
首页
  • 计算机网络
  • 操作系统
  • 计算机科学
  • Nginx
  • Vue框架
  • 环境配置
  • Java
  • JVM
  • Spring框架
  • Redis
  • MySQL
  • RabbitMQ
  • Kafka
  • Mirror Sites
  • Dev Tools
  • Docker
  • Jenkins
  • Scripts
  • Windows
  • 科学上网
  • 旅行
  • 网站日记
  • 软件
  • 电子产品
  • 杂野
  • 分类
  • 友情链接
GitHub (opens new window)
  • Nginx

  • Vue框架

    • 前端代码规范
      • 市面上的编码规范
        • 国内大厂
        • 国外大厂
        • 独立组织
      • 优劣分析
      • eslint rules
      • 参考
    • Vue基础
  • 前端环境配置

  • 前端文档

  • 前端
  • Vue框架
tianyi
2022-01-03
目录

前端代码规范

# 前端编码规范

凡有代码处兼应有规范。

# 市面上的编码规范

# 国内大厂

百度的编码规范:

规范文档: https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md

配置文件: https://github.com/ecomfe/fecs/tree/master/lib

腾讯编码规范: http://alloyteam.github.io/CodeGuide/

阿里的编码规范没有找到,欢迎补充。

# 国外大厂

Airbnb 的编码规范:

  • 官方:https://github.com/airbnb/javascript
  • 中文翻译:https://github.com/sivan/javascript-style-guide/blob/master/es5/README.md

Google 的编码规范: https://google.github.io/styleguide/javascriptguide.xml

# 独立组织

国际标准编码规范: https://github.com/standard/standard

vue 组件的编码规范: https://github.com/pablohpsilva/vuejs-component-style-guide

官方风格指南: https://cn.vuejs.org/v2/style-guide/index.html

vue 源码的编码规范: 2 space index, never semicolon.

# 优劣分析

百度的编码规范脱胎于谷歌编码规范,属于比较老牌的编码规范,比如百度的规范缩进是 4 个空格,谷歌编码规范没有样式预处理器的编码规范。

国际编码规范是认可度比较广泛的 -- 13886 star(相对于 Google 一揽子规范 11387 star,Aribnb 1006),功能开箱既用,node API 丰富,IDE 插件丰富,多语言文档完整,但是只有 js 的规范,没有 HTML 和 CSS 及样式预处理器规范。

腾讯的覆盖面较广,从文件命名到HTML,连 CSS 属性的顺序都给了推荐,样式预处理器只有 Sass。

腾讯 (opens new window) 和 Airbnb (opens new window) 都给出了 Sass 的规范,可见预处理器 Sass 是比较受欢迎的。

# eslint rules

配置:https://eslint.org/docs/rules/

# 参考

javascript检验工具的比较 (opens new window)

jslint to eslint (opens new window)

eslint (opens new window)

eslint 中文版配置 (opens new window)

百度 ESLint 的使用规则 (opens new window)

百度 ESLint 的配置规则 (opens new window)

完善页面 (opens new window)
nginx源码阅读
Vue基础

← nginx源码阅读 Vue基础→

最近更新
01
JDK
02-23
02
BadTasteCode && 优化
09-11
03
Gradle 实践操作指南及最佳实践
09-11
更多文章>
Theme by Vdoing | Copyright © 2021-2025 Tandy | 粤ICP备2023113440号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式