marsidev's ESLint config

These is a shareable config for ESLint, used on my personal JavaScript/TypeScript/React projects.

What it does

• Lints JavaScript and TypeScript files
• Uses eslint-config-standard as a base config

Installing

1. Install the config and dependencies:

   • Using npm

     npx install-peerdeps eslint-config-marsi --dev

   • Using yarn

     npx install-peerdeps eslint-config-marsi --yarn --dev

   • Using pnpm

     npx install-peerdeps eslint-config-marsi --pnpm --dev

2. Create a .eslintrc.json file in the root of your project's directory.

3. Fill your .eslintrc.json file:

   • For JavaScript projects:

     {
       "extends": ["marsi"]
     }

   • For TypeScript projects:

     {
       "extends": ["marsi/ts"]
     }

   • For JavaScript React (.jsx) projects:

     {
       "extends": ["marsi/react"]
     }

   • For TypeScript React (.tsx) projects:

     {
       "extends": ["marsi/react-ts"]
     }

     Note: If you use TypeScript and your tsconfig.json is not in the same directory as package.json, you will have to set the path yourself in parserOptions and settings:

     // .eslintrc.json
     {
      "extends": ["marsi/ts"], // or "marsi/react-ts"
      "parserOptions": {
        "project": "path/to/project/tsconfig.json" // <- path including tsconfig.json
      },
      "settings": {
          "import/resolver": {
          "typescript": {
            "project": ["path/to/project"] // <- folder path only
          }
        }
      }
     }

   If you won't use TypeScript, you can remove TypeScript-related packages from your package.json:

   "devDependencies": {
   - "@typescript-eslint/eslint-plugin": "x.x.x",
   - "@typescript-eslint/parser": "x.x.x",
   - "eslint-import-resolver-typescript": "x.x.x",
   - "typescript": "x.x.x"
   },

   If you won't use React, you can remove React-related packages from your package.json:

   "devDependencies": {
   - "eslint-plugin-react": "x.x.x"
   },

Scripts

• For JavaScript projects:

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

• For TypeScript projects:

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

• For JavaScript React (.jsx) projects:

  "scripts": {
    "lint": "eslint --ext .js --ext .jsx .",
    "lint:fix": "eslint --ext .js --ext .jsx . --fix",
  },

• For TypeScript React (.tsx) projects:

  "scripts": {
    "lint": "eslint --ext .ts --ext .tsx .",
    "lint:fix": "eslint --ext .ts --ext .tsx . --fix",
  },

Settings

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

{
  "extends": ["marsi"],
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
  }
}

Visual Studio Code support

For a better developer experience, you probably want your editor to lint and fix for you:

1. Install the ESLint package

2. Now we need to setup some VS Code 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:

"editor.formatOnSave": false,
"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
  "source.fixAll": 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 VS code.