Note 3 of mobile Web Front-end efficient development practices-code check task,

Note 3 of mobile Web Front-end efficient development practices-code check task,

During project development, the unified code style is very important for project collaboration and maintainability. Therefore, some plug-ins can be used to check the code style.

The source files in this example include Sass files and JavaScript files that use the ECMAScript 6 specification. In Gulp, The gulp-eslint and gulp-sass-lint plug-ins are used for detection respectively.

1. In the code check task, ESlint, an open source JavaScript verification tool, is used for processing. Before executing the task, install ESLint globally. The command is as follows:

 

npm install eslint –g

2. Execute the ESlint initialization command in the project directory to create the ESLint configuration file. The command is as follows:

 

eslint –init

3. Perform the ESLint project initialization wizard. First, select the configuration method. Here, select "Use a popular style guide", as shown in 8.6.

4. Select the default mode. Select "Standard" here, as shown in Figure 8.7.

Figure 8.6 select Configuration Mode figure 8.7 select preset Mode

5. Select the storage file type for the configuration content, as shown in Figure 8.8.

 

Figure 8.8 select the storage file type of the configuration content

At this point, the ESLint project configuration is complete, and a file named ". eslintrc" is generated in the directory. Next we will introduce how to install and use the plug-in gulp-eslint. First, install the plug-in the project. The command is as follows:

 

Npm installgulp-eslint-save-dev in gulpfile. in the js file, add a task to check the JavaScript code: var eslint = require ("gulp-eslint"); // introduce the eslint plug-in gulp. task ("eslint", function () {// defines the code check task gulp. src ("src /**/*. js ") // run the code check on all js files under src. pipe (eslint ({// run the check useEslintrc: true // use. eslintrc configuration file })). pipe (eslint. format () // output the check result. pipe (eslint. failAfterError) // terminate the gulp task when the code check fails });

The preceding example briefly describes how to use the ESLint plug-in Gulp to perform code check. For more ESLint configuration items and plug-ins, see http://eslint.org /.

Note: ESLint provides two methods to terminate a task: eslint. failAfterError and eslint. failOnError. The former is terminated only after all checks are executed, and the latter is terminated immediately when an error occurs.

Next, we will introduce how to use the gulp-sass-lint plug-in to check the code of the Sass file. First, install the plug-in:

 

Npm installgulp-sass-lint -- save-dev in gulpfile. add a task in js to check the code of the Sass file. The Code is as follows: var sasslint = require ("gulp-sass-lint"); // introduce the sasslint plug-in gulp. task ("sasslint", function () {// defines the sasslint task gulp. src ("theme /**/*. scss "). pipe (sasslint () // use the sasslint plug-in to run the code check. pipe (sasslint. format () // output the check result. pipe (sasslint. failOnError () // terminate the gulp task when an error occurs });

 

This section briefly describes how to use the Gulp plug-in to check the code. For more information about ESLint and SassLint usage, see the relevant documentation.

More information: