在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范。很多语言都提供了Lint工具来实现这样的功能,JavaScript也有类似的工具:ESLint。除了可以集成到构建工具中(如:Gulp)在构建过程中检查代码风格以外;还可以通过将ESLint和代码编辑器相结合以提供代码风格的实时校验。这里将介绍如何在Visual Studio Code使用ESLint来提供代码风格的实时校验。
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [// 使用"extends": "eslint:recommended"来启用推荐的规则,报告一些常见的问题
"eslint:recommended", // 继承了eslint的一些默认配置规则
"plugin:vue/recommended" // eslint是用来检测js和jsx,并不具备检测.vue文件的能力,所以需要装上以上的扩展插件实现对.vue文件的检测。
],
"parserOptions": {
// "parser": "babel-eslint",
// "ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"vue": true,
"css": true
}
},
"plugins": [
"vue"
],
"globals": {
uni: true, //假设项目是采用uni-app开发的,在页面中使用uni eslint会报警告。在这里设置之后就不会了
wx: true //同上
},
"rules": {
// Stylistic Issues
// ---------------这些规则是关于风格指南的,而且是非常主观的:--------------
"no-const-assign": 2,
"indent": [2, 2, { // 缩进2个空格
"SwitchCase": 1 // 强制 switch 语句中的 case 子句的缩进级别
}],
"quotes": [2, "double"], // 字符串使用双引号
"array-bracket-spacing": [2, "never"], // 该规则强制数组括号内的空格的一致性。
"block-spacing": [2, "always"], // 该规则强制在左花括号和同一行上的下一个 token 之间有一致的空格。该规则同样强制右花括号和在同一行的前一个 token 之间有一致的空格。
"camelcase": [2, { // 变量驼峰写法
"properties": "always"
}],
"comma-dangle": [2, "never"], // 禁止尾部出现逗号,主要场景在于对象
"comma-spacing": [2, {
"before": false,
"after": true
}], // 该规则强制在变量声明、数组字面量、对象字面量、函数参数 和 序列中的逗号左右的空格的一致性。
"computed-property-spacing": [2, "never"], // 禁止在计算属性内使用空格
"eol-last": 2, // 要求或禁止文件末尾存在空行
"func-call-spacing": [2, "never"], // 要求或禁止在函数标识符和其调用之间有空格
"function-paren-newline": [2, "never"], // 统一函数里面的代码换行
"key-spacing": [2, { // 禁止在对象字面量的键和冒号之间存在空格,要求在对象字面量的键和冒号之间存在至少有一个空格
"beforeColon": false,
"afterColon": true
}],
"new-parens": 2, // 要求调用无参构造函数时带括号
"no-lonely-if": 2, // 禁止 if 语句作为唯一语句出现在 else 语句块中
"no-mixed-spaces-and-tabs": 2, // 禁止使用 空格 和 tab 混合缩进
"no-multiple-empty-lines": [2, { // 不允许多个空行
"max": 1
// "max" (默认为 2) 强制最大连续空行数。
// "maxEOF" 强制文件末尾的最大连续空行数。
// "maxBOF" 强制文件开始的最大连续空行数
}],
"no-trailing-spaces": 2, // 禁用行尾空格
"no-whitespace-before-property": 2, // 禁止属性前有空
"nonblock-statement-body-position": [2, "beside"], // 禁止单行语句之前有换行。
"object-curly-newline": [2, "always"], // 要求花括号内有换行符
"object-curly-spacing": [2, "always", { // 强制在花括号中使用一致的空格
objectsInObjects: false
}],
"object-property-newline": 2, // 强制将对象的属性放在不同的行上
"one-var": [2, { // 强制函数中的变量在一起声明或分开声明
"initialized": "never"
}],
"operator-linebreak": [2, "after", { // 强制操作符使用一致的换行符风格
"overrides": {
"?": "before",
":": "before"
}
}],
"padded-blocks": [2, "never"], // 要求或禁止块内填充
"semi": [2, "never"], // 尾部禁止分号
"space-before-blocks": [2, "always"], // 强制在块之前使用一致的空格
"space-before-function-paren": [2, "never"], // 强制在 function的左括号之前使用一致的空格
"space-in-parens": [2, "never"], // 强制在圆括号内使用一致的空格
"space-infix-ops": 2, // 要求操作符周围有空格
"space-unary-ops": [2, { // 强制在一元操作符前后使用一致的空格
"words": true,
"nonwords": false
}],
"spaced-comment": [2, "always", { // 要求在注释前有空白
"markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","]
}],
// -----------这些规则是关于Node.js 或 在浏览器中使用CommonJS 的:---------------
"handle-callback-err": [2, "^(err|error)$"], // 强制回调错误处理
"no-new-require": 2, // 禁止调用 require 时使用 new 操作符
"no-path-concat": 2, // 禁止对 __dirname 和 __filename 进行字符串连接
// -------------这些规则与变量声明有关:---------------------
"init-declarations": [2, "always"], // 强制变量声明语句中初始化
"no-delete-var": 2, // 禁止删除变量 var x; delete x;
"no-label-var": 2, // 禁用与变量同名的标签
"no-shadow-restricted-names": 2, // 禁止将标识符定义为受限的名字
"no-undef": 2, // 禁用未声明的变量,除非它们在 /*global */ 注释中被提到
"no-undef-init": 2, // 禁止将变量初始化为 undefined
"no-unused-vars": [2, { // 禁止未使用过的变量
"vars": "all",
"args": "all"
}],
"no-use-before-define": 2 // 禁止在变量定义之前使用它们
}
}