An eslint plug-in for testing todo in code

Time:2021-7-23

An eslint plug-in for testing todo in code

preface

After reading my title, the students who come in should know what I’m doing

Yes, it iseslintPlug in is one of the tools used by the front-end magicians

what? You don’t know what eslint is — eating whales.jpg

  • Eslint is an open source JavaScript code checking tool
  • Can help unify the code style in the multi person cooperation project

It’s better to hear than to hearSee youLet’s take a lookplug-in uniteffect

图片

Because many other things will be inserted temporarily in the work, or some code, the interface has timeliness and needs to be offline manually

Plug in function is simply for imperfect codeMark, remind yourself to modify and improve the bug as scheduled

Students who want to try it themselveshere—Easy star

Let’s start with why we wrote this plug-in, the problems encountered in the process, and some core methods of the plug-in

background

Front end magicians often inadvertently poison the code, entrap colleagues, and even directly “explode online”

There was an online problem at that time, and that was it:

  • An effective activity portal needs to be offline to the point, and a permanent activity portal does not need to be offline
  • Due to the effectiveness of the activities, the offline time is still more than half a year

For the convenience of the diagram, the coder directly reuses the business components of the effectiveness activities, thinking that it will be changed at that time. Anyway, it will take a long time

One day half a year later, the guest account came and said why the XX entrance was missing. At that time, the colleagues who developed this page had been transferred away, and the current project team was basically later

The first reaction is whether you submitted any code last night and put it into the portalScared, and then began to look through the release records, found that there is no version, it’s strange, well how disappeared

Then the colleagues began to check the code. After a while, they found the problem, and then quickly changed it online to avoid expanding the impact

Second offer after the event

  • Leader: what tools can we use to avoid such problems
  • Vegetable chicken: ABA, ABA, a lot of words
  • Leader: that’s OK. You’ve said so much. I’ll give you a plan next week
  • Vegetable chicken:… Oh, Huo, I’m going to be wrapped up and leave

Personal thinking

Make a flag in the imperfect code or timeliness code, detect the flag through tools, and then remind all developers of this project

Developers can know the hidden danger of XX flag by opening this project

Research – possible solutions

CLI tools

After the project starts, run an NPM script

Scan the target file, and then match the flag keyword based on prompt through regular

Vs code plug in

Front end magicians basically use the vs code

After the project starts, automatically scan the target file

Through regular matching flag, and then based on prompt

This one is ready-madetodo-tree

Eslint rule

Front end projects will introduce eslint to unify the coding style of team members

As long as you write a custom rule and analyze the ast provided by eslint, you can easily get the flag of the tag

contrast

programme advantage shortcoming Learning costs
CLI tools Without limiting the language / file type, it is easy to match through regularization You need to write a separate instruction for each project, through hook or manual trigger ❤❤❤
Vs code plug in You only need to install a plug-in for the editor to prompt when it is opened Magicians may use sublime / webstorm and need to develop plug-ins repeatedly ❤❤❤❤
Eslint rule Just add a line of rule code to the configuration file of the project to prompt in real time The dependency needs to be installed, and it needs to be introduced manually for the first time ❤❤

Final choice

Write an eslint plugin based on eslint to implement custom verification rules

reason

  • Front end projects introduce eslint
  • Unlimited editor
  • Theoretically, it does not limit the detection of languages / frameworks commonly used in front-end development
  • The standardization team unifies the lint rules of all warehouses, just add them into the standardization rules
    • For the rest of the warehouses, as long as the dependency installation (yarn / NPMI) is executed, the latest rules will be introduced into the project, and users can 0 configure access

Implementation process

The following will introduce the implementation principle of the plug-in and involve the display of some code

First of all, eslint will describe the response file with ast, and provide some simple API for operation

create(context) {
    //Get AST
    const sourceCode = context.getSourceCode()
    //Get all the comment nodes
    let comments = sourceCode.getAllComments()
}

There are two types of annotation nodes

//Notes
/** 
 * Block
 **/

Filter out the comment nodes starting with flag keyword from the comment nodes

//Filter out annotation nodes containing keywords
comments = comments.filter(comment => {
    let { value, type } = comment
    //Flatten block notes
    if (type === 'Block') {
        value = value.replace(/\*|\n/g, '')
    }
    value = value.toLowerCase().trim()
    //Save the formatted string
    comment.newValue = value
    for (const flag of dFlag) {
        //Check whether a keyword starts
        if (value.startsWith(flag)) {
            //Save the flag
            comment.flag = flag
            return true
        }
    }
    return false
})

