Goodbye prettier, welcome ESLint

Like many developers I have used prettier for a long time for most of my projects. It has been the go-to formatting tool for front-end developers and for a good reason. It provides opinionated formatting with minimal options. This coupled with a wide IDE support makes it easy to setup and user.

Unfortunately being opinionated has its downsides. It is not possible to configure prettier to your liking. For example, I prefer to have a trailing comma in my objects and arrays. This is not possible with prettier. I also prefer to have a space after the function keyword. This is also not possible with prettier. A quick search on prettier’s GitHub issues shows that there are many requests for these features. The maintainers have been very clear that they do not want to add these features. They want to keep prettier simple and opinionated.

The other issue is that prettier does not work well with ESLint. While prettier website provides a guide on how to integrate with linters, it is a still a combersome process. I can't remember how many times I tried to make them work together and failed.

Enter ESLint

ESlint, like prettier, needs no introduction. It is a linting tool with great support. It is also highly configurable. By highly I mean it has 300+ rules (or options) listed on its website. In addition to that there are many plugins that provide more rules for various part of your project. Lastly, you can write your own rules if you want to.

While being highly configurable is a good thing, it represents the other extreme to prettier. It is easy to get overwhelmed by the number of options and rules. This is why I prefer to use a preset that provides a good set of rules and plugins. There are many presets available, like airbnb, standard, xo, etc. I have used many of them and they seem to work well. However, I have found that they are not perfect for my projects. Especially that I work mostly with vue projects.

That is why I created a sharable config for ESLint that I use in my projects. It comes with great defaults and include popular plugins like unicorn, promise, jsdoc, vue and other eslint plugins.

How to use it

You can install it using npm or yarn:

npm install --save-dev @kalimahapps/eslint-config
yarn add --dev @kalimahapps/eslint-config

Then add the following to your .eslintrc.js file:

module.exports = {
  extends: ["@kalimahapps"],
}

Then add this to your .vscode/settings.json file to auto-fix on save:

{
    "prettier.enable": false,
    "editor.formatOnSave": false,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
}

Where to find it

GitHub

kalimahapps / eslint-config

Comprehensive eslint rules for vue projects with typescript

KalimahApps Eslint Config

Comprehensive eslint rules for vue projects with typescript

✨ Features

• Includes unicorn, promise, jsdoc, vue and other eslint plugins
• No prettier.
• Tabs and semicolons.
• Configurable rules.
• Sort package.json and .vscode/settings.json files.

💽 Installation

PNPM

pnpm add eslint @kalimahapps/eslint-config -D

NPM

npm install eslint @kalimahapps/eslint-config -D

🔧 Usage

Add this to your .eslintrc.js file

module.exports = {
  extends: [
    '@kalimahapps'
  ]
}

VSCode integration

Install ESLint extension in VSCode and add this to your .vscode/settings.json file

{
    "prettier.enable": false,
    "editor.formatOnSave": false,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "json",
        "jsonc",
        "json5"
    ],
}

Note

• To enable eslint with .vscode/settings.json, you need to add !.vscode rule to your…

View on GitHub

NPM

@kalimahapps/eslint-config - npm

Comprehensive and configurable ESLint config for Vue 3 projects with TypeScript support. Latest version: 1.1.2, last published: 11 days ago. Start using @kalimahapps/eslint-config in your project by running `npm i @kalimahapps/eslint-config`. There are no other projects in the npm registry using @kalimahapps/eslint-config.

npmjs.com