前端开发规范

47 阅读17分钟

一、结构化规范

(一)目录文件夹及文件规范

  • 以下统一管理处均对应相应模块
  • 以下全局文件文件均以 index.js 导出,并在 main.js 中导入
  • 以下临时文件,在使用后,接口已经有了,发版后清除
src                                  源码目录
    |-- api                           接口,统一管理
    |-- assets                        静态资源,统一管理
    |-- components                    公共组件
    |-- filters                       过滤器,全局工具
    |-- icons                         图标
    |-- datas                         模拟数据,临时存放
    |-- lib                           外部引用的插件存放及文件修改
    |-- mock                          模拟接口,临时存放
    |-- router                        路由
    |-- store                         vuex
    |-- views/pages                   视图目录
        |-- home                       视图模块名
            |-- home.vue               模块入口文件
            |-- components             模块通用组件文件夹
    |-- constants.js                  全局常量存放
README.md                            项目说明

二、注释规范

代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明

(一)务必添加注释列表

  • 公共组件使用说明
  • 各组件中重要函数或者类说明
  • 复杂的业务逻辑处理说明
  • 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
  • 多重 if 判断语句
  • 注释块必须以/**(至少两个星号)开头**/
  • 单行注释使用//

(二)单行注释

注释单独一行,不要在代码后的同一行内加注释。例如:

bad
let name = "abc" // 姓名

good
// 姓名
let name = "abc"

(三)多行注释

/**
* 组件名称
* @module 组件存放位置
* @desc 组件描述
* @author 组件作者
* @date 2017年12月05日17:22:43
* @param (Object] [title]-参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
* <hbTable :title="title" :columns="columns" :tableData="tableData"x</hbTable>
**/

三、命名规范

(一)项目命名

全部采用小写方式,以中划线分隔。

bad
mallManagementSystem

good
mall-managements-system

(二)目录命名

全部采用小写方式, 以中划线分隔,有复数结构时,要采用复数命名法, 缩写不用复数

bad
script/style/demo_scripts/demoStyles/imgs/docs

good
scripts/styles/components/images/utils/layouts/demo-styles/demo-scripts/img/doc

(三)组件命名

参考:vue风格指南

(四)变量命名

一般变量使用驼峰命名:

let userName = "用户名称"

对于常量,使用大写字母和下划线组合命名

const USER_TYPE = 1

一)根据变量类型来命名

1.普通变量/属性

经量用简单易懂的 名词 结尾,前面可以加 形容词/名词 来修饰

let person = {
    name: 'Sam'
    }
let student = {
    grade: 3,
    class: 2
}
let juniorSchoolStudent = {}

2.布尔变量/属性

一般用 形容词be动词 、情态动词has 开头

let person = {
    alive: false, // 如果是形容词,前面就没必要加is,比如isAlive就显得冗余
    canSpeak: true, //情态动词有can、should、will、need等,情态动词后面接动词
    isVip: true, // be动词有is、was等,后面一般接名词
    hasChildren: true, // has加名词
}

控制元素的显示隐藏、是否加载的时候,可以用 showhideload 开头

let dialog = {
    showTitle: true, // 又例如vue框架中,v-show="showTitle"
    hideHeader: false, // 又例如angular框架中,ng-hide="hideHeader"
    loadFooter: true, // 又例如vue框架中,v-if="loadFooter"
}

3.普通函数/方法

一般用 动词 开头。如果是及物动词后面可以加名词,组成 动宾结构

let person = {
    run(){}, // 不及物动词
    drinkWater(){}, // 及物动词
    eat(foo){}, // 及物动词加参数(参数是名词)
}

名称也可以体现参数:

document.getElementById('domId')
function findArticleByName(articleName) {}

4.回调、钩子函数

用 介词 开头,或用 动词的现在完成时态

let component = {
    beforeCreate(){},
    created(){},
    beforeMount(){},
    mounted(){},
    beforeUpdate(){},
    updated(){},
    activated(){},
    deactivated(){},
    beforeDestroy(){},
    destroyed(){}
}

5.类

类名/构造函数的名称,要采用Pascal命名法(即驼峰命名法+首字母大写)。

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

私有属性和方法的前缀加下划线_, 公共属性和方法则不用

class Person {
    // 私有属性 
    _name;
    // 公共方法
    getName() {
        return this._name;
    }
    // 公共方法
    setName(name) {
        this._name = name;
    }
}