The basic format of the filtered comment is as follows

// flag ddl:time  xxxxx

Next, we can analyze itddlAnd tips

First of all, DDL is also a configurable keyword

The format of the date to be detected is as follows

format1 demo format2 demo format3 demo
yyyy-mm-dd 2020-06-01 yyyy/mm/dd 2020/06/01 yyyymmdd 20200601
2020-06-1 2020/06/1 200601
2020-6-01 2020/6/01
20-06-01 20/06/01
20-6-1 20/6/1
20-6-01 20/6/01

So a lot of judgment is made in the code

  • The code may be a bit Shi, and the spectators can give some suggestions for optimization
//Regular matching date
const rDate = [{
    reg: /((\d{4})|(\d{2}))(-((0\d)|(\d{2})|(\d{1}))){2}/,
    flag: '-' // yyyy-mm-dd|yy-mm-dd
},
{
    reg: /((\d{4})|(\d{2}))(\/((0\d)|(\d{2})|(\d{1}))){2}/,
    flag: '/'// yyyy/mm/dd|yy/mm/dd
},
{
    reg: /(\d{8})|(\d{6})/,
    flag: 'number'// yyyymmdd|yymmdd
}]
/**
 *Get DDL in todo comment, if yes, return date value and todo content
 *@ param {string} value string to be operated on
 *@ param {string []} ddlsymbol deadline identifier
 * @param {STring} todoSymbol
 * @return {Object} 
 */
function getDDLAndText(value, ddlSymbol, todoSymbol) {
    let text = value.slice(value.indexOf(ddlSymbol) + ddlSymbol.length),
        date = ''
    for (const rdate of rDate) {
        const { reg, flag } = rdate
        const res = text.match(reg)
        if (res) {
            const [dateStr] = res
            //Verify again whether the matching date is legal
            if (reg.test(dateStr)) {
                let year, month, day
                if (flag !== 'number') {
                    let ymd = dateStr.split(flag)
                    ymd = ymd.map(v => {
                        return v.length === 1 ? `0${v}` : v
                    })
                    year = ymd[0]
                    month = ymd[1]
                    day = ymd[2]
                } else {
                    const { length } = dateStr
                    day = dateStr.slice(length - 2)
                    month = dateStr.slice(length - 4, length - 2)
                    year = dateStr.slice(0, length - 4)
                }
                if (year.length === 2) {
                    year = new Date().getFullYear().toString().slice(0, 2) + year
                }
                text = text.slice(text.indexOf(dateStr) + dateStr.length)
                date = `${year}-${month}-${day}`
                //If the date is unqualified, pass it
                if (month > 12 || day > 31) {
                    date = ''
                }
                break
            }
        }
    }
    return {
        text,
        date
    }
}

In this way, we get the flagclosing dateAndcontent

Next, you just need to prompt according to the set time warning line

//DDL is not set or DDL is illegal
if (!date) {
    Errmsg ='There is no valid deadline set, set method( https://github.com/ATQQ/eslint-plugin-todo-ddl )'
} else {
    const TODODate = new Date(date).getTime()
    const interval = TODODate - Date.now()
    //If it has expired
    if (interval < 0 || interval < oneDay) {
        Errmsg = 'deadline has passed, please modify it now'
    } else {
        //Remaining days (rounded down)
        const theRestDays = ~~(interval / oneDay)
        errMsg = theRestDays <= dWarnLine ? ` There are still ${the rest days} days to go. Please revise the ':'
    }
}
if (errMsg) {
    context.report({
        node: comment,
        message: `TODO WARN: ${errMsg} --> ${text}`
    })
}

So far, the project has been completed, and the contract can be contracted online

Summary thinking

deficiencies

  1. The code can be improved
  2. The plug-in hasn’t changed a lot since it went online. I feel that it can be enhanced. I need more comments from my friends

harvest

  1. The leader’s evaluation was good. After all, at that time, the intern status was just a few days old
  2. I have also improved and have a new understanding of the working principle of eslint
  3. It also provides technical accumulation for various fancy verification rules of the team in the future

future

  1. Find time to iterate the plug-in according to the feedback to improve its playability

other

this paperYou are participating in the “Nuggets’ 2021 spring move”. Click to view itEvent details