ECMAScript《移动Web前端高效开发实战》笔记3–代码检查义务

在品种的支付进度中,统一的代码风格对于项目标可同盟性以及可维护性来说很是主要,由此能够利用局部插件来进展代码风格的检讨。

本例中的源文件包蕴两类:Sass文件和接纳ECMAScript
6正规的JavaScript文件。在Gulp中,接纳gulp-eslint和gulp-sass-lint插件来分别展开检测。

1.代码检查任务中,选拔开源的JavaScript验证工具ESlint举办拍卖,执行义务前须求先全局安装ESLint,命令如下:

 

npm install eslint –g

2.在档次目录下执行ESlint初叶化命令,创立ESLint的布置文件,命令如下:

 

eslint –init

3.拓展ESLint项目初叶化向导,首先拔取布置格局,那里选拔“Use a popular
style guide”,如图8.6所示。

4.取舍预设方式,这里接纳“Standard”,如图8.7所示。

  ECMAScript 1ECMAScript 2

图8.6  采纳计划格局                                                    
                          图8.7 选拔预设形式

5.选项布置内容的贮存文件类型,如图8.8所示。

 ECMAScript 3

   图8.8  拔取安插内容的仓储文件类型

至此ESLint项目陈设甘休,目录中生出一个名为“.eslintrc”的文件。接下来介绍插件gulp-eslint的设置使用。首先在品种中安装插件,命令如下:

 

npm installgulp-eslint –save-dev
在gulpfile.js文件中,添加任务对JavaScript代码进行检查:
var eslint = require("gulp-eslint");                         // 引入eslint插件
gulp.task("eslint", function(){                                  // 定义代码检查任务
         gulp.src("src/**/*.js")                                       // 对src下的所有js文件执行代码检查
                   .pipe(eslint({                                           // 执行检查
                            useEslintrc:true                           // 采用.eslintrc配置文件
                   }))
                  .pipe(eslint.format())                             // 输出检查结果
                   .pipe(eslint.failAfterError)                    // 当代码检查失败时,终止gulp任务
});

上述例子不难地介绍了什么在Gulp中使用ESLint插件执行代码检查。愈多ESLint的布局项和插件使用文档请参见http://eslint.org/。

专注:ESLint提供了三种艺术终止职务:eslint.failAfterError和eslint.failOnError。前者会等到所有检查执行完才止住,而后人则在阴差阳错时即时为止。

接下去,介绍选拔gulp-sass-lint插件对Sass文件进行代码检查。首先,安装插件:

 

npm installgulp-sass-lint --save-dev
在gulpfile.js中添加任务对Sass文件进行代码检查,代码如下:
var sasslint =require("gulp-sass-lint");                //引入sasslint插件
gulp.task("sasslint", function(){                              // 定义sasslint任务
         gulp.src("theme/**/*.scss")
                   .pipe(sasslint())                                     // 采用sasslint插件,执行代码检查
                   .pipe(sasslint.format())                         // 输出检查结果
                   .pipe(sasslint.failOnError())                 // 当出错时,终止gulp任务
});

 

本小节简要地介绍了怎么着使用Gulp插件对代码举办自我批评。关于ESLint和SassLint的更为用法请参考对应文档。

  

更加多音讯关怀:

ECMAScript 4