Introduction to eslint-plugin-lube
Tags: webdev, javascript, opensource, eslint
Published: 2023-11-04 03:57:56

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xde1guvs73uknygtbi1h.png)
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](https://www.npmjs.com/package/eslint-plugin-lube?activeTab=readme) provides the following four rules that support auto-fix features.

| Rule | Docs | Code | Test |
|---|---|---|---|
| pretty-imports | [docs](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/docs/pretty-imports.md) | [code](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/rules/pretty-imports.js) | [test](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/test/pretty-imports) |
| pretty-jsdoc-casting | [docs](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/docs/pretty-jsdoc-casting.md) | [code](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/rules/pretty-jsdoc-casting.js) | [test](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/test/pretty-jsdoc-casting) |
| pretty-sequence | [docs](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/docs/pretty-sequence.md) | [code](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/rules/pretty-sequence.js) | [test](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/test/pretty-sequence) |
| svelte-naming-convention | [docs](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/docs/svelte-naming-convention.md) | [code](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/rules/svelte-naming-convention.js) | [test](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/test/svelte-naming-convention) |

### [pretty-imports](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/docs/pretty-imports.md)
```js
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"
```

### [pretty-jsdoc-casting](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/docs/pretty-jsdoc-casting.md)
```js
var v = func(
    a
)
var v = /** @type {A} */(/** @type {B} */(/** @type {C} */(a)/**/)/**/)/**/
var v = /** @type {A} */(a)/**/()
var v = { b: /** @type {A} */(a)/**/ }
```

### [pretty-sequence](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/docs/pretty-sequence.md)
```js
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
        }
    }
}
```

### [svelte-naming-convention](https://github.com/Artxe2/lube-series/blob/master/packages/eslint-plugin-lube/docs/svelte-naming-convention.md)
```js
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'
```


## Conclusion

[eslint-plugin-lube](https://www.npmjs.com/package/eslint-plugin-lube?activeTab=readme) 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.