eslint-config-phloose

This is my personal ESLint config that i've used over time in different projects. The base config extends airbnb-base and eslint:recommended configurations. Further the package contains configs for node, jest, vue, typescript and svelte.

Install

This configuration assumes that (ESLint is installed.

Peer dependencies:

npm i -D eslint

Config installation:

npm i -D eslint-config-phloose

Usage

To use it simply add it to the extends property in a projects .eslintrc-file:

module.exports = {
    extends: ["phloose"]
    rules: {
        /* settings... */
    }
}

The specialized configs can be referenced in the way phloose/<specialized> where specialized is one of jest, node, svelte, ts or vue

All specialized configurations extend the base config so it does not need to be listed when using one of them.

Recommended usage

For the best user experience regarding formatting and linting it is best to use prettier-eslint, which will run Prettier first and then ESLint.

Previously my workaround was to use Prettier as an ESLint plugin so that prettier errors would show up when running [ESLint] (https://eslint.org) and also be fixed by running ESLint either from VSCode or from the command line. It has been shown that this approach has its limits and i came to the conclusion that it is better to have one tool for a specific job:

• Prettier just for formatting
• ESLint for highlighting and fixing code style issues

To be in line with this configuration a .prettierrc-file with the following settings needs to be added to the root folder of a project (example uses .js-format):

module.exports = {
    arrowParens: "avoid",
    endOfLine: "auto",
    tabWidth: 4,
    trailingComma: "all",
    quoteProps: "consistent",
};

For the following Prettier needs to be installed:

npm i -D prettier

Use prettier-eslint from the command line

To use prettier-eslint with this configuration from the commandline run:

npm i -D prettier-eslint-cli eslint-prettier-config

which will install the CLI for prettier-eslint and a prettier specific ESLint config that disables certain conflicting ESLint rules.

Then add prettier to the end of the extends array in the .eslintrc-file (this is important!):

module.exports = {
    extends: ["phloose", "prettier"]
    rules: {
        /* additional rules */
    }
}

To run prettier-eslint e.g. on all js and ts files of the src folder and subfolders issue the following:

prettier-eslint --write "src/**/*.js"

Use Prettier ESLint VSCode extension

Install the prettier-eslint core package and the config mentioned already above:

npm i -D prettier-eslint eslint-prettier-config

Then install Prettier ESLint extension for VSCode and add a workspace configuration with the following content:

{
    "[<language>]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "eslint.validate": [
        "<language>"
    ],
}

This way VSCode formats with Prettier and also hightlights and fixes ESLint errors for the respective filetype/language set in brackets.

The .eslintrc-file has to be configured like in the previous section.