Setup ESLint with Prettier

. README.md

ESLint with Prettier Setup

Basically, when using Prettier, all ESLint styling rules should be disabled.
This can be done with eslint-config-prettier.

See .eslintrc.js example below.
In prettier.config.js you can use anything you want (see example below).

Now the tricky part is how to run them...
Usually ESLint should run first, then Prettier.
That way any code changes by ESLint will be pass through Prettier as well.
Only use the opposite if you want ESLint to re-format something the conflicts with Prettier formatting.

In the package.json example below:

• husky - Sets up git hooks when you npm install, in this case a pre-commit hook.
• lint-staged - Allows to run commands only on staged files/chunks in Git (i.e. only what you git add).

Also, if you currently have styling rules in .eslintrc.js, you'll need to remove them.
How to find them?
Use the eslint-config-prettier - cli-helper-tool.
See lint:eslint-config-prettier in package.json below.

Some Reference Links

• Prettier Docs - Integrating with Linters

.eslintrc.js

module.exports = {
  plugins: ['react'],

  extends: [
    'eslint:recommended',
    'prettier',
    'plugin:react/recommended',
    'prettier/react',
  ],

  env: {
    es2017: true,
    node: true,
  },

  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 2020,
    ecmaFeatures: {
      jsx: true,
    },
    sourceType: 'script',
  },

  rules: {
    // ...
  },
};

package.json

{
  "name": "eslint-prettier-setup",
  "version": "0.0.0",
  "description": "Example setup of ESLint with Prettier",
  "scripts": {
    "prettier:base": "prettier --ignore-path .gitignore",
    "eslint:base": "eslint --ignore-path .gitignore",
    "lint:eslint": "npm run eslint:base -- --max-warnings 0 \"**/*.{js,ts,tsx,mdx}\"",
    "lint:eslint-config-prettier": "eslint --print-config .eslintrc | eslint-config-prettier-check",
    "lint": "npm run lint:eslint",
    "format:prettier": "npm run prettier:base -- --write \"**/*.{js,ts,tsx,json,md,mdx}\"",
    "format:eslint": "npm run eslint:base -- --fix \"**/*.{js,ts,tsx,mdx}\"",
    "format": "npm run format:eslint && npm run format:prettier"
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "npm run eslint:base -- --fix --max-warnings 0",
      "npm run prettier:base -- --write"
    ],
    "*.{json,md,mdx}": [
      "npm run prettier:base -- --write"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "devDependencies": {
    "babel-eslint": "10.1.0",
    "eslint": "7.14.0",
    "eslint-config-prettier": "6.15.0",
    "eslint-plugin-react": "7.21.5",
    "husky": "4.3.0",
    "lint-staged": "10.5.1",
    "prettier": "2.2.0",
  },
}

prettier.config.js

/* eslint-disable line-comment-position, no-inline-comments */
'use strict';

/**
 * Ref:
 * https://prettier.io/docs/en/options.html
 */
module.exports = {
  arrowParens: 'avoid',
  bracketSpacing: true,
  endOfLine: 'auto',
  htmlWhitespaceSensitivity: 'css',
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  printWidth: 80,
  proseWrap: 'preserve',
  semi: true,
  singleQuote: true, // default: false
  tabWidth: 2,
  trailingComma: 'es5',
  useTabs: false,
};

settings.json

{
  "editor.rulers": [80],
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.options": {
    "configFile": ".eslintrc.js",
    "ignorePath": ".gitignore"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.wordWrap": "bounded"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "mdx"
  ]
}

For more ESLint setup inspiration, see my own ESLint configs:
eslint-config-ai