前端规范

命名规范

项目命名

全部采用小写方式, 以下划线分隔。
例:my_project_name

目录命名

参照项目命名规则;

有复数结构时,要采用复数命名法。

例:scriptsstylesimagesdata_models

vue 的项目中,components 下的组件目录名,使用大驼峰命令

例:LeftBar

JS 文件命名

参照项目命名规则。

例:account_model.js

CSS, SCSS 文件命名

参照项目命名规则。

例:retina_sprites.css

HTML 文件命名

参照项目命名规则。

例:error_log.html

HTML 规范

语法:

  • 缩进使用 tab(2 个空格);
  • 嵌套的节点应该缩进;
  • 在属性上,使用双引号,不要使用单引号;
  • 属性名全小写,用中划线(-)做分隔符;
  • 要在自动闭合标签结尾处使用斜线;
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company_logo.png" alt="Company" />

    <!-- 属性名全小写,用中划线(-)做分隔符 -->
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

标准模式

在开头规定 doctype,来启动标准模式,doctype 要大写。

<!DOCTYPE html>
<html>
  ...
</html>

规定字符编码

通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为'UTF-8'。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  ...
</html>

IE 兼容模式

用 meta 标签指定页面应该使用什么版本的 IE 来渲染。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  </head>
  ...
</html>

减少标签数量

在编写 HTML 代码时,需要尽量避免多余的父节点;

<!-- bad -->
<span class="avatar">
  <img src="..." />
</span>

<!-- good -->
<img class="avatar" src="..." />

语义化标签

html 的标签能使用语义化的,尽量使用语义化标签,避免一个页面都是 div 或者 p 标签

<!-- bad -->
<div>
  <p></p>
</div>

<!-- good -->
<header></header>
<footer></footer>

JavaScript 规范

缩进

使用 tab 缩进(2 个空格)

if (x < y) {
  x += 10;
} else {
  x += 1;
}

变量命名

  • 标准变量采用驼峰式命名
  • 'Android'在变量名中大写第一个字母
  • 'iOS'在变量名中小写第一个,大写后两个字母
  • 常量全大写,用下划线连接
  • 构造函数,大写第一个字母
  • jquery 对象必须以'$'开头命名
var thisIsMyName;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
  this.name = name;
}

// not good
var body = $("body");

// good
var $body = $("body");

变量声明

一个函数作用域中所有的变量声明尽量提到函数首部。如果可以使用 let 和 const 的,要使用 let 和 const。

function doSomethingWithItems(items) {
  // use one var
  let value = 10,
    result = value + 10,
    i,
    len;

  for (i = 0, len = items.length; i < len; i++) {
    result += 10;
  }
}

单行长度

不要超过 100,但如果编辑器开启 word wrap 可以不考虑单行长度。

分号

统一要加分号。

空格

以下几种情况不用写空格:

  • 对象的属性名后
  • 函数调用括号前
  • 无论是函数声明还是函数表达式,'('前不要空格
  • 数组的'['后和']'前
  • 运算符'('后和')'前

以下几种情况一定要写空格:

  • 三元运算符'?:'前后
  • 逗号后必须要有空格
  • 代码块'{'前
  • 下列关键字前:else, while, catch, finally
  • 下列关键字后:if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
  • 单行注释'//'后(若单行注释和代码同行,则'//'前也需要),多行注释'*'后
  • 对象的属性值前
  • for 循环,分号后留有一个空格,前置条件如果有多个,逗号后留一个空格
  • 无论是函数声明还是函数表达式,'{'前一定要有空格
  • 函数的参数之间

例:

// not good
var a = {
  b : 1
};

// good
var a = {
  b: 1
};

// not good
++x;
y++;
z = x ? 1:2;

// good
++x;
y++;
z = x ? 1 : 2;

// not good
var a = [ 1, 2 ];

// good
var a = [1, 2];

// good
var doSomething = function(a, b, c) {
  // do something
};

// good
doSomething(item);

// not good
for (let i = 0;i < 6;i++) {
  x++;
}

// good
for (let i = 0; i < 6; i++) {
  x++;
}

空行

以下几种情况一定要有空行

  • 变量声明后(当变量声明在代码块的最后一行时,则无需空行)
  • 注释前(当注释在代码块的第一行时,则无需空行)
  • 文件最后保留一个空行
var x = 1;

// 注释前要有空行
if (x >= 1) {
  var y = x + 1;
}

换行

换行的地方,行末必须有','或者运算符;

以下几种情况不需要换行:

  • 下列关键字后:else, catch, finally
  • 代码块'{'前

以下几种情况需要换行:

  • 代码块'{'后和'}'前
  • 变量赋值后
