“This is the 12th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”
What you didn’t know — THE AST Abstract Syntax Tree part 2
What you didn’t know – THE AST Abstract Syntax Tree first article
What you Don’t know — THE AST Abstract Syntax Tree
Before we look at examples of AST use, let’s take a look at what each part of the AST parses represents.
Input code: var demo = 123
Below are the analytical results:
{"type": "Program", "start": 0, "end": 14, "end": 14, "body", including Spaces in the code: {"type": "VariableDeclaration", "start": 0, "end": 14, "declarations": [// The variable declaration contents {"type": "VariableDeclarator", "start": 4, // the content of the "end": 13, // the content of the "id": {"type": "Identifier", / / declare the identity of the "start" : 4, / / identity began to "end" : 7, / / logo end "name" : "foo" / / the name of the said}, "init" : {// Declare the data type as init. "type": "Literal", "start": 10, // Start of the data "end": 13, // end of the data "value": 123, // Value of the data "raw": }}], "kind": "var", "var constant "}], "sourceType": "module" // sourceType}Copy the codeIf you have looked closely at the above variable declaration expression parsing modules and what each module represents, you should already have a basic understanding of how to simply use an AST and how to run and use it.
If you’ve already read the above code, you already know how ESLint checks your code for compliance.
That’s right, parse out all the details of the code, and then check whether any part of the code conflicts with the inspection rules that you’ve chosen to specify.
If there is a conflict, the severity of the conflict is printed on the console, with a warning in yellow or an error in red
Remember the ESLint formatting code provided in the ESLint article?
ESlint — assembles JavaScript and JSX checking tools
This code works with VsCode plugins, which automatically format your code that does not comply with ESLint rules into code that complies with rules. The operation principle is to find the wrong code, parse the code through AST, and modify the wrong part of the syntax tree. The modified AST syntax trees are then merged to generate new code that conforms to the rules.
start
Automatic code modification is achieved by using AST parsing and generating functions
const demo = 123
Copy the codeChange the above code to
var demo = 234
Copy the code1, install,
npm i recast -S
Copy the codeConst recast = require('recast') Const {variableDeclaration, variableDeclarator, identifier, Literal} = recast.types.builders // parse const demo = 123 const ast = recast.parse('const demo = 123') // The location of the syntax tree data that needs to be changed // Different parsers can store objects in different locations, // Remember, Const body = ast.program.body[0]console.log(ast, 'syntax tree before parsing ') // Find the location of const, Replace the value with var // find the tag of the value and replace the content with '234' // Nest the internal functions appropriately as needed, Ast.program. body[0] = variableDeclaration('var', const var variableDeclarator(identifier('demo'), Literal (234) // change the value to '234')]) // Now the AST syntax tree is the modified syntax tree, Console. log(ast, 'parsed syntax tree ') // Revert the AST object back to readable code const newAST = recast.print(ast).code; // New generated code console.log(newAST, 'new generated code after modification ')Copy the code👇 Run the following file: 👇
End together live
Babel works very much like the example we just showed, but uses a different AST parser than ESLint.
