chore: custom lint rules (#18206)

.eslintrc.js

@@ -18,6 +18,12 @@ module.exports = {
         react: {
             version: 'detect',
         },
+        'import/resolver': {
+            node: {
+                paths: ['eslint-rules'], // Add the directory containing your custom rules
+                extensions: ['.js', '.jsx', '.ts', '.tsx'], // Ensure ESLint resolves both JS and TS files
+            },
+        },
     },
     extends: [
         'eslint:recommended',
@@ -37,7 +43,7 @@ module.exports = {
         ecmaVersion: 2018,
         sourceType: 'module',
     },
-    plugins: ['prettier', 'react', 'cypress', '@typescript-eslint', 'no-only-tests', 'jest', 'compat'],
+    plugins: ['prettier', 'react', 'cypress', '@typescript-eslint', 'no-only-tests', 'jest', 'compat', 'posthog'],
     rules: {
         'no-console': ['error', { allow: ['warn', 'error'] }],
         'no-debugger': 'error',
@@ -91,7 +97,7 @@ module.exports = {
                 ],
             },
         ],
-        'react/forbid-elements': [
+        'posthog/warn-elements': [
             1,
             {
                 forbid: [
@@ -236,6 +242,16 @@ module.exports = {
                 '@typescript-eslint/no-var-requires': 'off',
             },
         },
+        {
+            files: 'eslint-rules/**/*',
+            extends: ['eslint:recommended'],
+            rules: {
+                '@typescript-eslint/no-var-requires': 'off',
+            },
+            env: {
+                node: true,
+            },
+        },
     ],
     reportUnusedDisableDirectives: true,
 }

eslint-rules/README.md

@@ -0,0 +1,3 @@
+# PostHog Custom ESLint rules
+
+This package contains custom ESLint rules for PostHog's codebase.

eslint-rules/index.js

@@ -0,0 +1,10 @@
+const { readdirSync } = require('fs')
+const { basename } = require('path')
+
+const ruleFiles = readdirSync('eslint-rules').filter(
+    (file) => file.endsWith('.js') && file !== 'index.js' && !file.endsWith('test.js')
+)
+
+const rules = Object.fromEntries(ruleFiles.map((file) => [basename(file, '.js'), require('./' + file)]))
+
+module.exports = { rules }

eslint-rules/warn-elements.js

@@ -0,0 +1,3 @@
+const { rules } = require('eslint-plugin-react')
+
+module.exports = rules['forbid-elements']

frontend/src/lib/components/PayGateMini/PayGateMini.tsx

@@ -120,12 +120,12 @@ export function PayGateMini({
             <div className="PayGateMini__icon">{featureSummary.icon || <IconPremium />}</div>
             <div className="PayGateMini__description">{featureSummary.description}</div>
             <div className="PayGateMini__cta">
-                Subscribe to gain {featureSummary.umbrella}.
+                Subscribe to gain {featureSummary.umbrella}.
                 {featureSummary.docsHref && (
                     <>
                         {' '}
                         <a href={featureSummary.docsHref} target="_blank" rel="noopener noreferrer">
-                            Learn more in PostHog Docs.
+                            Learn more in PostHog Docs.
                         </a>
                     </>
                 )}

package.json

@@ -248,6 +248,7 @@
         "eslint-plugin-eslint-comments": "^3.2.0",
         "eslint-plugin-jest": "^27.4.3",
         "eslint-plugin-no-only-tests": "^3.1.0",
+        "eslint-plugin-posthog": "link:./eslint-rules",
         "eslint-plugin-prettier": "^5.0.1",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-storybook": "^0.6.15",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
@@ -546,6 +546,9 @@ devDependencies:
   eslint-plugin-no-only-tests:
     specifier: ^3.1.0
     version: 3.1.0
+  eslint-plugin-posthog:
+    specifier: link:./eslint-rules
+    version: link:eslint-rules
   eslint-plugin-prettier:
     specifier: ^5.0.1
     version: 5.0.1(eslint-config-prettier@9.0.0)(eslint@8.52.0)(prettier@2.8.8)