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/。

留意:ESLintECMAScript提供了有限种方式已任务: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