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.