A set of developer-friendly eslint, stylistic, typescript and accessibility configuration rules to help you and fellow developers follow the industry-recommended coding practices for easier readability, maintenance and productivity !
The usage of eslint-stylistic over prettier will give you additional options to format your code and hopefully avoid conflict of rules between eslint and prettier for which you additionally had to install eslint-config-prettier. I personally use prettier only to format non .js(x) and .ts(x) files.
On running eslint . some of the rules imported from this config will give you a warning eslint --fix . should hopefully fix most of the warnings or errors in your code. It's okay to have a few warnings when developing, but they should be taken care of when pushing your code for production.
Warning
Ignored eslint warnings or errors in code will likely cause your app build to fail, unless resolved or specified eslint to ignore using the eslint-ignore syntax.
This config extends the following plugins and parsers -
- eslint/recommended - 8.56.0
- eslint-plugin-react - 7.34.1
- eslint-plugin-react-hooks - 4.6.0
- eslint-plugin-jsx-a11y - 6.8.0
- @stylistic/eslint-plugin - 1.7.0
- @typescript-eslint/eslint-plugin - 7.0.0
- @typescript-eslint/parser - 7.6.0
You'll first need to install ESLint. If you project is a monorepo, consider creating a separate eslint-config for each package.
npm i eslint --save-dev
yarn add -D eslint
Next, install @nish1896/eslint-config.
npm install @nish1896/eslint-config --save-dev
yarn add -D @nish1896/eslint-config
In case you are migrating from v1.0.x, check the Migration Guide.
For usage in a nodejs application, use only the js eslint configuration of this package.
module.exports = {
extends: ['@nish1896/eslint-config/js']
}
React applications would need both the js and react config of this package.
module.exports = {
extends: ['@nish1896/eslint-config/js', '@nish1896/eslint-config/react']
}
To add a new rule, turn off or modify the existing list of rules, append the rules in your eslint configuration file.
{
"rules": {
"<new-rule>": "error",
"no-unused-vars": "off",
"id-length": ["warn", { "min": 3, "max": 20 }]
}
}To disable one or more rules throughout the file, add this at the top of your file.
/* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any */
To disable one or more rules in the next line,
/* eslint-disable-next-line <rule1>, <rule2> */
Caution
The syntax below won't work
// eslint-disable-next-line <rule1>, <rule2>
or
/** eslint-disable-next-line @typescript-eslint/no-unused-vars */
Add "lint" command to your package.json file.
npm pkg set scripts.lint="eslint --fix ."
To run linting on your codebase,
npm run lintyarn lint
For formatting non-js like .css, .html files you can use prettier alongside eslint. Prettier configuration, prettierignore and usage of eslint with prettier in pre-commit hook can be referenced from my react-node-ts-monorepo.
View the complete list of rules
All rule names start with @stylistic/ prefix.
Note
Starting v1.0.3 almost all of the stylistic rules will default to warn. These can be easily fixed by running linting and do not require the attention of the developer.
The stylistic rule(s) listed below will give an error and will have to be manually fixed.
| Rule Name |
|---|
| no-mixed-operators |
The eslint rule(s) listed below will give an error and will have to be manually fixed.
| Rule Name |
|---|
| eqeqeq |
| no-await-in-loop |
| no-eq-null |
| no-use-before-define |
| default-case |
| prefer-rest-params |
| require-await |
| Rule Name | Status |
|---|---|
| @typescript-eslint/no-explicit-any | warn |
| no-unused-vars | warn |
| no-this-alias | off |
The below rules are for @nish1896/eslint-config/react.
All rule names start with @stylistic/ prefix.
| Rule Name | 🔧 |
|---|---|
| jsx-closing-bracket-location | |
| jsx-closing-tag-location | |
| jsx-curly-newline | consistent |
| jsx-curly-spacing | |
| jsx-equals-spacing | |
| jsx-indent | 2 |
| jsx-indent-props | 2 |
| jsx-one-expression-per-line | { allow: 'literal' } |
| jsx-props-no-multi-spaces | |
| jsx-quotes | prefer-double |
| jsx-self-closing-comp | |
| jsx-wrap-multilines | parens-new-line |
| Rule Name | ❌ | 🔧 | |
|---|---|---|---|
| react/jsx-uses-vars | ✔️ | ||
| react/jsx-filename-extension | ✔️ | { extensions: ['.tsx', '.jsx'] } |
Enabled below rules that are not enabled by default in the jsx-a11y/recommended plugin. All rule names start with jsx-a11y/ prefix.
| Rule Name | ❌ | 🔧 | |
|---|---|---|---|
| anchor-ambiguous-text | ✔️ | ||
| control-has-associated-label | ✔️ |
You will need to manually add them in the rules of your .eslintrc, if needed.
| Rule Name | Reason |
|---|---|
| jsx-first-prop-new-line | |
| @stylistic/lines-around-comment | Sometimes reqd, when writing block comments above functions, but don't need when writing block comment between 2 lines of code |
| @typescript-eslint/ban-ts-comment | A good developer will avoid writing ts-comments, except in extreme cases. Let's not cause them trouble to write one more line |
| @typescript-eslint/no-this-alias | sometimes this is reqd in fn context. eg. MongooseSchema.pre() |
| id-denylist | use if required. eg. "id-denylist": ["warn", "e", "cb", 'callback'] |
| id-length | warning when using _ for unused vars |
| multiline-comment-style | the default setting starred-block read commented code as a comment itself, which made it difficult to uncomment the code |
| no-mixed-spaces-and-tabs | same rule in eslint.style |
| no-shadow | gave unwanted warnings when using enums |
| no-unused-vars | @typescript-eslint/no-unused-vars does it better |
| react/react-in-jsx-scope | react v17+ doesn't require import React from react |
| sort-keys | sometimes more crucial object keys should come first |
| sort-vars | same as above |
Checkout out other recommended community plugins
To create your own plugin follow this guide.
If you found this config useful, please don't forget to star the repository. It would make my day if you consider buying me a coffee