前端代码风格指南｜ HTML、CSS、JavaScript以及Vue代码风格指南关闭所有 HTML 元素。关闭空的

前端代码风格整理

HTML

请使用小写元素名

<div></div>

关闭所有 HTML 元素。

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

关闭空的 HTML 元素。

<meta charset="utf-8" />

使用小写属性名。

<div class="menu">

属性值加引号。

<table class="table striped">

请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

等号两边的空格是合法的

<link rel = "stylesheet" href = "styles.css">

尽量避免代码行超过 80 个字符。
短注释应该在单行中书写，并在 <!-- 之后增加一个空格，在 <!-- 之前增加一个空格。长注释，跨越多行，应该通过在独立的行中书写。
多个属性应当分行。

CSS

为ID和class取通用且有意义的名字。
非必要的情况下，ID和class的名称应尽量简短。
非必要的情况下不要使用元素标签名和ID或class进行组合（div.nav div#nav）。
写属性值的时候尽量使用缩写。
非必要的情况下 0 后面不用加单位，省略0开头小数点前面的0。。
十六进制尽可能使用3个字符。
缩进所有代码块的内容，它能够提高层次结构的清晰度。
所有声明都要用";"结尾。考虑到一致性和拓展性，请在每个声明尾部都加上分号。
在属性名和值之间加一个空格（可不是属性名和冒号之间噢）。
每个选择器和声明都要独立新行。
两个规则之间隔行。
CSS书写顺序：
- 位置属性(position, top, right, z-index, display, float等)
- 大小(width, height, padding, margin)
- 文字系列(font, line-height, letter-spacing, color- text-align等)
- 背景(background, border等)
- 其他(animation, transition等)

JAVASCRIPT

使用两个空格进行缩进。
除需要转义的情况外，字符串统一使用单引号。

let name = 'curry' // ok
let name = "curry" //aviod

不要定义未使用的变量。
关键字后面加空格。

if (name === 'curry') {  }  //ok
if(name==='curry){ ... } //aviod

函数声明时括号与函数名间加空格。

function name (arg) { ... } //ok
function name(arg){ ... } //aciod

始终使用 === 替代 ==。(例外： obj == null 可以用来检查 null || undefined。)

if (name === 'curry') //ok
if (name == 'curry') //aviod

字符串拼接操作符 (Infix operators) 之间要留空格。

let name = 'stphen' + name + '!' //ok
let name = 'stphen'+name+'!' //aviod

逗号后面加空格。

let obj = {a: 1, b: 2}//ok
let obj = {a: 1,b: 2}//aviod

else 关键字要与花括号保持在同一行。

//ok
if (...) {
	...
} else {
	...
}

//aviod
if (...) {
	...
} 
else
{
	...
}

多行 if 语句的的括号不能省。

// ✓ ok
if (options.quiet !== true) console.log('done')
// ✓ ok
if (options.quiet !== true) {
  console.log('done')
}
// ✗ avoid
if (options.quiet !== true)
  console.log('done')

不要丢掉异常处理中err参数。
使用浏览器全局变量时加上 window. 前缀。document、console 和 navigator 除外。

window.alert('123') //ok
alert('123')//aviod

不允许有连续多行空行。
每个 var 关键字单独声明一个变量。

//ok
var name = 'curry'
var age = '18'
//aviod
var name = 'curry', age = '18'

条件语句中赋值语句使用括号包起来。这样使得代码更加清晰可读，而不会认为是将条件判断语句的全等号（===）错写成了等号（=）。

// ✓ ok
while ((m = text.match(expr))) {
  // ...
}

// ✗ avoid
while (m = text.match(expr)) {
  // ...
}

单行代码块两边加空格。

  function foo () {return true}    // ✗ avoid
  function foo () { return true }  // ✓ ok

对于变量和函数名统一使用驼峰命名法。

  function my_function () { }    // ✗ avoid
  function myFunction () { }     // ✓ ok

  var my_var = 'hello'           // ✗ avoid
  var myVar = 'hello'            // ✓ ok

不允许有多余的行末逗号。

  var obj = {
    message: 'hello',   // ✗ avoid
  }

始终将逗号置于行末。

  var obj = {
    foo: 'foo'
    ,bar: 'bar'   // ✗ avoid
  }

  var obj = {
    foo: 'foo',
    bar: 'bar'   // ✓ ok
  }

键值对当中冒号与值之间要留空白。

构造函数要以大写字母开头。

function Person () {}

无参的构造函数调用时要带上括号。
创建数组使用数组字面量而不是构造器。
同一模块有多个导入时一次性写完。
switch 一定要使用 break 来将条件分支正常中断。
不要省去小数点前面的0。
模板字符串中变量前后不加空格。

Vue书写规范指南

组件名为多个单词，这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。
组件的 data 必须是一个函数。
Prop 定义应该尽量详细。至少需要指定其类型。
在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。
永远不要把 v-if 和 v-for 同时用在同一个元素上。
为组件样式设置作用域。
只要有能够拼接文件的构建系统，就把每个组件单独分成文件。
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
多个 attribute 的元素应该分多行撰写，每个 attribute 一行。
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
应该把复杂计算属性分割为尽可能多的更简单的 property。
指令缩写 (用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。
组件/实例的选项应该有统一的顺序。
- 副作用 (触发组件外的影响)
- 全局感知 (要求组件以外的知识)：name、parent
- 组件类型 (更改组件的类型)：functional
- 模板修改器 (改变模板的编译方式)：delimiters、comments
- 模板依赖 (模板内使用的资源)：components、directives、filters
- 组合 (向选项里合并 property)：extends、mixins
- 接口 (组件的接口)：inheritAttrs、model、props/propsData
- 本地状态 (本地的响应式 property)：data、computed
- 事件 (通过响应式事件触发的回调)：watch、生命周期钩子 (按照它们被调用的顺序)
- 非响应式的 property (不依赖响应系统的实例 property)：methods
- 渲染 (组件输出的声明式描述)：template/render、renderError
元素的attribute的顺序
- 定义 (提供组件的选项)：is
- 列表渲染 (创建多个变化的相同元素)：v-for
- 条件渲染 (元素是否渲染/显示)：v-if、v-else-if、v-else、v-show、v-cloak
- 渲染方式 (改变元素的渲染方式)：v-pre、v-once
- 全局感知 (需要超越组件的知识)：id
- 唯一的 attribute (需要唯一值的 attribute)：ref、key
- 双向绑定 (把绑定和事件结合起来)：v-model
- 其它 attribute (所有普通的绑定或未绑定的 attribute)
- 事件 (组件事件监听器)：v-on（@）
- 内容 (覆写元素的内容)：v-html、v-text
单文件组件应该总是让
应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或变更 prop。
应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线。

前端代码风格指南 ｜ HTML、CSS、JavaScript以及Vue代码风格指南

HTML

CSS

JAVASCRIPT

Vue书写规范指南

前端代码风格指南｜ HTML、CSS、JavaScript以及Vue代码风格指南