feat: improve eslint-config-bases (belgattitude#4123)

gchickma · Jul 23, 2023 · bf1db0e · bf1db0e
1 parent 98c2097
commit bf1db0e
Show file tree

Hide file tree

Showing 28 changed files with 268 additions and 233 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,5 +1,10 @@
-.yarn
-**/.next/**
-**/dist/**
-**/build/**
-**/tmp/**
+# prettier 3.0 adds .gitignore by default
+**/.yarn
+**/.next
+**/.out
+**/dist
+**/build
+**/.tmp
+**/.cache
+**/.turbo
+
diff --git a/apps/nextjs-app/.eslintrc.cjs b/apps/nextjs-app/.eslintrc.cjs
@@ -28,7 +28,7 @@ module.exports = {
     // Add specific rules for nextjs
     'plugin:@next/next/core-web-vitals',
     // Apply prettier and disable incompatible rules
-    '@your-org/eslint-config-bases/prettier',
+    '@your-org/eslint-config-bases/prettier-plugin',
   ],
   rules: {
     '@typescript-eslint/naming-convention': 'off',

diff --git a/apps/remix-app/.eslintrc.js b/apps/remix-app/.eslintrc.js
@@ -34,7 +34,7 @@ module.exports = {
     // Specific rules for remix
     '@remix-run/eslint-config',
     // Apply prettier and disable incompatible rules
-    '@your-org/eslint-config-bases/prettier',
+    '@your-org/eslint-config-bases/prettier-plugin',
   ],
   env: {
     browser: true,

diff --git a/apps/vite-app/.eslintrc.js b/apps/vite-app/.eslintrc.js
@@ -25,7 +25,7 @@ module.exports = {
     '@your-org/eslint-config-bases/react',
     '@your-org/eslint-config-bases/rtl',
     // Apply prettier and disable incompatible rules
-    '@your-org/eslint-config-bases/prettier',
+    '@your-org/eslint-config-bases/prettier-plugin',
   ],
   rules: {
     'jsx-a11y/anchor-is-valid': 'off',

diff --git a/packages/api-gateway/.eslintrc.js b/packages/api-gateway/.eslintrc.js
@@ -21,7 +21,7 @@ module.exports = {
     '@your-org/eslint-config-bases/typescript',
     '@your-org/eslint-config-bases/sonar',
     // Apply prettier and disable incompatible rules
-    '@your-org/eslint-config-bases/prettier',
+    '@your-org/eslint-config-bases/prettier-plugin',
   ],
   rules: {
     // optional overrides per project

diff --git a/packages/api-gateway/jest.config.js b/packages/api-gateway/jest.config.js
diff --git a/packages/api-gateway/package.json b/packages/api-gateway/package.json
@@ -25,7 +25,6 @@
     "clean": "rimraf ./dist ./coverage ./tsconfig.tsbuildinfo",
     "fix-all-files": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs --fix",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs --cache --cache-location ../../.cache/eslint/api-gateway.eslintcache",
-    "test": "jest --config jest.config.js --passWithNoTests",
     "typecheck": "tsc --project ./tsconfig.json --noEmit"
   },
   "dependencies": {
@@ -34,17 +33,14 @@
     "@graphql-mesh/runtime": "^0.95.3"
   },
   "devDependencies": {
-    "@types/jest": "29.5.3",
     "@types/node": "20.4.4",
     "@your-org/eslint-config-bases": "workspace:^",
     "cross-env": "7.0.3",
     "eslint": "8.45.0",
     "graphql": "16.7.1",
-    "jest": "29.6.1",
     "npm-run-all": "4.1.5",
     "prettier": "3.0.0",
     "rimraf": "5.0.1",
-    "ts-jest": "29.1.1",
     "tsup": "7.1.0",
     "typescript": "5.1.6"
   },

diff --git a/packages/common-i18n/.eslintrc.cjs b/packages/common-i18n/.eslintrc.cjs
@@ -17,7 +17,7 @@ module.exports = {
   extends: [
     '@your-org/eslint-config-bases/typescript',
     // Apply prettier and disable incompatible rules
-    '@your-org/eslint-config-bases/prettier',
+    '@your-org/eslint-config-bases/prettier-plugin',
   ],
   rules: {
     // optional overrides per project

diff --git a/packages/core-lib/.eslintrc.js b/packages/core-lib/.eslintrc.js
@@ -25,7 +25,7 @@ module.exports = {
     '@your-org/eslint-config-bases/rtl',
     '@your-org/eslint-config-bases/react',
     // Apply prettier and disable incompatible rules
-    '@your-org/eslint-config-bases/prettier',
+    '@your-org/eslint-config-bases/prettier-plugin',
   ],
   rules: {
     // optional overrides per project

diff --git a/packages/db-main-prisma/.eslintrc.cjs b/packages/db-main-prisma/.eslintrc.cjs
@@ -22,7 +22,7 @@ module.exports = {
     '@your-org/eslint-config-bases/sonar',
     '@your-org/eslint-config-bases/regexp',
     // Apply prettier and disable incompatible rules
-    '@your-org/eslint-config-bases/prettier',
+    '@your-org/eslint-config-bases/prettier-plugin',
   ],
   overrides: [
     // optional overrides per project file match

diff --git a/packages/eslint-config-bases/.eslintrc.js b/packages/eslint-config-bases/.eslintrc.js
@@ -3,5 +3,5 @@ const { getDefaultIgnorePatterns } = require('./src/helpers');
 module.exports = {
   root: true,
   ignorePatterns: [...getDefaultIgnorePatterns()],
-  extends: ['./src/bases/typescript', './src/bases/prettier'],
+  extends: ['./src/bases/typescript', './src/bases/prettier-plugin'],
 };
diff --git a/packages/eslint-config-bases/README.md b/packages/eslint-config-bases/README.md
@@ -9,38 +9,41 @@ packages that lives in a [monorepo](https://github.com/belgattitude/nextjs-monor
 
 ## Features
 
-## Features
-
 - **Monorepo friendly:** Each workspace can have its own config.
 - **Composable:** Compose your workspace eslint config from pre-defined bases.
 - **Peace of mind:** Plugins does not need to be installed per workspaces, thx to [@rushstack/eslint-patch](https://www.npmjs.com/package/@rushstack/eslint-patch).
-- **Extensible:** Easily add additional plugins per workspaces (ie: nextjs, remix...)
-- **Performance:** Plugins enabled on file conventions patterns to increase perf.
+- **Performance!:** Plugins enabled on file conventions patterns to increase perf.
 
 ## Install
 
 Add the following devDependencies to workspace (apps/packages in monorepo) or main project package.json.
 
 ```bash
-$ yarn add --dev eslint
-$ yarn add --dev @your-org/eslint-config-bases:"workspace:^"
+$ yarn add --dev eslint @your-org/eslint-config-bases
 ```
 
-> **Tip** the [workspace:^](https://yarnpkg.com/features/workspaces#workspace-ranges-workspace) is supported by yarn and pnpm.
+> PS: To keep the size low, if you use the following plugins:
+>
+> - **graphql**: `yarn add --dev @graphql-eslint/eslint-plugin`
+> - **mdx**: `yarn add --dev eslint-plugin-mdx`.
+> - **tailwind**: `yarn add --dev eslint-plugin-tailwindcss`.
+>   In one line
+>
+> ```bash
+> yarn add
+> ```
 
 ## Usage
 
-In your app or package, create an `./apps/my-app/.eslintrc.js` file that extends any of the
-existing base configs. For example:
+Create an `./apps/my-app/.eslintrc.js` or `./apps/my-app/.eslintrc.cjs`
+file that extends any of the existing base configs. For example:
 
 ```javascript
-// Workaround for https://github.com/eslint/eslint/issues/3458 (re-export of @rushstack/eslint-patch)
+// next line only required if you're using a monorepo
 require("@your-org/eslint-config-bases/patch/modern-module-resolution");
 
 module.exports = {
-  // Be sure to set root to true in monorepo.
   root: true,
-  // Will help typescript extended rules.
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: "tsconfig.json",
@@ -51,68 +54,108 @@ module.exports = {
     "@your-org/eslint-config-bases/sonar",
     "@your-org/eslint-config-bases/regexp",
     "@your-org/eslint-config-bases/react",
+    "@your-org/eslint-config-bases/react-query",
     "@your-org/eslint-config-bases/jest",
     "@your-org/eslint-config-bases/rtl",
-    "@your-org/eslint-config-bases/storybook",
-    "@your-org/eslint-config-bases/playwright",
+
+    // "@your-org/eslint-config-bases/mdx",
+
+    // "@your-org/eslint-config-bases/graphql-schema",
+    // "@your-org/eslint-config-bases/storybook",
+    // "@your-org/eslint-config-bases/playwright",
 
     // Add specific rules for your framework if needed.
     // ie:
-    // - nextjs: 'plugin:@next/next/core-web-vitals',
+    // - nextjs: 'next/core-web-vitals',
     // - remix:  '@remix-run/eslint-config',
     // ...
 
-    // Post configure the prettier base so there won't be
-    // any conficts between eslint / prettier
-    "@your-org/eslint-config-bases/prettier",
+    // Post configure the prettier base and run prettier
+    // without conflicts thx to eslint-plugin-prettier
+    "@your-org/eslint-config-bases/prettier-plugin",
+    // Alternatively to the above if you're already running prettier
+    // we can get a speed up by using on eslint-prettier-config
+    // "@your-org/eslint-config-bases/prettier-config",
   ],
   rules: {
     // Specific global rules for your app or package
+    // Might help is next eslint plugin does not locate pages
+    // https://nextjs.org/docs/messages/no-html-link-for-pages#pagesdir
+    // '@next/next/no-html-link-for-pages': ['error', `${__dirname}/src/pages`],
   },
   overrides: [
     // Specific file rules for your app or package
   ],
 };
 ```
 
-> **Tip:** "@your-org/eslint-config-bases/prettier" must be set at the end to disable any
-> conflicting rules.
+> **Tip:**
+>
+> - **Prettier**: `@your-org/eslint-config-bases/prettier-plugin` and `@your-org/eslint-config-bases/prettier-config` are
+>   mutually exclusives. Choose one. The `prettier-config` suppose that you run prettier independently. The `prettier-plugin`
+>   will run prettier for you. Easiest the `prettier-plugin`, fastest `prettier-config` (this mostly depends
+>   if you set up and persist caches as well)
+> - **Performance**: Some rules are known to be slow (ie: `import/namespace`...). Slowest identified rules are disabled depending
+>   on context (ie: `*.test.tsx?` might not need everything). Depending on project
+>   it's possible to disable entirely some slow rules (ie: `'import/namespace': 'off'`). A good tip
+>   run eslint with the `TIMING=1` to identify slow rules.
 
 ## Bases
 
 You can find the bases in [./src/bases](./src/bases).
 
-| Base                                    | Match convention                  | Scope                                                           |
-| :-------------------------------------- | :-------------------------------- | :-------------------------------------------------------------- |
-| [typescript](./src/bases/typescript.js) | _all_                             | Naming conventions, consistent imports, import sorting...       |
-| [sonar](./src/bases/sonar.js)           | `*.{js,jsx,ts,tsx}`               | Keep levels of code complexity sane. (excl test and stories)    |
-| [regexp](./src/bases/regexp.js)         | `*.{js,jsx,jsx,tsx}`              | Keep regexp consistent and safer.                               |
-| [react](./src/bases/react.js)           | `*.{jsx,tsx}`                     | Recommendations for react, react-hooks and jsx projects.        |
-| [jest](./src/bases/jest.js)             | `**/?(*.)+(test).{js,jsx,ts,tsx}` | Catch inconsistencies or error in jest tests.                   |
-| [rtl](./src/bases/rtl.js)               | `**/?(*.)+(test).{js,jsx,ts,tsx}` | Potential errors / deprecations in react-testing-library tests. |
-| [storybook](./src/bases/storybook.js)   | `*.stories.{ts,tsx,mdx}`          | Potential errors / deprecations in stories.                     |
-| [playwright](./src/bases/playwright.js) | `**/e2e/**/*.test.{js,ts}`        | Post configure eslint for prettier compatibility.               |
-| [prettier](./src/bases/prettier.js)     | _all_                             | Post configure eslint for prettier compatibility.               |
+| Base                                              | Match convention                  | Scope                                                           |
+| :------------------------------------------------ | :-------------------------------- | :-------------------------------------------------------------- |
+| [typescript](./src/bases/typescript.js)           | _all_                             | Naming conventions, consistent imports, import sorting...       |
+| [sonar](./src/bases/sonar.js)                     | `*.{js,jsx,ts,tsx}`               | Keep levels of code complexity sane. (excl test and stories)    |
+| [regexp](./src/bases/regexp.js)                   | `*.{js,jsx,jsx,tsx}`              | Keep regexp consistent and safer.                               |
+| [react](./src/bases/react.js)                     | `*.{jsx,tsx}`                     | Recommendations for react, react-hooks and jsx projects.        |
+| [react-query](./src/bases/react-query.js)         | `**/?(*.)+(test).{js,jsx,ts,tsx}` | Enforce "recommended" react-query usage.                        |
+| [jest](./src/bases/jest.js)                       | `**/?(*.)+(test).{js,jsx,ts,tsx}` | Catch inconsistencies or error in jest tests.                   |
+| [rtl](./src/bases/rtl.js)                         | `**/?(*.)+(test).{js,jsx,ts,tsx}` | Potential errors / deprecations in react-testing-library tests. |
+| [graphql-schema](./src/bases/graphql-schema.js)   | `*.graphql`                       | Ensure validity of graphql schema files.                        |
+| [mdx](./src/bases/mdx.js)                         | _all_                             | Mdx validation                                                  |
+| [storybook](./src/bases/storybook.js)             | `*.stories.{ts,tsx,mdx}`          | Potential errors / deprecations in stories.                     |
+| [playwright](./src/bases/playwright.js)           | `**/e2e/**/*.test.{js,ts}`        | Keep "recommended" playwright usage.                            |
+| [prettier-plugin](./src/bases/prettier-plugin.js) | _all_                             | Post configure eslint for prettier compatibility.               |
 
 > **Notes**:
 >
 > - The order is important. Some bases will disable or tune previously defined
 >   rules. For example the [react base](./src/bases/react.js) will tune the naming conventions
 >   for function components and increase recommended cognitive complexity. The [typescript base](./src/bases/typescript.js)
 >   will also relax conventions for javascript files.
->
 > - Based on filename conventions some rules are relaxed or disabled to avoid false positives and
 >   keep a good level of performance. For example the [sonar base](./src/bases/sonar.js) won't run on
 >   test and storybook files. If you work on different conventions the patterns must be updated.
 
+## Cyclic deps
+
+Due to performance considerations the [import/no-cycle](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md) isn't enabled by default. This rule
+can prevent subtle and hard to debug bugs. Depending on the project you can enable it either
+by setting and env variable `ESLINT_IMPORT_NO_CYCLE=true yarn lint` (will default to `import/no-cycle: 2`) or by adding it
+to the extended rules.
+
 ## Prettier integration
 
-To prevent conflicts between prettier and eslint, you must re-export the prettier base from `@your-org/eslint-config-bases`.
+Two ways to work with prettier.
+
+- `@your-org/eslint-config-bases/prettier-plugin` - eslint will run prettier under the hood
+- `@your-org/eslint-config-bases/prettier-config` - eslint will just disable some conflicting rules (so you'll need to run prettier after)
+
+The first method is recommended for simplicity. For best perf use the cache option to run eslint.
+
+Tune the behaviour by creating a config in ` .prettierrc.js`
 
 ```javascript
+// @ts-check
 const { getPrettierConfig } = require("@your-org/eslint-config-bases/helpers");
+
+/**
+ * @type {import('prettier').Config}
+ */
 module.exports = {
-  ...prettierConfig,
+  ...getPrettierConfig(),
   overrides: [
     // whatever you need
   ],
@@ -167,6 +210,21 @@ Generic typescript project, mostly based on
 | :------------------------------------------------------------------------------------ | :------ |
 | [eslint-plugin-regexp/recommended](https://github.com/ota-meshi/eslint-plugin-regexp) |         |
 
+### Mdx
+
+To tune the behaviour, you can add setting in the top level config
+
+```js
+module.exports = {
+  settings: {
+    "mdx/code-blocks": true,
+    // optional, if you want to disable language mapper, set it to `false`
+    // if you want to override the default language mapper inside, you can provide your own
+    "mdx/language-mapper": {},
+  },
+};
+```
+
 ### Etc
 
 ...