You’ve already seen how to customize your rules to suit your business needs, but if you forget, click on the link at the end of this article. This article is about how to implement auto fix.

A custom ESLint rule is an imperfect rule without automatic repair. How to design auto Fix needs to be analyzed according to their respective business types, but the final principle is the same, ast(Abstract Syntax tree). No matter what rules, they should be analyzed here and repaired by using the fix function provided by ESLint.

Definition of auto fix

Website description

If you submit a core rule to the ESLint library, you must follow the following conventions. Specific can see connections: eslint.bootcss.com/docs/develo…

"use strict" module.exports = { meta: { type: "suggestion", docs: { description: "disallow unnecessary semicolons", category: "Possible Errors", recommended: true, url: "Https://eslint.org/docs/rules/no-extra-semi"}, fixable, "code", / / this parameter will follow-up analysis to the schema: [] / / no options}, create: function(context) { return { // callback functions }; }};Copy the code

Analysis of auto fix

If you need a plug-in auto fix, you need to understand a few concepts: what context is, what property methods are on it, and so on. Fix and Fixable association.

context

There are a lot of methods exposed in context, and you can see the link on the website.

The code used in the last share to report problems using context.report(Descriptor), the check part of the ESLint rule, with the following parameter descriptor

Context. report({node: node, message: "Unexpected identifier" // warning when code does not comply with the rule});Copy the code

Fix method and metadata property fixable

To support auto fix in your plug-in, you must have two elements: the fixable attribute in the meta, and the fix function that context.report() passes in to the object

Fixable (Metadata attributes)

For this parameter, it is mentioned on the official website that the value must be defined according to the following specification.

Fixable: "code", // This parameter will be analyzed laterCopy the code

Linter.js runRules function for fixable arguments

// If (problem. Fix && rule. Meta &&! rule.meta.fixable) { throw new Error("Fixable rules should export a `meta.fixable` property."); } lintingProblems.push(problem);Copy the code

In the source code, fixable does not have to be a specific value, as long as it has a value, it will be fixed

Personal opinion on this parameter: Probably because for easy comprehension, like semantization, the document specifies certain values that can express specific meanings. For example, ‘code’ is used to repair code, and ‘whiteSpace’ is used to repair whiteSpace characters.

Fix the function

The fix function is an attribute on the description parameter passed in by context.report(), which the user provides if they need fix. The key to this function is its outgoing arguments.

context.report({
  message: "xxx",
  node,
  fix(fixer) {
    // TODO
  }
})
Copy the code

Parameter Fixer has a lot of methods mounted on it, replacing node information, getting tonken, and so on. You can refer to website: https://eslint.bootcss.com/docs/developer-guide/working-with-rules#applying-fixes

Analyze the AST in the FIX to obtain the corresponding information

At this point, auto Fix is more than halfway done, and the next step is to see how to analyze the AST if you get what you want.

When it comes to AST, students should be familiar with it. Abstract syntax trees are very common in low-level programming, such as compilers, Webpack compiler, and Bable. Ast is used to analyze the code, and those who are interested in ast can understand their similarities and differences by themselves.

Analysis the ast

Create (context) {const sourceCode = context.getSourcecode () return {CallExpression(node) {// Intercepts the ast node for function calls const code = sourcecode.gettext (node) // Get original diamante}}Copy the code

After the above code, if anyone is wondering what this is, this involves the ast traversal. CallExpression is the type in an AST node, that is, the type. When traversing the AST, if the user has transmitted the corresponding node type function, it will execute the corresponding function internally, providing the user with an interface to access the corresponding resources.

There are many other node types similar to CallExpression, such as MemberExpression, etc. If you are interested, you can learn more about it by yourself.

conclusion

From the above content, you probably already know how a plug-in auto fix, also wait for you to look at a small part of esLint source code, if interested in the source code can be extended, for writing plug-ins or understand the entire ESLint is a great help.

For the above sharing, sorting and code word is not easy, if you like a small partner can click 👍 ha.

Eslint rule definition