Merge pull request #93 from molindo/feat/spring-cleaning-2023-07-27

Prepare 7.0.0 release

CHANGELOG.md

@@ -1,5 +1,36 @@
 # CHANGELOG
 
+## 7.0.0
+
+### Features
+
+ - Enable `react/function-component-definition` to have auto fix for using functions of React components (fixes #75)
+ - Enable `react/no-unstable-nested-components` (fixes #77)
+ - Enable `{checksVoidReturn: {attributes: false}}` for `@typescript-eslint/no-misused-promises` (fixes #86)
+ - Enable `@typescript-eslint/ban-ts-comment` (fixes #89)
+ - Upgrade available major versions of dependencies (`@typescript-eslint/eslint-plugin`)
+ - Add `molindo/tailwind`
+
+### Fixes
+
+ - Detect `**/*.{e2e,cy}.{js,jsx,ts,tsx}` as test files (fixes #67)
+ - Change `import/no-extraneous-dependencies` rule configuration to allow dev dependencies in all files since it has too many false positives otherwise (fixes #71)
+ - Add `cy` and `Cypress` globals when `cypress` config is used (fixes #79)
+ - Disable `no-use-before-define` for TypeScript files (fixes #91)
+
+### Breaking changes
+
+ - Require `eslint@^8.45`
+ - `eslint-config-molindo/setupPlugins` has been removed, since it's no longer necessary (fixes #59)
+ - Removed `typescript` from dependencies (consumers should install this)
+ - CSS modules-related rules were moved to `molindo/css-modules`
+ - Upstream breaking changes
+    1. [`@typescript-eslint/eslint-plugin` & `@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint/blob/main/CHANGELOG.md#breaking-changes)
+    2. [`eslint-plugin-jest`](https://github.com/jest-community/eslint-plugin-jest/blob/main/CHANGELOG.md#2700-2022-08-28)
+    3. [`prettier`](https://prettier.io/blog/2023/07/05/3.0.0.html)
+    4. [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier/blob/master/CHANGELOG.md#500)
+    5. [`eslint-plugin-unicorn`](https://github.com/sindresorhus/eslint-plugin-unicorn/releases) (upgraded from v41 to v48)
+
 ## 6.0.1
 
 ### Fixes

README.md

@@ -12,15 +12,14 @@
 2. Setup your project config in `.eslintrc.js`:
 
 ```js
-// This enables ESLint to use dependencies of this config
-// (see https://github.com/eslint/eslint/issues/3458)
-require('eslint-config-molindo/setupPlugins');
-
 module.exports = {
   // Add configs based on your needs
   extends: [
-    'molindo/javascript', // Or `molindo/typescript`
+    'molindo/typescript', // Or `molindo/javascript`
+
     'molindo/react', // Optional
+    'molindo/css-modules', // Optional
+    'molindo/tailwind', // Optional
     'molindo/jest', // Optional
     'molindo/cypress' // Optional
   ]

config.js

@@ -4,6 +4,6 @@ module.exports = {
   testFiles: [
     '**/__testUtils__/**/*.{js,jsx,ts,tsx}',
     '**/__tests__/**/*.{js,jsx,ts,tsx}',
-    '**/*.{spec,test}.{js,jsx,ts,tsx}'
+    '**/*.{spec,test,e2e,cy}.{js,jsx,ts,tsx}'
   ]
 };

css-modules.js

@@ -0,0 +1,14 @@
+const {OFF, testFiles} = require('./config');
+
+module.exports = {
+  plugins: ['css-modules'],
+  extends: ['plugin:css-modules/recommended'],
+  overrides: [
+    {
+      files: testFiles,
+      rules: {
+        'css-modules/no-unused-class': OFF
+      }
+    }
+  ]
+};

cypress.js

@@ -11,5 +11,9 @@ module.exports = {
           'This should only be used for debugging and removed afterwards.'
       }))
     ]
+  },
+  globals: {
+    cy: false,
+    Cypress: false
   }
 };

javascript.js

@@ -1,5 +1,5 @@
 const confusingBrowserGlobals = require('confusing-browser-globals');
-const {ERROR, OFF, testFiles} = require('./config');
+const {ERROR, OFF} = require('./config');
 
 module.exports = {
   parserOptions: {
@@ -30,12 +30,7 @@ module.exports = {
     'import/newline-after-import': ERROR,
     'import/no-unresolved': [ERROR, {commonjs: true}],
     'import/no-named-as-default': OFF,
-    'import/no-extraneous-dependencies': [
-      ERROR,
-      {
-        devDependencies: testFiles.concat('webpack.config.js', '.eslintrc.js')
-      }
-    ],
+    'import/no-extraneous-dependencies': ERROR,
     'import/order': [
       ERROR,
       {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-molindo",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "Molindo ESLint config that implements our styleguide and helps to catch errors.",
   "repository": "https://github.com/molindo/eslint-config-molindo",
   "author": "Jan Amann <jam@molindo.at>",
@@ -19,34 +19,36 @@
     "javascript.js",
     "typescript.js",
     "config.js",
+    "css-modules.js",
+    "tailwind.js",
     "react.js",
     "jest.js",
     "cypress.js",
     "tsconfig.json"
   ],
   "devDependencies": {
-    "eslint": "8.12.0",
-    "jest": "27.5.1"
+    "eslint": "^8.45.0",
+    "jest": "^29.6.2",
+    "typescript": "5.1.6"
   },
   "peerDependencies": {
     "eslint": "^8.0.0"
   },
   "dependencies": {
-    "@rushstack/eslint-patch": "^1.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
     "confusing-browser-globals": "^1.0.11",
     "eslint-plugin-css-modules": "^2.11.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^26.1.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-sort-destructure-keys": "^1.4.0",
-    "eslint-plugin-unicorn": "^41.0.1",
-    "prettier": "^2.6.1",
-    "typescript": "^4.0.0"
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sort-destructure-keys": "^1.5.0",
+    "eslint-plugin-tailwindcss": "3.13.0",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "prettier": "^3.0.0"
   },
   "engines": {
     "node": ">=10"

react.js

@@ -1,13 +1,7 @@
 const {ERROR, OFF, testFiles} = require('./config');
 
 module.exports = {
-  plugins: [
-    'css-modules',
-    'jsx-a11y',
-    'react',
-    'react-hooks',
-    'sort-destructure-keys'
-  ],
+  plugins: ['jsx-a11y', 'react', 'react-hooks', 'sort-destructure-keys'],
 
   settings: {
     react: {
@@ -20,11 +14,7 @@ module.exports = {
     }
   },
 
-  extends: [
-    'plugin:css-modules/recommended',
-    'plugin:jsx-a11y/recommended',
-    'plugin:react/recommended'
-  ],
+  extends: ['plugin:jsx-a11y/recommended', 'plugin:react/recommended'],
 
   rules: {
     'jsx-a11y/label-has-associated-control': ERROR,
@@ -44,6 +34,13 @@ module.exports = {
       ERROR,
       {props: 'never', children: 'ignore'}
     ],
+    'react/function-component-definition': [
+      ERROR,
+      {
+        namedComponents: 'function-declaration',
+        unnamedComponents: 'arrow-function'
+      }
+    ],
     'react/jsx-handler-names': [
       ERROR,
       {
@@ -68,6 +65,7 @@ module.exports = {
     'react/no-direct-mutation-state': ERROR,
     'react/no-this-in-sfc': ERROR,
     'react/no-typos': ERROR,
+    'react/no-unstable-nested-components': [ERROR, {allowAsProps: true}],
     'react/no-unused-prop-types': ERROR,
     'react/no-unused-state': ERROR,
     'react/self-closing-comp': ERROR,
@@ -98,7 +96,6 @@ module.exports = {
     {
       files: testFiles,
       rules: {
-        'css-modules/no-unused-class': OFF,
         'react/prop-types': OFF,
         'react/display-name': OFF
       }

tailwind.js

@@ -0,0 +1,11 @@
+const {ERROR} = require('./config');
+
+module.exports = {
+  plugins: ['tailwindcss'],
+  rules: {
+    'tailwindcss/classnames-order': ERROR,
+    'tailwindcss/enforces-negative-arbitrary-values': ERROR,
+    'tailwindcss/enforces-shorthand': ERROR,
+    'tailwindcss/no-contradicting-classname': ERROR
+  }
+};

typescript.js

@@ -31,16 +31,26 @@ module.exports = Object.assign({}, javascript, {
         'no-shadow': OFF,
         // The TypeScript compiler takes care of this
         'import/no-unresolved': OFF,
+        'no-use-before-define': OFF,
         '@typescript-eslint/array-type': [ERROR, {default: 'generic'}],
         '@typescript-eslint/await-thenable': ERROR,
-        '@typescript-eslint/ban-ts-comment': OFF,
+        '@typescript-eslint/ban-ts-comment': [
+          ERROR,
+          {
+            'ts-expect-error': false, // This is sometimes necessary and a better alternative to ts-ignore
+            'ts-ignore': 'allow-with-description'
+          }
+        ],
         // Avoid declaring the implied return type for React components
         '@typescript-eslint/explicit-module-boundary-types': OFF,
         '@typescript-eslint/method-signature-style': [ERROR, 'method'],
         '@typescript-eslint/no-explicit-any': OFF,
         '@typescript-eslint/no-for-in-array': ERROR,
         '@typescript-eslint/no-inferrable-types': ERROR,
-        '@typescript-eslint/no-misused-promises': ERROR,
+        '@typescript-eslint/no-misused-promises': [
+          ERROR,
+          {checksVoidReturn: {attributes: false}}
+        ],
         // There are valid use cases for this
         // https://github.com/molindo/eslint-config-molindo/issues/83
         '@typescript-eslint/no-empty-interface': OFF,