Plug N Play ESLint and Prettier Setup for Web Dev

These are my settings for ESLint and Prettier. They're fully customizable (incase you dont like them).

Installation

npm install --dev eslint prettier eslint-config-web
# or
yarn add --dev eslint prettier eslint-config-web

Usage

Javascript

Create a .eslintrc.js file in the root of your project's directory (it should live where package.json does). Your .eslintrc.js file should look like this:

module.exports = {
  extends: [
    "eslint-config-web",
  ],
};

TypeScript

Create a .eslintrc.js file in the root of your project's directory (it should live where package.json does). Your .eslintrc.js file should look like this:

module.exports = {
  parserOptions: {
    project: "tsconfig.json",
    tsconfigRootDir: __dirname,
  },
  extends: [
    "eslint-config-web/typescript",
  ],
};

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

JavaScript + TypeScript

If you have both .js and .ts files in your project, you can use the following config to use the typescript rules only on .ts files.

module.exports = {
  extends: ["eslint-config-web"],
  overrides: [
    {
      files: ["**/*.ts", "**/*.tsx"],
      parserOptions: {
        project: "tsconfig.json",
        tsconfigRootDir: __dirname,
      },
      extends: ["eslint-config-web/typescript"],
    },
  ],
};