前端构建工具(1)-- 代码检查 --ESlint

发布时间:2019-08-13 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了前端构建工具(1)-- 代码检查 --ESlint脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1、简介:

eslint检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具

  • ESHintJSLint 也是静态代码检查工具,但伴随着发展,他们已经无法满足需求,于是ESlint 诞生了,因次ESlint比它们功能更强大也更灵活。
  • ESLint 是用 Node.js 写的,可以通过 npm 来安装。ESLint 也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

2、作用

ESlint作为代码检查工具,其作用主要有以下几点:

  • 统一代码风格规则,如:缩进用几个空格;是否用驼峰命名法来命名变量和函数名等。
  • 减少错误, 如:相等比较必须用 ===,变量在使用前必须被声明,在条件语句中不能使用赋值语句等。
  • 提高代码质量,如:函数最多有多少条件分支;最多有几个参数,代码块最多能嵌套多少层等。
  • 其他。如: 禁用alert。这可以提高用户体验,因为 alert 框的外观不是那么好看,而且往往与网站的风格不搭,一般都会自定义 alert 框。

3、安装&配置

eslint可以用npm 安装依赖,用-g是全局安装

npm install -g eslint

初始化eslint配置,在用户文件中会生成一个eslint配置文件,即.eslintrc.js

eslint --inIT

然后可以在.eslintrc的文件进行配置:

  • env: 指定代码的运行环境,设置了代码的运行环境可以是代码检测时,不会将运行环境预定义的全局变量视为没有定义

    "env": {
           "browser": true,
           "commonjs": true,
           "es6": true
        },
    
  • parserOptions: 设置js版本的支持情况和jxs的支持情况。ecmaVersion 指定用哪个ECMAScript 的版本,默认是 3 和 5。

    "parserOptions": {
           "ecmaVersion": 6
       }
    
  • globals:额外的全局变量,将需要使用的全局变量设置为ture,在代码检测时该全局变量则不会报未定义的错误

    "globals": {
       "sap": true,
       "jquery": true,
       "_": true,
       "$": true,
       "Promise": true,
       "QUnit": true,
       "sinon": true
    },
    
  • rules: 具体检查的规则,可以使用extends: eslint recommoned采用推荐的检查规则,也可以自己对一些规则进行自定义,第一个参数是表示该规则检查出来的是 off / 0 :不检查,warn / 1 :错误 ,error /2 警告

    {
      "extends": "eslint:recommended",
      "rules": {
        "indent": ["error", 2],
        "no-mixed-spaces-and-tabs": "error"
        "camelcase": "error",
        "eqeqeq": "warn",
        "curly": "error",
        "no-undef": "error",
        "no-unused-VARs": "warn",
        "max-params": "warn"
      }
    }

4、错误修改

具体的报错信息可以参考https://eslint.org/docs/3.0.0...

脚本宝典总结

以上是脚本宝典为你收集整理的前端构建工具(1)-- 代码检查 --ESlint全部内容,希望文章能够帮你解决前端构建工具(1)-- 代码检查 --ESlint所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。