Eslint config - Daniel Danielsson

This is how I configure eslint and prettier in my projects! It works as a good base for anyones eslint and prettier, since any rule is configurable to personal prefrences (See Customization).

Installation

1. First, install the package and make sure it's added to your package.json file in the devDependencies.

npm i -D @danieldanielsson/eslint-config

2. We need to put our eslint settings in a file in the root of your project. Create a .eslintrc or .eslintrc.js file for that:

{
  "extends": ["@danieldanielsson/eslint-config"]
}

TypeScript users will also need a tsconfig.json file in their project. An empty object ({}) will do!

3. And let's add two scripts to our package.json to lint and fix lint errors:

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
},

Now you can manually lint your code by running npm run lint and fix all fixable issues with npm run lint:fix. We'll look into how this can be automated on save in VSCode in just a bit, but since everyone working on your project might not have this configured it's great to have these scripts!

Customization

If you'd like to overwrite eslint or prettier settings, you can add the rules in your .eslintrc file. The ESLint rules go directly under "rules".

{
  "extends": [
    "@danieldanielsson/eslint-config"
  ],
  "rules": {
    "no-console": 2,
  }
}

Prettier Rules

If you want custom prettier options, it's recommended to create a .prettierrc file in your root directory like so:

{
  "singleQuote": true,
  "endOfLine": "auto",
  "tabWidth": 2
}

VSCode

Once you have done the above installs, I recommend you to configure VSCode to lint and fix for you. Here's hpw I do it:

1. Install the ESLint package
2. Now we need to setup some VSCode settings via Code/File → Preferences → Settings. It's easier to enter these settings while editing the settings.json file, so click the Open (Open Settings) icon in the top right corner:

 "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.format.enable": true,
  "eslint.workingDirectories": [],
  "eslint.runtime": "",
  "eslint.debug": true,

// These are all my auto-save configs
"editor.formatOnSave": true,
// turn it off for JS, JSX, TS and TSX , we will do this via eslint instead.
"[javascript][javascriptreact][typescript][typescriptreact]": {
  "editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

After attempting to lint your file for the first time, you may need to click on 'ESLint' in the bottom right and select 'Allow Everywhere' in the alert window.

Finally you'll usually need to restart VSCode.