The cause of

Vue global error management was required before, but everyone’s code style was different, so some errors could not be reported globally. So I looked at esLint’s rules, found that none could be used directly, and then wrote my own plug-in. Here is a simple esLint plugin development process.

Custom rules

Let’s say in vUE we want to replace callback writing with synchronous writing as much as possible, starting with $nextTick

Such as:

{this.$nextTick(() => {// do something})}Copy the code

We want to be

{await this.$nextTick() {await this.$nextTick()} // We need to await XXX () to catch the error. We need to await XXX () to catch the error. We need to await XXX () to catch the errorCopy the code

start

Eslint officially recommends using Yeoman with generator-ESLint (an official generator based on EsLint) to generate a development template for an ESLint plugin. Yeoman will be discussed separately later, but it’s a good thing.

Install dependencies

// Install yeoman NPM i-g yo // Install the esLint plugin template generator NPM i-g generator- ESLintCopy the code

Initialize your own ESLint plugin

The name of an esLint plugin must be in this format: eslint-plugin-(plugin name)

// Create a folder and go inside. // Initialize the esLint plugin template yo eslint:pluginCopy the code

Initialize an ESLint rule

yo eslint:rule
Copy the code

The project structure

How ESLint works

Simply put, ESLint parses code into an AST syntax tree, which we then use to implement our custom rules!

AST

AST online conversion site

Simply put, an AST is an abstract syntax tree that describes code. Code or frameworks can be written in a variety of ways, but we can manipulate our code by translating it into an AST syntax tree.

A simple example:

Development of attention

Officially create an ESLint rule document

The following figure shows the basic format of the output of esLint rules. The create function is the essence

Write await-to-next-tick rule

// Let's look at the AST syntax tree above. Here is a simple judgment, and our rule is ok. module.exports = { ... , create: function(context) { return { 'CallExpression' (node) { if ( node? .arguments? .length && // Determines whether the call to $nextTick is passed to the callback node? .callee? .object? .type === 'ThisExpression' && node? .callee? .property? .name === '$nextTick'){// report the error ctx.report({node, message: 'call the function with await'})}}}}};Copy the code

How do I debug ESLint rules

1. Modify the entry file

/** * @fileOverview Custom rules for the plugin * @author plugin */ "Use strict"; //------------------------------------------------------------------------------ // Requirements //------------------------------------------------------------------------------ var requireIndex = require("requireindex"); //------------------------------------------------------------------------------ // Plugin Definition / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the module. Exports = {/ / introduce all rules rules: RequireIndex (__dirname + "/rules"), recommed: {plugins: ['zz-rule'], rules: recommed: { 'zz-rule/await-to-next-tick': 2 } } }, }Copy the code

2. The root directory of the ESLint plugin

// NPM link in the root directory of the esLint pluginCopy the code

3. Use the ESLint plugin in the VUE2 project

// NPM link eslint-plugin-zz-rule in the root directory of the Vue2 projectCopy the code

4. Introduce our plugin

Extends: [// extends extends: "plugin-rule /recommed"], eslint extends: [// extends extends:" plugin-rule /recommed"]Copy the code

Pay attention to

I’ll use vsCode as an example (you have to install the ESLint extension first), then go to the vuE2 project, you can click on this and see the output of the ESLint plugin

If you make changes to ESLint code, be sure to re-open the VUE2 project for it to take effect

Effect of rules

Mouse touch up will have our error prompt ~!

How can we automatically fix our errors

1. Look at the official ESLint rule creation documentation

Write a repair function

/** * @fileOverview calls the function with await * @author */ "use strict"; //------------------------------------------------------------------------------ // Rule Definition //------------------------------------------------------------------------------ module.exports = { meta: { docs: {description: "call this function with await ", category: "Fill me in", recommended: false}, fixable: [// fill in your schema]}, create: function(ctx) { return { 'CallExpression' (node) { if ( node? .arguments? .length && node? .callee? .object? .type === 'ThisExpression' && node? .callee? .property? .name === '$nextTick') {// returns a SourceCode object that you can use to handle the SourceCode passed to ESLint. Const sourceCode = ctx.getSourcecode () // node.arguments is our argument in this.$nextTick(I am the argument function) //.body is the argument function body // Let content = '\n${Array. From (node.arguments[0].body.body).map(item => sourceCode.getText(item)) .join('\n')}` ctx.report({ node, message: 'call the function with await ', fix(fixer) {return [// precede the function with await fixer.inserttextBefore (node, 'await '), $nextTick(I am the argument function) fixer.remove(node.arguments[0]), // put the user code under the function fixer.inserttextafter (node, content) ] } }) } } } } };Copy the code

Effect of 3.

NPM is released

// EsLint plugin root directory NPM login NPM publishCopy the code
// NPM i-d eslint-plugin-zz-ruleCopy the code

The last note

1. Remember to modify the test file and NPM run test before each release to ensure the stability and correctness of the rules

2. The demo does not carry out rigorous testing, only to provide you with development ideas, you remember to test more when developing!

3. The demo address