二)注意一致性

1.介词一致性

例如在上述钩子函数的命名规范中,

  • 如果你使用了 before + after,那么就在代码的所有地方都坚持使用;
  • 如果你使用了 before + 完成时,那么就坚持使用;
  • 如果你改来改去,就 不一致 了,不一致将导致 不可预测

再例如使用了 onButtonClick,就不要在其他地方使用 handleButtonClick。

2.顺序一致性

比如同时命名了两个变量: updateContainerWidth 和 updateHeightOfContainer ,

这个顺序就令人很别扭,同样会引发 不可预测

3.表里一致性

函数名应尽可能完美体现函数的功能,既不能多也不能少。比如:

function getSongs(){
    return $.get('/songs).then((response){
        div.innerText = response.songs
    })
}

就违背了表里一致性,getSongs 表示获取歌曲,并没有暗示这个函数会更新页面,但是实际上函数更新了 div,这就是表里不一,正确的写法是

要么纠正函数名

function getSongsAndUpdateDiv(){
    return $.get('/songs).then((response){
        div.innerText = response.songs
    })
}

要么写成两个函数

function getSongs(){
    return $.get('/songs)
}
function updateDiv(songs){
    div.innerText = response.songs
}
getSongs().then((response)=>{
    updateDiv(response.songs)
})

4.时间一致性

有可能随着代码的变迁,一个变量的含义已经不同于它一开始的含义了,这时就需要及时改掉这个变量的名字。
这一条是最难做到的,因为写代码容易,改代码难。如果这个代码组织得不好,很可能会出现牵一发而动全身的情况(如全局变量就很难改)。
所以最好的做法,就是一开始就做好规划、并且按照规范来组织代码。

三)其他注意事项

1.避免使用不常用的缩写

除了一些常用的所有程序员都知道的缩写(例如 num、html),建议不要使用缩写。

比如

  • password 不要缩写为 psw,
  • table 不要缩写为 tb、tbl
  • current 不要缩写为 cur

更不要使用拼音首字母缩写。

比如

  • 万元户 不要缩写为 wyh
  • 中资公司 不要缩写为 zzgs

这些缩写其实没少几个字符,却让看代码的人增加了很多理解的负担

2.避免使用容易混淆的字母和数字

比如

  • 同时用 l 和 1: level1
  • 同时用 O 和 0: 0Option

避免变量命名过于抽象

let flag = false; // 可以改成更有实际含义的 isValid、 hasPermission
let obj = {}; // 可以改成更有实际含义的 currentTask、 newItem

四、编码规范

使用 ES6 风格编码

  • 定义变量使用 let , 定义常量使用 const
  • 静态字符串一律使用单引号或反引号,动态字符串使用反引号
// bad
const a = 'foobar'
const b = 'boo' + a + 'bar'

// acceptable
const c = `foobar`

// good
const a = 'foobar'
const b = `foo${a}bar`
const c = 'foobar'
  • 解构赋值

数组成员对变量赋值时,优先使用解构赋值

// 数组结构复制
const arr = [1, 2, 3, 4]

// bad
const first = arr[0]
const second = arr[1]

// good
const [first, second] = arr

使用扩展运算符(...)拷贝数组

const items = [1, 2, 3, 4]

// bad
const itemsCopy = items

//good
const itemsCopy = [...items]

函数的参数如果是对象的成员,优先使用解构赋值

// 对象解构赋值
// bad
function getFullName(user) {
    const firstName = user.firstName
    const lastName = user.last
}

// good
function getFullName(user) {
    const { firstName, lastName } = user
}

// best
function getFullName ({ firstName, lastName}) {}
  • 箭头函数 需要使用函数表达式的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了 this
// bad
const self = this
const boundMethod = function(...params) {
    return method.apply(self,params)
}

// acceptable
const boundMethod = method.bind(this)

// good
const boundMethod = (...params) => method.apply(this,params)

五、CSS 规范

  • 使用"-"连字符,略值为 0 时的单位
// bad
.clickBtn {
    padding-bottom: 0px;
    margin: 0em;
}

// good
.click-btn {
    padding-bottom: 0;
    margin: 0;
}
  • 如果 CSS 可以做到,就不要使用 JS
  • 建议并适当缩写值,提高可读性,特殊情况除外

