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 lint
yarn 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