eslint使用姿势(优雅的代码规范)

作为一种可以规范化我们代码的工具,eslint在越来越多的场景下开始被使用,它可帮助我们迅速定位代码格式bug

        gulp-eslint
        sublime-eslint

是我经常接触到的eslint形式~,接下来先来介绍下sublime-eslint的正确使用姿势

    * 利用package-control安装SublimeLinter和SublimeLinter-contrib-eslint
    (只能用package-control的方式,这两个package并未在github上开源,
    github上的sublime-eslint未找到正确的使用姿势)
    * 然后全局安装eslint(npm install -g eslint),一定要全局安装,
    否则后期eslint --fix会无法正确执行,同时全局安装eslint-plugin-react(可          选择,react项目中需要使用)
    接着你可以在你需要检查格式的文件夹的根目录下加入文件.eslintrc.json(有js,xml和json三种格式可供选择),
    具体配置项可参考eslint官网,当然,你也可以执行`eslint --init`命令,然后按照它的指示一步步生成相关的.eslintrc.json文件~
    然后你便可以在命令行中执行eslint *.js来检查当前目录下的全部js文件的格式问题,当然,
    如果你格式不规范的话,控制台的提示错误你可能很久才能看完(所以你选择了忽略。。。)
    你也可以使用eslint --fix *.js来修正当前目录下的全部js文件的部分格式问题  
    (部分格式是eslint官网的rules中在前面有扳手标记的规则),像tab和space混用的这些格式问题fix命令没办法修正~~
    说好的要在sublime中使用eslint呢。。。此时,你只需要重启sublime,你就可以看到你的代码前面有了一些小红点,
    这个就是sublime-eslint发挥作用了,这些小红点就是你的代码不符合规范的地方~~
    你也可以通过disable eslint关闭规则校验,不过建议逐渐养成通过eslint来校验代码的习惯,这样你的代码才会更加优雅~

gulp-eslint的使用姿势较简单,网上有很多教程都描写很详细,大家如果有在项目中使用到gulp,便可以通过gulp-eslint来规范我们的代码啦~

你可能感兴趣的:(web前端,代码规范)