eslint-config-abhijithvijayan v0.2.0
eslint-config-abhijithvijayan
My shared ESLint & Prettier configuration for projects
Installing
You can use this config globally and/or locally per project.
It's usually best to install this locally once per project, that way you can have project specific settings as well as sync those settings with others working on your project via git.
Local / Per Project Install
If you don't already have a
package.json
file, create one withnpm init -y
.Then we need to install everything needed by the config:
npx install-peerdeps eslint-config-abhijithvijayan@latest --dev
You can see in your
package.json
there are now a big list of devDependencies.Create a
.eslintrc.json
file in the root of your project's directory (it should live wherepackage.json
does). Your.eslintrc.json
file should look like this:{ "extends": ["abhijithvijayan"] }
Tip: You can alternatively put this object in your
package.json
under the property"eslintConfig":
. This makes one less file in your project.You can add two scripts to your package.json to lint and/or fix:
"scripts": { "lint": "eslint . --ext .js,.ts", "lint:fix": "eslint . --ext .js,.ts --fix" },
Now you can manually lint your code by running
npm run lint
and fix all fixable issues withnpm run lint:fix
. You probably want your editor to do this though.
Global Install
- First install everything needed:
i. For **JavaScript** only version:
```
npx install-peerdeps --global eslint-config-abhijithvijayan@1.6.0
```
ii. For **TypeScript** version:
```
npx install-peerdeps --global eslint-config-abhijithvijayan@latest
```
- Then you need to make a global
.eslintrc.json
file:
ESLint will look for one in your home directory
~/.eslintrc.json
for linux / macC:\Users\username\.eslintrc.json
for windows
In your .eslintrc.json
file, it should look like this:
{
"extends": ["abhijithvijayan"]
}
- To use from the CLI, you can now run
eslint .
or configure your editor as we show next.
Override
If you'd like to override eslint
or prettier
settings, you can add the rules in your .eslintrc.json
file.
The ESLint rules go directly under "rules"
while prettier options go under "prettier/prettier"
.
Note that prettier rules overwrite anything in this config (trailing comma, and single quote), so you'll need to include those as well.
{
"extends": ["abhijithvijayan"],
"rules": {
"prettier/prettier": [
"error",
{
"printWidth": 120,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5"
}
]
}
}
With VS Code
You should read this entire thing. Serious!
Once you have done one, or both, of the above installs. You probably want your editor to lint and fix for you. Here are the instructions for VS Code:
- Install the ESLint package
- Install the Prettier 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{}
icon in the top right corner:
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"prettier.disableLanguages": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
With Create React App
- Run
npx install-peerdeps --dev eslint-config-abhijithvijayan
- Open your
package.json
and replace"extends": "react-app"
with"extends": "abhijithvijayan"
Credits
Thanks to @wesbos for some base rules