My ESLint config for linting JavaScript along side Prettier without conflicts.
It includes the following:
- My base config eslint-config-roboleary-base.
- The eslint-config-prettier config to turn off the ESLint rules that conflict or are unnecessary when using Prettier.
-
Install this package, ESLint (peer dependency) and Prettier (peer dependency) as devDependencies with the command
npm i --save-dev eslint prettier eslint-config-roboleary
. -
Create an eslint config file in the root of your project directory e.g. .eslintrc. Add the following:
{ "extends": ["eslint-config-roboleary"] }
Alternatively, you can put a reference to the config in your package.json under the property
eslintConfig
. -
You can add scripts to your package.json to lint, fix, and format your code from the command-line.
{ "scripts": { "lint": "eslint .", "lint:fix": "npm run lint -- --fix", "format": "prettier src test --check", "format:fix": "npm run prettier -- --write", }, }
If you want to use ES Lint and Prettier in VS Code, I recommend installing the extensions: ESLint, Prettier, and Format Code Action.
To format and lint code on save, you can update your user settings with the following:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.probe": [
"javascript",
"javascriptreact",
"vue"
],
"editor.formatOnSave": false,
"editor.codeActionsOnSave": [
"source.formatDocument",
"source.fixAll.eslint"
],
}