“建议并适当”是因为缩写总是会包含一系列的值,而有时候我们并不希望设置某一值,反而造成了麻烦,那么这时候你可以不缩写,而是分开写。 当然,在一切可以缩写的情况下,请务必缩写,它最大的好处就是节省了字节,便于维护,并使阅读更加一目了然。 ``

// bad
.box{
    border-top-style: none;
    font-family: palatino, georgia, serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0;
}

// good
.box{
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 20px 10px;
}
  • 声明顺序

    1、定位属性:position display float left top right bottom overflow clear z-index

    2、自身属性:width height padding border margin background

    3、文字样式:font-family font-size font-style font-weight font-varient color

    4、文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

目的:减少浏览器reflow(回流),提升浏览器渲染dom的性能

  • 元素选择器应该避免在 scoped 中出现,在 scoped 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的

  • 分类的命名方法 布局(grid)(.g-);

    模块(module)(.m-);

    元件(unit)(.u-);

    功能(function)(.f-);

    皮肤(skin)(.s-);

    状态(.z-)。

六、Eslint

一)hbuildx使用uniapp

  1. eslint-js的配置,打开设置->插件配置>找到eslint-js的 eslintrc.js文件,进行如下配置

module.exports = {
    'plugins': [
        'html'
    ],
    'parserOptions': {
        'ecmaVersion': 2018,
        'sourceType': 'module',
        'ecmaFeatures': { 'jsx': true },
        'allowImportExportEverywhere': false
    },
    'rules': {
        'no-alert': 0,
        'eqeqeq': ['error', 'always'], // 用强等于做判断
        'semi': ['error', 'never'], // 结尾不分号
        'no-multi-spaces': 'error',
        'indent': [2, 4], //缩进风格
        'quotes': ['error', 'single'], // 使用单引号
        'arrow-parens': ['error', 'as-needed'], // 简略箭头函数
        'object-curly-newline': ['error', { 'multiline': true }], // 在属性内部或属性之间有换行符,就要求有换行符
        'object-curly-spacing': ['error', 'always'] // 要求花括号内有空格 (除了 {})
    }
}
  1. eslint-vue的配置,打开设置->插件配置>找到eslint-js的 eslint-vue文件,进行如下配置
module.exports = {
	'extends': 'plugin:vue/base',
	'parserOptions': {
		ecmaVersion: 2018,
		sourceType: 'module'
	},
	'rules': {
		'no-alert': 0,
		'eqeqeq': ['error', 'always'], // 用强等于做判断
		'semi': ['error', 'never'], // 结尾不分号
		'no-multi-spaces': 'error',
		'quotes': ['error', 'single'], // 使用单引号
		'arrow-parens': ['error', 'as-needed'], // 简略箭头函数
		'object-curly-newline': ['error', { 'multiline': true }], // 在属性内部或属性之间有换行符,就要求有换行符
		'object-curly-spacing': ['error', 'always'], // 要求花括号内有空格 (除了 {})
		//在computed properties中禁用异步actions
		'vue/no-async-in-computed-properties': 'error',
		//不允许重复的keys
		'vue/no-dupe-keys': 'error',
		//不允许重复的attributes
		'vue/no-duplicate-attributes': 'warn',
		//在 标签下不允许解析错误
		'vue/no-parsing-error': ['error', { 'x-invalid-end-tag': false, }],
		//不允许覆盖保留关键字
		'vue/no-reserved-keys': 'error',
		//强制data必须是一个带返回值的函数
		// "vue/no-shared-component-data": "error",
		//不允许在computed properties中出现副作用。
		'vue/no-side-effects-in-computed-properties': 'error',
		//不允许key属性
		'vue/no-template-key': 'warn',
		//在 中不允许mustaches
		'vue/no-textarea-mustache': 'error',
		//不允许在v-for或者范围内的属性出现未使用的变量定义
		'vue/no-unused-vars': 'warn',
		//标签需要v-bind:is属性
		'vue/require-component-is': 'error',
		// render 函数必须有一个返回值
		'vue/require-render-return': 'error',
		//保证 v-bind:key 和 v-for 指令成对出现
		'vue/require-v-for-key': 'error',
		// 检查默认的prop值是否有效
		'vue/require-valid-default-prop': 'error',
		// 保证computed属性中有return语句
		'vue/return-in-computed-property': 'error',
		// 强制校验 template 根节点
		'vue/valid-template-root': 'error',
		// 强制校验 v-bind 指令
		'vue/valid-v-bind': 'error',
		// 强制校验 v-cloak 指令
		'vue/valid-v-cloak': 'error',
		// 强制校验 v-else-if 指令
		'vue/valid-v-else-if': 'error',
		// 强制校验 v-else 指令
		'vue/valid-v-else': 'error',
		// 强制校验 v-for 指令
		'vue/valid-v-for': 'error',
		// 强制校验 v-html 指令
		'vue/valid-v-html': 'error',
		// 强制校验 v-if 指令
		'vue/valid-v-if': 'error',
		// 强制校验 v-model 指令
		'vue/valid-v-model': 'error',
		// 强制校验 v-on 指令
		'vue/valid-v-on': 'error',
		// 强制校验 v-once 指令
		'vue/valid-v-once': 'error',
		// 强制校验 v-pre 指令
		'vue/valid-v-pre': 'error',
		// 强制校验 v-show 指令
		'vue/valid-v-show': 'error',
		// 强制校验 v-text 指令
		'vue/valid-v-text': 'error',
		'vue/comment-directive': 0
	}
}
  1. 完整的规则
  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
  • "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 0,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明(变量或函数)
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-invalid-this": 2,//禁止无效的this,只能用在构造器,类,对象字面量
"no-irregular-whitespace": 2,//不能有不规则的空格
"no-iterator": 2,//禁止使用__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
"no-mixed-requires": [0, false],//声明时不能混用声明类型
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
"linebreak-style": [0, "windows"],//换行风格
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例,new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象,比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++,--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块,使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sparse-arrays": 2,//禁止稀疏数组, [1,,2]
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格
"no-this-before-super": 0,//在调用super()之前不能使用this或super
"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
"no-undef": 1,//不能有未定义的变量
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使用undefined
"no-unexpected-multiline": 2,//避免多行表达式
"no-underscore-dangle": 1,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有无法执行的代码
"no-unused-expressions": 2,//禁止无用的表达式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
"no-use-before-define": 2,//未定义前不能使用
"no-useless-call": 2,//禁止不必要的call和apply
"no-void": 2,//禁用void操作符
"no-var": 0,//禁用var,用let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
"no-with": 2,//禁用with

