DEV Community

Cover image for Introduction to eslint-plugin-lube
Yeom suyun
Yeom suyun

Posted on

Introduction to eslint-plugin-lube

ESLint is quite a useful tool for code linting.
When used with vsce, it notifies you of coding convention violations in real time and even supports auto-fix features.
However, if you look at the GitHub star history, ESLint's indicators are relatively low compared to Prettier.
Star history
That may be because ESLint's fix features are not as good as Prettier's formatting features, which enforce coding styles.
For example, ESLint's max-len rule will warn you if a line is too long, but it does not provide an auto-fix feature to automatically insert line breaks, unlike Prettier.
To be honest, I don't know if there are any other examples.

Prettier's strictness is inconvenient

Many people use ESLint and Prettier together.
This is a good choice because the two libraries have their own roles for linters and formatters.
However, Prettier has one drawback.
In order to pass the check option after modifying a file, you must always run Prettier with the write option.
No matter how fast Prettier's performance is, this restriction is quite inconvenient for me.
Since ESLint already provides auto-fix features for most coding styles, I decided not to use Prettier and support the missing features through eslint-plugins.

Additional rules provided by the plugin

eslint-plugin-lube provides the following four rules that support auto-fix features.

Rule Docs Code Test
pretty-imports docs code test
pretty-jsdoc-casting docs code test
pretty-sequence docs code test
svelte-naming-convention docs code test

pretty-imports

export { a, b as c, d } from 'module'
export { fff, ggg, hhh, iii, jjj, kkk, lll } from 'module/2'
import {
    aaaaa_bbbbb,
    aaaaa_ccccc,
    aaaaa_ddddd
} from "module"
Enter fullscreen mode Exit fullscreen mode

pretty-jsdoc-casting

var v = func(
    a
)
var v = /** @type {A} */(/** @type {B} */(/** @type {C} */(a)/**/)/**/)/**/
var v = /** @type {A} */(a)/**/()
var v = { b: /** @type {A} */(a)/**/ }
Enter fullscreen mode Exit fullscreen mode

pretty-sequence

var value = [ a, b, c ]
var value = [
    aaaaaaaaaa,
    bbbbbbbbbb,
    cccccccccc,
    dddddddddd
]
var value = { a, b, c, d, e }
var value = {
    aaaaaaaaaa,
    bbbbbbbbbb,
    cccccccccc,
    dddddddddd
}
function func(a, b, c) {

}
function func(
    aaaaaaaaaa,
    bbbbbbbbbb,
    cccccccccc,
    dddddddddd
) {

}
var value = `${[a,b,c]}`

func(
    aaaaaaaaaa_bbbbbbbbbb_cccccccccc
)
    .a(
        aaaaaaaaaa_bbbbbbbbbb_cccccccccc
    )
    .b(
        aaaaaaaaaa_bbbbbbbbbb_cccccccccc
    )
    .c(
        aaaaaaaaaa_bbbbbbbbbb_cccccccccc
    )

var value = {
    a: [ a, b, c ],
    b: true,
    c: {
        aaaaaaaaaa: a,
        bbbbbbbbbb: b,
        c: [
            aaaaaaaaaa,
            bbbbbbbbbbb,
            ccccccccccc
        ],
        d: {
            aaaaaaaaaa,
            bbbbbbbbbbb,
            ccccccccccc
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

svelte-naming-convention

var snake_case = 'Hello'
var snake1_2_3case_4 = 'Hello'
var SNAKE_CASE = 'Hello'
var SNAKE1_2_3CASE_4 = 'Hello'
var PascalCase = 'Hello'
var P1ascal2Case345 = 'Hello'
var __ = 'Hello'
var $$ = 'Hello'
var __snake_case$$ = 'Hello'
var $$snake_case$$ = 'Hello'
Enter fullscreen mode Exit fullscreen mode

Conclusion

eslint-plugin-lube is still in version 0.4.2, and the minor version is incremented by 1 whenever a new rule is added.
All rules support auto-fix features, and they are created on the premise of not using Prettier.
If you find Prettier inconvenient, try this plugin.

Thank you.

Top comments (0)