前端人员必知必会的开发规范

文件命名规范

1、项目命名

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

2、目录命名

参照项目命名规则，有复数结构时，要采用复数命名法。
例如：components、services

3、javaScript文件命名

采用中划线,例如: account-model.js

4、CSS,less文件命名

采用中划线,例如: account-model.js

5、如果使用Vue或者React技术栈，组件Component命名

所有组件名字需要首字母大写，然后驼峰格式。
例：CalendarList.vue

HTML语法

缩进使用tab(4个空格);
嵌套的节点应该缩进;
在属性上，使用双引号，不要使用单引号;
属性名采用驼峰命名法;
不要在自动闭合标签结尾处使用斜线;
不要忽略可选的关闭标签;
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题;
代码块与代码块之间需要空一行。

css less语法

1、缩进: 使用tab(4个空格);

2、空格
以下几种情况不需要空格:

属性名后
多个规则的分隔符','前
!important '!'后
属性值中'('后和')'前
行末不要有多余的空格

以下几种情况需要空格:

属性值前
选择器'>', '+', '~'前后
'{'前
!important '!'前
@else 前后
属性值中的','后
注释'/'后和'/'前

less

/* not good */
.element {
    color :red! important;
    background-color: rgba(0,0,0,.5);
}

/* good */
.element {
    color: red !important;
    background-color: rgba(0, 0, 0, .5);
}

/* not good */
.element ,
.dialog{
    ...
}

/* good */
.element,
.dialog {

}

/* not good */
.element>.dialog{
    ...
}

/* good */
.element > .dialog{
    ...
}

/* not good */
.element{
    ...
}

/* good */
.element {
    ...
}

/* not good */
@debug: true;

header {
  background-color: (yellow)when(@debug = true);
}


/* good */
header {
  background-color: (yellow) when (@debug = true);
}

3、空行

文件最后保留一个空行
'}'后最好跟一个空行，包括scss中嵌套的规则
属性之间需要适当的空行

less

/* not good */
.element {
    ...
}
.dialog {
    color: red;
    &:after {
        ...
    }
}

/* good */
.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

4、注释

注释统一用'/* */'（scss中也不要用'//'）
缩进与下一行代码保持一致

less

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}

5、引号

最外层统一使用双引号
url的内容要用引号
属性选择器中的属性值需要引号

less

.element:after {
    content: "";
    background-image: url("logo.png");
}

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

6、命名

类名使用小写字母，以中划线分隔
id采用驼峰式命名
less中的变量、函数以中划线分隔命名

less

/* class */
.element-content {
    ...
}

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

/* 变量 */
@color-black: #000;

/* mixins */
.my-mixin() {
    color: black;
}

7、颜色

颜色16进制用小写字母

less

/* not good */
.element {
    color: #ABCDEF;
    background-color: #001122;
}

/* good */
.element {
    color: #abcdef;
    background-color: #012;
}

8、媒体查询

尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。

less

.element {
    ...
}

.element-avatar{
    ...
}

@media (min-width: 480px) {
    .element {
        ...
    }

    .element-avatar {
        ...
    }
}

JavaScript 规范

1、缩进

使用soft tab（4个空格）。

var x = 1,
    y = 1;

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

2、分号

在vue中写代码只需要换行，不需要写分号
如果下一行以'('开头，则上一行必须有分号

// 此处必须以;结尾
let x = [];
(x as any).map( it )

3、空格

以下几种情况不需要空格:

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

以下几种情况需要空格：

二元运算符前后
三元运算符'?:'前后
代码块'{'前
下列关键字前：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]

// not good
var a = ( 1+2 )*3

// good
var a = (1 + 2) * 3

// no space before '(', one space before '{', one space between 
// function parameters
var doSomething = function(a, b, c) {
    // do something
}

// no space before '('
doSomething(item)

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

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

4、空行

变量声明后（当变量声明在代码块的最后一行时，则无需空行）
注释前（当注释在代码块的第一行时，则无需空行）
代码块后（在函数调用、数组、对象中则无需空行）
文件最后保留一个空行

