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
-
Install the config and dependencies:
-
Create a
.eslintrc.json
file in the root of your project's directory. -
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 aspackage.json
, you will have to set the path yourself inparserOptions
andsettings
:// .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:
-
Install the ESLint package
-
Now we need to setup some VS Code settings via
Code/File
→Preferences
→Settings
. It's easier to enter these settings while editing thesettings.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.