Babel-plugin-pretty -console is a plugin that makes console easier to use and manage. A version of babel-plugin-pretty-console was implemented using webPack plugins a long time ago. However, the code written at that time was really vulgar (I feel that I have improved a little bit), and the implementation function was basically achieved by code stacking token parsing;

With the help of Babel’s AST parsing function, I recently wrote a plug-in for console.log that you don’t want to write or delete. The core code is no more than 50 lines.

What is the

Is a console statement proxy tool, normal console output

function add(a, b) {
    console.log('a', a)
    console.log('b', b)
    return a + b;
}
Copy the code

After using the plug-in

/ / #
function add(a, b) {
    return a + b;
}

/** ** is equivalent to */
function add(a, b) {
    console.log('add:a', a)
    console.log('add:b', b)
    return a + b;
}
Copy the code

By adding a special identifier # to your function comments, the plugin will automatically convert you to console, if your function is already commented

// # this is an addition function
function add(a, b) {
    return a + b;
}

/** ** is equivalent to */
function add(a, b) {
    console.log('This is an addition function :a'., a)
    console.log('This is an addition function :b'., b)
    return a + b;
}
Copy the code

If you don’t want to use console.log, you can add the methods contained in console after the identifier to switch, for example

// #warn this is an addition function
function add(a, b) {
    return a + b;
}

/** ** is equivalent to */
function add(a, b) {
    console.warn('This is an addition function :a'., a)
    console.warn('This is an addition function :b'., b)
    return a + b;
}
Copy the code

Hook syntax is currently available

Using the method above, very simple, the plug-in can currently Hook most function declarations, function assignments, variable declarations, variable assignments

/ / #
let a = 1
/ / is equivalent to
let a = 1
console.log('a', a)

// The same goes for variable assignments
/ / #
a = add(1.2)
/ / is equivalent to
a = add(1.2)
console.log('a', a)

Note that if the variable points to a declaration of an arrow function, it is resolved as a function by default, as in
/ / #
a = (p1, p2) = > p1 + p2
/ / is equivalent to
a = (p1, p2) = > {
    console.log('a:p1', p1)
    console.log('a:p2', p2)
    return p1 + p2
}
Copy the code

Of course, you can Hook functions as well

// # The function to say hi
function sayHi(name) {
    return `Hi! ${name}`
}

/ / is equivalent to
function sayHi(name) {
    console.log('The function to say hi:name', name)
    return `Hi! ${name}`
}
Copy the code

You can use it on almost any form, 🌰, to provide some common notation

let obj = {
    // #warn
    add1: (a, b) = > {
        return a + b
    },
    // #error
    add2(a, b) {
        return a + b
    }
}

class Preson {
    // # get height
    getHeight: (offset = 5) = > {
        return 175 + offset
    }

    / / #
    sayName(name) {
        return `My name is ${name}`}}/ / #
export default function add(p1, p2) {
    return a + b;
}

// #log ZHUANGBI
export const name = genName(name) {
    return 'Aisin Gioro${name}`
}
Copy the code

You can also use it in Typescipt files

/ / #
function add(a: number, b:number) :number {
    return a + b
}
Copy the code

Or simply Vue declares periodic output

<template>
    <div></div>
</template>

<script>
export default {
    / / #
    created() {}
    / / #
    mounted() {}
    / / #
    updated(){}}</script>
Copy the code

If you need to use it in promises or other callback functions, you need to

getUserInfo().then(res= > { // # user info
    // do some 
})

// This format is usually formatted by ESLint or Prettier, so try this

getUserInfo().then((res/* # user info */) = > {
    // do some 
})
Copy the code

Install the

npm install babel-plugin-pretty-console
Copy the code

Use this in your.babelrc file

{
    plugins: ['pretty-console']
}
Copy the code

You can also teach me how to do things by personalizing them, like

{
    plugins: [
        ['pretty-console', {
            token: '$', // Replace the default # symbol
            open: true.// Whether to enable this plug-in can be implemented in the production environment according to process.env
            printFileName: false // Print the current file name, the default is to print the full path, has not been optimized, do not want to optimize, feel useless}}]]Copy the code

conclusion

As above, is the main function of this plug-in, use some cool, but also can be installed force, is also the author of daily enjoy some small gadgets, feel interesting, might as well point a praise shaoxia.

Making: github.com/TaroXin/bab…