通过webpack 的 dev-server,可以让代码在每次修改时让EsLint去检查我们的代码,但代码不符合我们的规范时编译不通过,或者自动帮我们格式化代码为规范格式的。
需要安装:
eslint // 检查代码格式
eslint-loader // 在webpack 中配置eslint
eslint-plugin-html // 能检出啊到在 html 的 script 中代码格式
eslint-friendly-formatter // 报错时能友好的输出错误提示
安装后如何配置:
1 webpack config 配置中新增一个 'eslint-loader'
2 根目录下新建 .eslintrc.js文件 或 在 package.json 中的eslintConfig 来写 需要的配置
使用哪种ESlint:
推荐是用 Javascript Standard Style JavaScript标准规范集合,要使用这些规范时需要安装的配置
Javascript Standard Style
eslint-config-standard
eslint-plugin-promise
eslint-plugin-standard
eslint-plugin-import
eslint-plugin-node
eslint-loader值得注意的配置参数:
options.failOnWarning // 当代码不符合规范时不会编译不通过
options.failOnError
options.formatter //代码错误友好提示
options.outputReport //输入错误报告
devServer.overlay // 错误提示在浏览器可以查看
具体实现步骤:
1.安装所需依赖
-
配置eslint-loader
在 babel-loader 之前去检查js语法(这样js语法不通过时就不去执行babel-loader),所以这里要放在babel-loader之后。
-
在根目录下创建eslint规则文件 .eslintrc.js
(下面browsers 多了s 正确的为browser
)
-
安装所需依赖
安装好这些依赖后当再次启动服务器时就不符合规范的就会给出提示啦。
上面的这些步骤是手动初始化webpack时的使用eslint的步骤,很多时候在开发上我们都是用脚手脚来构建项目架构的,现在的脚手架能很方便的帮你安装上eslint。例如vue-cli 在初始化项目时会问你需不需要使用eslint,这里可以选择需要,然后选择 standard 模式的,如何开发工具是vScode 的话,可以设置报错文件时自动修正不匹配eslint格式的代码。
具体方式参考下面链接:
关于VSCode 保存时自动按 EsLint 规范格式化代码:
stack overflow: ESLint code format in Vue