"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使用getter/setter
"block-scoped-var": 0,//块语句中使用var
"brace-style": [1, "1tbs"],//大括号风格
"callback-return": 1,//避免多次调用回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号风格,换行时在行首还是行尾
"complexity": [0, 11],//循环复杂度
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-return": 0,//return 后面是否允许省略
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//非派生类不能调用super,派生类必须调用super
"curly": [2, "all"],//必须使用 if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置,换行的时候在行首还是行尾
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
"eol-last": 0,//文件以单一的换行符结束
"eqeqeq": 2,//必须使用全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数风格,规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成器函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [2, 4],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0, 4],//嵌套块深度
"max-len": [0, 80, 4],//字符串最大长度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有几个声明
"new-cap": 2,//函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 0,//变量声明后是否需要空一行
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"one-var": 0,//连续声明
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quotes": [1, "single"],//引号类型 `` "" ''
"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成器函数必须有yield
"semi": [2, "always"],//语句强制分号结尾
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后面是否要空一格
"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
"space-in-parens": [0, "never"],//小括号里面要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"keyword-spacing": 2,//return throw case后面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 0,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN,只能用isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使用合法的typeof的值
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
"yoda": [2, "never"]//禁止尤达条件

七、git提交规范

用于说明 commit 的类别,常见类别如下:

  • feat:新增功能(feature)
  • fix:修复补丁(bug)
  • docs:修订文档,如 Readme, Change Log, Contribute 等
  • refactor:代码重构,未新增任何功能和修复任何 bug
  • style: 仅调整空格、格式缩进等(不改变代码逻辑的变动)
  • perf:优化相关,改善性能和体验的修改
  • test:测试用例的增加/修改
  • chore:非 src 和 test 的修改
  • merge:合并分支或冲突等
  • revert: 回滚到上一个版本
  • build:改变构建流程,新增依赖库、工具等(例如 webpack、maven 修改)
  • ci:自动化流程配置修改

参考:

v2.cn.vuejs.org/v2/style-gu…

zhuanlan.zhihu.com/p/449421893

www.jb51.net/article/269…

blog.csdn.net/g631521612/…

blog.csdn.net/weixin_3372…