v2.0.0 - Split JS and JSX Rules (#7)

* js, react config export * try running llocally * update docs * upgrade pkgs * update readme * minor change --------- Co-authored-by: nishant.kohli <[email protected]>
nishkohli96 · Apr 9, 2024 · c3d6037 · c3d6037
1 parent 185e805
commit c3d6037
Show file tree

Hide file tree

Showing 9 changed files with 860 additions and 311 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,8 +1,11 @@
-const eslintConfig = require('./lib');
+var jsEslintConfig = require('./lib/js');
+var reactEslintConfig = require( './lib/react');
 
 module.exports = {
-  ...eslintConfig,
-  plugins: [
-	'@stylistic/eslint-plugin'
-  ],
+  ...reactEslintConfig,
+  rules: {
+    ...jsEslintConfig.rules,
+    ...reactEslintConfig.rules
+  },
+  plugins: ['@stylistic/eslint-plugin'],
 };
diff --git a/Changelog.md b/Changelog.md
@@ -1,5 +1,13 @@
 # **What's changed?**
 
+## [2.0.0](https://github.com/nishkohli96/eslint-config/tree/v2.0.0)
+
+**Released - 10 Apr, 2024**
+
+- Split `js` and `react-jsx` rules
+- Turn off [@typescript-eslint/ban-ts-comment](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-ts-comment.mdx)
+- Upgraded `@stylistic/eslint-plugin`, `@typescript-eslint/eslint-plugin`, `@typescript-eslint/parser` and `eslint-plugin-react` dependencies. 
+
 ## [1.0.4](https://github.com/nishkohli96/eslint-config/tree/v1.0.4)
 
 **Released - 12 Feb, 2024**

diff --git a/Migration.md b/Migration.md
@@ -0,0 +1,20 @@
+# Migration Guide
+
+**Starting v2 onwards, the linting rules for javascript and react have been split to purge out any unnecessary rules when using this config in a standalone nodejs application.** 
+
+For usage in a nodejs application, use only the `js` eslint configuration of this package. 
+
+```diff
+module.exports = {
+- extends: ['@nish1896']
++ extends: ['@nish1896/eslint-config/js']
+}
+```
+
+React applications would need both the `js` and `react` config import of this package.
+```diff
+module.exports = {
+- extends: ['@nish1896']
++ extends: ['@nish1896/eslint-config/js', '@nish1896/eslint-config/react']
+}
+```
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 
 **A set of developer-friendly [eslint](https://eslint.org/), [stylistic](https://eslint.style/), [typescript](https://www.typescriptlang.org/) and [accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_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](https://eslint.style/) over [prettier](https://prettier.io/) 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](https://www.npmjs.com/package/eslint-config-prettier).  
+The usage of [eslint-stylistic](https://eslint.style/) over [prettier](https://prettier.io/) 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](https://www.npmjs.com/package/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. 
 
@@ -16,13 +16,13 @@ On running `eslint .` some of the rules imported from this config will give you
 >
 
 This config extends the following plugins and parsers - 
-- [eslint/recommended](https://eslint.org/docs/latest/rules/) - 8.56.0
-- [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) - 7.33.2
+- [eslint/recommended](https://www.npmjs.com/package/eslint) - 8.56.0
+- [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) - 7.34.1
 - [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) - 4.6.0
 - [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) - 6.8.0
-- [@stylistic/eslint-plugin](https://eslint.style/) - 1.6.1
-- [@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin) - 6.21.0
-- [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser) - 6.21.0
+- [@stylistic/eslint-plugin](https://www.npmjs.com/package/@stylistic/eslint-plugin) - 1.7.0
+- [@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin) - 7.0.0
+- [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser) - 7.6.0
 
 ## Installation
 
@@ -46,13 +46,19 @@ yarn add -D @nish1896/eslint-config
 
 ## Usage
 
-Add `@nish1896/eslint-config` to the extends section of your *eslint configuration file*. `eslint-config` suffix can be ignored.
+In case you are migrating from v1.0.x, check the [Migration Guide](./Migration.md).
 
-```json
-{
-    "extends": [
-        "@nish1896"
-    ]
+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']
 }
 ```
 
@@ -104,6 +110,8 @@ 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](https://github.com/nishkohli96/react-node-ts-monorepo/tree/main).
 
+---
+
 ## List of Rules
 
 View the complete list of rules
@@ -113,19 +121,15 @@ View the complete list of rules
 - [react](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules)
 - [jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/main/docs/rules)
 
-⚠️ ***WARNING*** - write your code neatly please, hopefully, eslint will clean up the mess.  
-❌ ***ERROR*** - you should AVOID this coding practice.   
-🔧 ***CONFIGURE*** - specified or overwritten default case for a rule.  
-
-## **stylistic rules**
+## **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|🔧|
+|Rule Name| Configuration 🔧|
 |-|-|
 |[array-bracket-newline](https://eslint.style/rules/default/array-bracket-newline)| { multiline: true, minItems: 4 } |
 |[array-bracket-spacing](https://eslint.style/rules/default/array-bracket-spacing)||
@@ -140,19 +144,6 @@ All rule names start with `@stylistic/` prefix.
 |[function-paren-newline](https://eslint.style/rules/default/function-paren-newline)|| consistent |
 |[indent](https://eslint.style/rules/default/indent)|| 2 |
 |[indent-binary-ops](https://eslint.style/rules/default/indent-binary-ops)| 2 |
-|[jsx-closing-bracket-location](https://eslint.style/rules/default/jsx-closing-bracket-location)||
-|[jsx-closing-tag-location](https://eslint.style/rules/default/jsx-closing-tag-location)||
-|[jsx-curly-newline](https://eslint.style/rules/default/jsx-curly-newline)|consistent |
-|[jsx-curly-spacing](https://eslint.style/rules/default/jsx-curly-spacing)||
-|[jsx-equals-spacing](https://eslint.style/rules/default/jsx-curly-spacing)||
-|[jsx-first-prop-new-line](https://eslint.style/rules/default/jsx-first-prop-new-line)| multiline-multiprop |
-|[jsx-indent](https://eslint.style/rules/default/jsx-indent)| 2 |
-|[jsx-indent-props](https://eslint.style/rules/default/jsx-indent-props)| 2 |
-|[jsx-one-expression-per-line](https://eslint.style/rules/default/jsx-one-expression-per-line)| { allow: 'literal' } |
-|[jsx-props-no-multi-spaces](https://eslint.style/rules/default/jsx-props-no-multi-spaces)||
-|[jsx-quotes](https://eslint.style/rules/default/jsx-quotes)| prefer-double |
-|[jsx-self-closing-comp](https://eslint.style/rules/default/jsx-self-closing-comp)||
-|[jsx-wrap-multilines](https://eslint.style/rules/default/jsx-wrap-multilines)| parens-new-line |
 |[key-spacing](https://eslint.style/rules/default/key-spacing)||
 |[linebreak-style](https://eslint.style/rules/default/linebreak-style)||
 |[no-extra-semi](https://eslint.style/rules/default/no-extra-semi)||
@@ -177,7 +168,7 @@ All rule names start with `@stylistic/` prefix.
 |[type-named-tuple-spacing](https://eslint.style/rules/default/type-named-tuple-spacing)||
 |[wrap-regex](https://eslint.style/rules/default/wrap-regex)||
 
-Only the stylistic rule(s) listed below will give an error and will have to be manually fixed.
+The stylistic rule(s) listed below will give an error and will have to be manually fixed.
 
 | Rule Name |
 |-|
@@ -205,7 +196,7 @@ Only the stylistic rule(s) listed below will give an error and will have to be m
 |[semi](https://eslint.org/docs/latest/rules/semi)||
 |[use-isnan](https://eslint.org/docs/latest/rules/use-isnan)||
 
-Only the eslint rule(s) listed below will give an error and will have to be manually fixed.
+The eslint rule(s) listed below will give an error and will have to be manually fixed.
 
 | Rule Name |
 |-|
@@ -219,9 +210,33 @@ Only the eslint rule(s) listed below will give an error and will have to be manu
 
 ## **typescript-eslint rules**
 
-| Rule Name |⚠️|❌|🔧|
-|-|-|-|-|
-|[ban-ts-comment](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-ts-comment.md)|✔️|||
+| Rule Name | Status |
+|-|-|
+|[no-unused-vars](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-ts-comment.md) | warn |
+|[no-this-alias](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-this-alias.mdx) | 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](https://eslint.style/rules/default/jsx-closing-bracket-location)||
+|[jsx-closing-tag-location](https://eslint.style/rules/default/jsx-closing-tag-location)||
+|[jsx-curly-newline](https://eslint.style/rules/default/jsx-curly-newline)|consistent |
+|[jsx-curly-spacing](https://eslint.style/rules/default/jsx-curly-spacing)||
+|[jsx-equals-spacing](https://eslint.style/rules/default/jsx-curly-spacing)||
+|[jsx-indent](https://eslint.style/rules/default/jsx-indent)| 2 |
+|[jsx-indent-props](https://eslint.style/rules/default/jsx-indent-props)| 2 |
+|[jsx-one-expression-per-line](https://eslint.style/rules/default/jsx-one-expression-per-line)| { allow: 'literal' } |
+|[jsx-props-no-multi-spaces](https://eslint.style/rules/default/jsx-props-no-multi-spaces)||
+|[jsx-quotes](https://eslint.style/rules/default/jsx-quotes)| prefer-double |
+|[jsx-self-closing-comp](https://eslint.style/rules/default/jsx-self-closing-comp)||
+|[jsx-wrap-multilines](https://eslint.style/rules/default/jsx-wrap-multilines)| parens-new-line |
 
 ## **eslint-plugin-react rules**
 
@@ -245,7 +260,9 @@ You will need to manually add them in the `rules` of your .eslintrc, if needed.
 
 | Rule Name | Reason |
 |-|-|
+|[jsx-first-prop-new-line](https://eslint.style/rules/default/jsx-first-prop-new-line)| |
 |[@stylistic/lines-around-comment](https://eslint.style/rules/default/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](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-ts-comment.mdx) |
 |[@typescript-eslint/no-this-alias](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-this-alias.md) | sometimes `this` is reqd in fn context. eg. MongooseSchema.pre() |
 |[id-denylist](https://eslint.org/docs/latest/rules/id-denylist) | use if required. eg. "id-denylist": ["warn", "e", "cb", 'callback']|
 [id-length](https://eslint.org/docs/latest/rules/id-length)| warning when using `_` for unused vars |

diff --git a/__tests__/bad-js.js b/__tests__/bad-js.js
@@ -1,4 +1,4 @@
-var st = '122'
+var st = "122"
 
 const func = (e) => console.log('some function');
 

diff --git a/lib/index.js → lib/js/index.js b/lib/index.js → lib/js/index.js
@@ -5,9 +5,6 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:jsx-a11y/recommended',
   ],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint', '@stylistic'],
@@ -20,9 +17,6 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
   },
   rules: {
     '@stylistic/array-bracket-newline': [
@@ -41,29 +35,6 @@ module.exports = {
     '@stylistic/function-paren-newline': ['warn', 'consistent'],
     '@stylistic/indent': ['warn', 2],
     '@stylistic/indent-binary-ops': ['warn', 2],
-    '@stylistic/jsx-closing-bracket-location': 'warn',
-    '@stylistic/jsx-closing-tag-location': 'warn',
-    '@stylistic/jsx-curly-newline': ['warn', 'consistent'],
-    '@stylistic/jsx-curly-spacing': 'warn',
-    '@stylistic/jsx-equals-spacing': 'warn',
-    '@stylistic/jsx-first-prop-new-line': ['warn', 'multiline-multiprop'],
-    '@stylistic/jsx-indent': ['warn', 2],
-    '@stylistic/jsx-indent-props': ['warn', 2],
-    '@stylistic/jsx-one-expression-per-line': ['warn', { allow: 'literal' }],
-    '@stylistic/jsx-props-no-multi-spaces': 'warn',
-    '@stylistic/jsx-quotes': ['warn', 'prefer-double'],
-    '@stylistic/jsx-self-closing-comp': 'warn',
-    '@stylistic/jsx-wrap-multilines': [
-      'warn',
-      {
-        arrow: 'parens-new-line',
-        assignment: 'parens-new-line',
-        condition: 'parens-new-line',
-        declaration: 'parens-new-line',
-        logical: 'parens-new-line',
-        return: 'parens-new-line',
-      },
-    ],
     '@stylistic/key-spacing': 'warn',
     '@stylistic/linebreak-style': 'warn',
     '@stylistic/no-extra-semi': 'warn',
@@ -94,18 +65,16 @@ module.exports = {
     '@stylistic/type-generic-spacing': 'warn',
     '@stylistic/type-named-tuple-spacing': 'warn',
     '@stylistic/wrap-regex': 'warn',
+    '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/no-unused-vars': 'warn',
     '@typescript-eslint/no-this-alias': 'off',
-    '@typescript-eslint/ban-ts-comment': 'warn',
     'array-callback-return': 'warn',
     'arrow-body-style': ['warn', 'as-needed'],
     curly: 'warn',
     'default-case': 'warn',
     'dot-notation': 'warn',
     eqeqeq: 'error',
     'func-names': ['warn', 'as-needed'],
-    'jsx-a11y/anchor-ambiguous-text': 'error',
-    'jsx-a11y/control-has-associated-label': 'error',
     'no-await-in-loop': 'warn',
     'no-debugger': 'warn',
     'no-eq-null': 'error',
@@ -120,23 +89,10 @@ module.exports = {
     'prefer-exponentiation-operator': 'warn',
     'prefer-promise-reject-errors': 'warn',
     'prefer-rest-params': 'error',
-    'react/react-in-jsx-scope': 'off',
-    'react/jsx-uses-vars': 'error',
-    'react/jsx-filename-extension': [
-      'warn',
-      {
-        extensions: ['.tsx', '.jsx'],
-      },
-    ],
     semi: ['warn', 'always'],
     'require-await': 'error',
     'use-isnan': 'warn',
   },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
   /**
    * .eslintignore config, unlike .gitignore,
    *  "/" is used instead of "\"
@@ -146,7 +102,6 @@ module.exports = {
     'dist',
     'build',
     'coverage',
-    '.next',
     '.turbo',
     '.eslintrc.js',
     '.d.ts',