// not good
var a = {
    b: 1
    , c: 2
};

x = y
    ? 1 : 2;

// good
var a = {
    b: 1,
    c: 2
};

x = y ? 1 : 2;

// good
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

// not good
function test()
{
    ...
}

// good
function test() {
    ...
}

// not good
var a, foo = 7, b,
    c, bar = 8;

// good
var a,
    foo = 7,
    b, c, bar = 8;

注释

单行注释

  • 注释单独一行的情况下,注释的//后面要跟一个空格
  • 注释如果和代码同一行,代码分号结束后,要跟一个空格,注释的//后也要跟一个空格

例:

// 调用函数
foo();

var maxCount = 10; // 这是一个变量

多行注释

多行注释使用下面这种形式:

/**
 * 代码注释1
 * 代码注释2
 */

多行注释建议在以下几种情况使用:

  • 难于理解的代码段
  • 可能存在错误的代码段
  • 浏览器特殊的 HACK 代码
  • 业务逻辑强相关的代码

函数注释

复杂的函数,所有类,都必须进行函数注释,函数注释使用业界统一的规范,方便后续使用 jsdoc 生成文档。

例:

/**
 * 获取任务的名称
 * @param id {Number} 传入需要获取名称的人物id
 * @return {String} 返回的姓名
 * @author shi 2015/07/21 可以不写
 * @version 1.1.0 可以不写
 * @example 示例代码,可以不写
 */
function getTaskName(id) {
  let name = "test";
  return name;
}

引号

最外层统一使用单引号,除非字符串嵌套的情况。

// not good
var x = "test";

// good
var y = 'foo',
  z = '<div id="test"></div>';

对象,数组

  • 对象属性名不需要加引号,如对象属性名是中划线命名的需要加引号(eslint 的 rules)

  • 对象以缩进的形式书写,不要写在一行(单个属性可以写一行,es6 导入方法时可以使用单行);

  • 数组、对象最后不要有逗号。

// good
var a = {
  b: 1,
  c: 2
};

括号

下列关键字后必须有大括号(即使代码块的内容只有一行):if, else, for, while, do, switch, try, catch, finally, with

// not good
if (condition) doSomething();

// good
if (condition) {
  doSomething();
}

undefined

永远不要直接使用 undefined 进行变量判断;

使用 typeof 和字符串'undefined'对变量进行判断。

// not good
if (person === undefined) {
    ...
}

// good
if (typeof person === 'undefined') {
    ...
}

不允许存在多层嵌套的条件判断和循环(最多三层)

条件判断能使用三目运算符和逻辑运算符解决的,就不要使用条件判断,但是谨记不要写太长的三目运算符。

例:

// bad
if (x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

// good
return x === 10 ? 'valid' : 'invalid';

// bad
if (!x) {
  if (!y) {
    x = 1;
  } else {
    x = y;
  }
}

// good
x = x || y || 1;

简单解释一下逻辑运算符,逻辑运算符主要有两种,一个是 || 逻辑或,一个是 && 逻辑与。

  • 逻辑或 ||:当前一个为真时,返回前一个值,前一个为假时返回后一个值。
var x = 1;
console.log(x || 2); // 1

var y = 0;
console.log(y || 2); // 2
  • 逻辑与 &&:当前一个为真时,返回后一个值,前一个为假时返回前一个值。
var x = 1;
console.log(x && 2); // 2

var y = 0;
console.log(y && 2); // 0

其他 ESlint

  • for-in 里一定要有 hasOwnProperty 的判断;
  • 不要在内置对象的原型上添加方法,如 Array, Date;
  • 变量不要先使用后声明;
  • 不要在一句代码中单单使用构造函数,记得将其赋值给某个变量;
  • 不要在同个作用域下声明同名变量;
  • 不要在一些不需要的地方加括号,例:delete(a.b);
  • 不要使用未声明的变量;
  • debugger 不要出现在提交的代码里;
  • 数组中不要存在空元素;
  • 不要在循环内部声明函数;
  • 不要直接 new 使用构造函数(new Vue() 除外);
  • 不要声明了变量却不使用;

这些都可以参考 eslint-config-alloy,有详细的 JS、TS、React、Vue 的规范,我们后续配置 eslint 时也是引入腾讯的 eslint 规范。

// good
for (key in obj) {
  if (obj.hasOwnProperty(key)) {
    // be sure that obj[key] belongs to the object and was not inherited
    console.log(obj[key]);
  }
}

// not good
Array.prototype.count = function(value) {
  return 4;
};

// not good
function test() {
  console.log(x);

  var x = 1;
}

// not good
new Person();

// good
var person = new Person();

// not good
delete obj.attr;

// good
delete obj.attr;

// not good
var a = [1, , , 2, 3];

// not good
var nums = [];

// not good
for (var i = 0; i < 10; i++) {
  (function(i) {
    nums[i] = function(j) {
      return i + j;
    };
  })(i);
}

其他

  • 换行符统一用'LF';
  • 对上下文 this 的引用只能使用'_this', 'that', 'self'其中一个来命名;
  • 行尾不要有空白字符;
  • 不允许有空的代码块(如果实在需要,可以在代码块中写注释)。
// not good
function Person() {
  // not good
  var me = this;

  // good
  var _this = this;

  // good
  var that = this;

  // good
  var self = this;
}

if (condition) {
}

CSS 规范

缩进

使用 tab 缩进(2 个空格)

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

分号

每个声明结束都要加分号

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

注释

注释统一使用 /* */

.element {
  /* border-radius: 10px; */
  width: 50px;
  height: 50px;
}

引号

  • url 的内容要用引号
  • 属性选择器中的属性值需要引号
.element:after {
  content: "";
  background-image: url("logo.png");
}

li[data-type="single"] {
  ...;
}

命名

  • 类名使用小写字母,以中划线分隔
  • id 采用驼峰式命名
  • less,scss 中的变量、函数、混合、placeholder 采用驼峰式命名
/* class */
.element-content {
  ...;
}

/* id */
#myDialog {
  ...;
}

