@nish1896/eslint-config

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 ⚠️ indicating that the code issue may be ignored while the rules triggering an error ❌ will discourage you to avoid that coding practice. 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

Installation

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

Usage

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.

List of Rules

View the complete list of rules

• eslint
• stylistic
• typescript
• react
• jsx-a11y

stylistic rules ( js only )

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.

|Rule Name| Configuration 🔧| |-|-| |array-bracket-newline| { multiline: true, minItems: 4 } | |array-bracket-spacing|| |array-element-newline| { multiline: true, minItems: 4 } | |arrow-parens| as-needed | |arrow-spacing|| |block-spacing|| |brace-style|| |comma-dangle| { arrays: 'never', objects: 'never', imports: 'never', exports: 'never' functions: 'never' } | |comma-spacing|| |eol-last|| |function-call-argument-newline| consistent | |function-paren-newline|| consistent | |indent|| 2 | |indent-binary-ops| 2 | |key-spacing|| |linebreak-style|| |newline-per-chained-call|| |no-extra-semi|| |no-floating-decimal|| |no-mixed-spaces-and-tabs|| |no-multi-spaces|| |no-multiple-empty-lines|| |no-trailing-spaces|| |object-curly-newline| { multiline: true } | |object-curly-spacing| always | |object-property-newline|| |operator-linebreak| before | |quotes| single | |rest-spread-spacing|| |semi-spacing|| |space-before-blocks| { functions: 'always', classes: 'always', keywords: 'always' } | |space-infix-ops|| |space-unary-ops|| |spaced-comment|| |switch-colon-spacing|| |template-curly-spacing|| |type-annotation-spacing|| |type-generic-spacing|| |type-named-tuple-spacing|| |wrap-regex||

The stylistic rule(s) listed below will give an error and will have to be manually fixed.

| Rule Name | |-| |no-mixed-operators|

eslint rules

|Rule Name|🔧| |-|-| |array-callback-return|| |arrow-body-style|| as-needed | |curly|| |dot-notation|| |func-names| as-needed | |no-debugger|| |no-inline-comments|| |no-plusplus|| |no-unreachable|| |no-var|| |object-shorthand|| |prefer-const|| |prefer-exponentiation-operator|| |prefer-promise-reject-errors|| |semi|| |use-isnan||

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|

typescript-eslint rules

| 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.

stylistic rules ( jsx )

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 |

eslint-plugin-react rules

| Rule Name |⚠️|❌|🔧| |-|-|-|-| |react/jsx-uses-vars||✔️|| |react/jsx-filename-extension|✔️|| { extensions: ['.tsx', '.jsx'] } |

jsx-a11y rules

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||✔️||

Rules removed after initial or subsequent testing

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.

Support Me

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