乐趣区

配置eslint规范项目代码风格

为什么要使用 eslint
你在接手一个项目的维护迭代任务,阅读代码的时候是否会因为项目中充斥着各种风格的代码而感到头疼?没错,eslint 就是为了解决这类问题
eslint 能做什么?
1. 代码风格错误提示
配置好 eslint 后,如果代码风格与配置描述的不符,eslint 会提示代码中存在的风格问题;一般提示的情形有:1. 编辑器内,大多数编辑器配置好后能读取 eslint 配置文件并在文件中进行相应提示 2.eslint-loader 配合 webpack-dev-server 能在页面中弹出相应错误内容 3.eslint 通过命令号对代码进行风格检查
2. 修复相应风格问题
eslint –fix 命令能修复一部分代码风格问题;能修复的范围见 https://cn.eslint.org/docs/ru…
常见问题
如何在局部禁用 eslint
/* eslint-disable no-alert, no-console */

alert(‘foo’);
console.log(‘bar’);

/* eslint-enable no-alert, no-console */

以下是详细配置
{
root: true,// 直接在根目录读取配置文件,能提高 eslint 性能
“env”: {
“node”: true,// 允许使用 nodejs 相关的变量,下同
“es6”: true,
“browser”: true,
“commonjs”: true
},
“extends”: “standard”, // 继承 eslint-config-standard 中的配置,可以在 rules 中覆盖
“parser”: “babel-eslint”, // 为 eslint 制定 parser, 默认的 Esprima 只允许已纳入 es 标准的内容
“plugins”: “vue”,// 使用 eslint-plugin-vue,使 eslint 能对 vue 语法进行处理,相应 rules 见 https://eslint.vuejs.org/rules/
“rules”: {
“no-alert”: 2,
“indent”: [“error”, 4, {
“SwitchCase”: 1,
“VariableDeclarator”: 1,
“outerIIFEBody”: 1,
“MemberExpression”: 1,
“FunctionDeclaration”: {“parameters”: 1, “body”: 1},
“FunctionExpression”: {“parameters”: 1, “body”: 1},
“CallExpression”: {“arguments”: 1},
“ArrayExpression”: 1,
“ObjectExpression”: 1,
“ImportDeclaration”: 1,
“flatTernaryExpressions”: false,
“ignoreComments”: false
}]
}
}

退出移动版