Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kamilpula/eslint-plugin-quibble

ESLint plugin with stylistic code formatting rules that are often nitpicked in code review by quibbly developers.
https://github.com/kamilpula/eslint-plugin-quibble

eslint eslint-config eslint-plugin

Last synced: 27 days ago
JSON representation

ESLint plugin with stylistic code formatting rules that are often nitpicked in code review by quibbly developers.

Awesome Lists containing this project

README 

        
# eslint-plugin-quibble



![npm latest version](https://img.shields.io/npm/v/eslint-plugin-quibble?style=for-the-badge) ![license](https://img.shields.io/npm/l/eslint-plugin-quibble?style=for-the-badge) ![downloads](https://img.shields.io/npm/dt/eslint-plugin-quibble?style=for-the-badge)



## Supported rules



Learn more about each supported rules by reading their documentation:



- `no-excessive-whitespace`: removes unnecessary whitespace characters, including leading and trailing spaces, as well as multiple spaces between class names.



By using [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension for Visual Studio Code, you will get the following messages:

![errors](.github/output.png)



## Latest changes



The `vue-no-excessive-whitespace` was renamed to `no-excessive-whitespace` and `{j,t}sx` support was added.



Check out the full changelog [here](CHANGELOG.md).



## Installation



### 1. Install `eslint` and `eslint-plugin-quibble`



```

pnpm i -D eslint eslint-plugin-quibble

```



### 2. Extend eslint configuration and enable rules



- (Optional) Install Vue parser: `pnpm i -D vue-eslint-parser`



- Inside your `eslint.config.js`:



```js

import quibble from 'eslint-plugin-quibble'



export default [

  {

    plugins: {

      quibble

    },



    rules: {

      'quibble/no-excessive-whitespace': 'error'

    },

  },

  {

    files: ['*.vue'],

    languageOptions: {

      parser: 'vue-eslint-parser',

    }

  },

]

```



Adding `vue-eslint-parser` is optional - some popular configs such as [`antfu/eslint-config`](https://github.com/antfu/eslint-config) have it installed and configured already.



## Future



In the future, this plugin will be expanded by the rules the community or myself find worth of adding.



## FAQ



### Quibble?



**To argue about, or say you disapprove of, something that is not important**:



- _There's no point quibbling about/over a couple of ~~dollars~~ whitespace characters_.



### What are your motivations?



To be perfectly honest, when doing code reviews at work, I often spot excessive whitespace characters, typos, or other stylistic errors - and it really irks me.



Should I nitpick the PR and point out those lines, saying:



> Hey, could you remove this whitespace? I know it doesn't change much, but I'd be pleased to see it gone from the codebase. :)



Well, probably not. It's **annoying to impose stylistic rules** on developers that cannot be auto-fixed by their IDE - something I've learned from Theo. That's why I've developed this ESLint plugin.



Side note: The other option, to avoid making my fellow developers angry with me, was delivering the nitpicks in the form of a meme, which I actually did (at least) once `#meme-driven-development`.



![missing-space](.github/excessive-space.jpg)



### Why a separate plugin / why not contribute to already existing projects?



There are a few reasons why. The primary one is that I wanted to finally build a tool on my own. I've spent countless hours configuring ESLint to work the way I want, and my curiosity about how it works internally eventually won.



The second reason why, it takes time to get your PR reviewed, accepted and published. Where would the `no-excessive-whitespace` rule even fit? [`eslint-plugin-perfectionist`](https://github.com/azat-io/eslint-plugin-perfectionist), [`eslint-stylistic`](https://github.com/eslint-stylistic/eslint-stylistic) or maybe [`eslint-plugin-tailwindcss`](https://github.com/francoismassart/eslint-plugin-tailwindcss/tree/master)? There's an issue opened on the last one since Jul 21, 2023.



Therefore, it was easier to create a plugin from scratch - something I have a full control of, can use right away, and can learn from in the process.



### Is the project open to contributions?



Yes! I very much welcome the community's input, and I would be pleased to see your ideas on how to expand or improve this plugin. Feel free to open an issue. :)



### Why an ESLint plugin for code formatting / why not Prettier?



Following Anthony Fu's example with [`antfu/eslint-config`](https://github.com/antfu/eslint-config), I'm migrating my projects to use only ESLint for both syntax highlighting and code formatting. Although [`prettier/eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) exists, I found it too annoying to configure both Prettier and ESLint, especially with the conflicts that can arise between the two.



### Is flat config supported?



Yes.



## Further reading



### Eslint Config Inspector



You can check out your ESLint config by using the official tool - [ESLint Config Inspector](https://github.com/eslint/config-inspector):



```

pnpm dlx @eslint/config-inspector@latest

```



## Inspirations



I was heavily inspired by [eslint-plugin-tailwindcss](https://github.com/francoismassart/eslint-plugin-tailwindcss/tree/master) and [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) as the source code (structure, methods of crawling into nodes, naming conventions etc.) for those plugins was essentially my entry point and the base to creating `eslint-plugin-quibble`.