/* 变量 */
$colorBlack: #000;

/* 混合 */
/* scss */
@mixin centerBlock {
  ...;
}
.centerBlock {
  ...,
}

Eslint 配置文件

开发工具: Visual Studio Code 版本>V1.55

配置范围:所有vue项目组

插件:EsLint(强制)、vetur、Auto Close Tag(推荐)、Auto Rename Tag(推荐)、Path Intellisense(推荐)、HTML CSS Support(推荐)、 Vue Vscode Snippets(推荐) Vue VSCode Snippets

.eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module"
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ["eslint-config-alloy/vue", "prettier"],

  // 可以添加自己的规则,可以参考 eslint-config-vue
  // https://github.com/vuejs/eslint-config-vue
  rules: {
    "vue/mustache-interpolation-spacing": ["error", "always"],
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    // vue 中 script 的空格
    "vue/script-indent": [
      "error",
      2,
      {
        baseIndent: 0,
        switchCase: 0,
        ignores: []
      }
    ],
    // vue 中 template 的空格
    "vue/html-indent": [
      "error",
      2,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: []
      }
    ],
    // 缩进使用 tab
    indent: [
      2,
      2,
      {
        SwitchCase: 1,
        VariableDeclarator: 1
      }
    ],
    // 可以直接只用 new Vue()
    "no-new": 0,
    // 线上禁用debugger
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
    // parseInt 可以不传第二个参数
    radix: 0
  }
};

.editorconfig

# 编辑器配置
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

vscode项目配置Setting.json

{
  // 保存时 prettier 自动格式化
  "editor.formatOnSave": false,
  // 保存时自动启用 eslint --fix 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

注意:将编辑器自动格式化关闭 用户配置不要与工作区配置冲突

建议将setting.json提交到项目仓库中去,保证每个开发配置一致

全部格式化处理

"lint": "vue-cli-service lint"

npm run lint 配置完成 重启vscode

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,125评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,293评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,054评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,077评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,096评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,062评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,988评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,817评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,266评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,486评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,646评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,375评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,974评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,621评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,642评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,538评论 2 352

推荐阅读更多精彩内容

  • <font face="微软雅黑">前端编码规范</font> <font face="微软雅黑">前端代码风格<...
    傲慢与偏见_dfc1阅读 273评论 0 0
  • 最佳原则 坚持制定好的代码规范。无论团队人数多少,代码应该同出一门。如果你想要为这个规范做贡献或觉得有不合理的地方...
    Tiny_ae3d阅读 1,630评论 0 1
  • 前言 不以规矩,不能成方圆。 本人有幸经历了团队从缺乏标准到逐渐规范的一个过程,在此当做记录供大家参考。 本文从为...
    硅谷干货阅读 2,490评论 0 25
  • Vue 开发规范目录及说明 本文档为前端 vue 开发规范 规范目的 命名规范 结构化规范 注释规范 编码规范 C...
    一笑奈何_3bea阅读 133评论 0 0
  • 1 前言 HTML 作为描述网页结构的超文本标记语言,一直有着广泛的应用。本文档的目标是使 HTML 代码风格保持...
    山豆山豆阅读 1,183评论 2 6