// need blank line after variable declaration
var x = 1

/**
 * not need blank line when variable declaration is last
 * expression in the current block
 */
if (x >= 1) {
    var y = x + 1
}

var a = 2

// need blank line before line comment
a++

function b() {
    // not need blank line when comment is first line of block
    return a
}

// need blank line after blocks
for (var i = 0; i < 2; i++) {
    if (true) {
        return false
    }

    continue
}

var obj = {
    foo: function() {
        return 1
    },

    bar: function() {
        return 2
    }
}

// not need blank line when in argument list, array, object
func(
    2,
    function() {
        a++
    },
    3
)

var foo = [
    2,
    function() {
        a++
    },
    3
]

var foo = {
    a: 2,
    b: function() {
        a++
    },
    c: 3
}

5、换行

代码块'{'后和'}'前
变量赋值后

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

x = y
    ? 1 : 2

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

x = y ? 1 : 2
x = y ?
    1 : 2

// no need line break with 'else', 'catch', 'finally'
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

6、单行注释

双斜线后，必须跟一个空格；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。

if (condition) {
    // if you made it here, then all security checks passed
    allowed()
}

var zhangsan = 'zhangsan' // one space after code

7、多行注释

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

/**
 * 关于弹框的设置
 * @param title 弹框标题
 * @param width 弹框宽度
 */
export function useDialog( 
    title: string = '标题测试', 
    width: string | number = '50%'
) {
    ...
}

8、引号

统一使用单引号

// not good
var x = "test"

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

9、变量命名

标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
'ID'在变量名中全大写
'URL'在变量名中全大写
'Android'在变量名中大写第一个字母
'iOS'在变量名中小写第一个，大写后两个字母
常量全大写，用下划线连接
构造函数，大写第一个字母
jquery对象必须以'$'开头命名

var thisIsMyName

var goodID

var reportURL

var AndroidVersion

var iOSVersion

var MAX_COUNT = 10

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

// not good
var body = $('body')

// good
var $body = $('body')

10、变量声明

一个函数作用域中所有的变量声明尽量提到函数首部，用一个let或const声明，不允许出现两个连续的let或const声明。

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

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

11、函数

无论是函数声明还是函数表达式，'('前不要空格，但'{'前一定要有空格；
函数调用括号前不需要空格；
立即执行函数外必须包一层括号；
不要给inline function命名；
参数之间用', '分隔，注意逗号后有一个空格。

// no space before '(', but one space before'{'
var doSomething = function(item) {
    // do something
}

function doSomething(item) {
    // do something
}

// not good
doSomething (item)

// good
doSomething(item)

// requires parentheses around immediately invoked function expressions
(function() {
    return 1;
})()

// not good
[1, 2].forEach(function x() {
    ...
});

// good
[1, 2].forEach(function() {
    ...
})

// not good
var a = [1, 2, function a() {
    ...
}]

// good
var a = [1, 2, function() {
    ...
}]

// use ', ' between function parameters
var doSomething = function(a, b, c) {
    // do something
}

12、数组、对象

对象属性名不需要加引号
对象以缩进的形式书写，不要写在一行
数组、对象最后不要有逗号

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

var a = { b: 1 }

var a = {
    b: 1,
    c: 2,
}

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

13、括号

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

// not good
if ( condition )
    doSomething()

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

TIP

推荐使用插件推荐： EditorConfig for VS Code 生成.editorconfig文件
开始使用：代码格式化

前端人员必知必会的开发规范 ​

文件命名规范 ​

1、项目命名 ​

2、目录命名 ​

3、javaScript文件命名 ​

4、CSS,less文件命名 ​

5、如果使用Vue或者React技术栈，组件Component命名 ​

HTML语法 ​

css less语法 ​

JavaScript 规范 ​

前端人员必知必会的开发规范

文件命名规范

1、项目命名

2、目录命名

3、javaScript文件命名

4、CSS,less文件命名

5、如果使用Vue或者React技术栈，组件Component命名

HTML语法

css less语法

JavaScript 规范