Feat/required named effect rule (#16)

* chore: create empty new rule

* feat: implement the rule

* feat: export rule in plugin

* feat: add rule in recommended config

* feat: add example file for require-named-effect

* fix: fix errors from eslint on the rule

* fix: do not merge eslint config between eslint-plugin and example-app

* chore: add testing environment

* lint: lint docs

* chore: add helper for example incorrect rules

* docs: update README for creating new rule

* feat: require-named-effect is not recommended

---------

Co-authored-by: Alexis Delage <alexisd@bam.tech>

Author: P0labrD

.github/workflows/quality-eslint.yml

@@ -36,5 +36,8 @@ jobs:
       - name: Install dependencies
         run: yarn --frozen-lockfile
 
+      - name: Linter
+        run: yarn lint
+
       - name: Tests
         run: yarn test

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": { "source.fixAll": true },
   "eslint.workingDirectories": [
     "packages/eslint-plugin/example-app",
     "packages/eslint-plugin"

packages/eslint-plugin/.eslint-doc-generatorrc.js

@@ -0,0 +1,10 @@
+const prettier = require("prettier");
+const { prettier: prettierRC } = require("./package.json"); // or wherever your prettier config lies
+
+/** @type {import('eslint-doc-generator').GenerateOptions} */
+const config = {
+  postprocess: (content, path) =>
+    prettier.format(content, { ...prettierRC, parser: "markdown" }),
+};
+
+module.exports = config;

packages/eslint-plugin/.eslintrc.js

@@ -7,7 +7,27 @@ module.exports = {
     "plugin:eslint-plugin/recommended",
     "plugin:node/recommended",
   ],
+  rules: {
+    "eslint-plugin/require-meta-docs-description": [
+      2,
+      { pattern: "^(Enforce|Require|Disallow)" },
+    ],
+    "eslint-plugin/require-meta-docs-url": [
+      "error",
+      {
+        pattern:
+          "https://github.com/bamlab/react-native-project-config/tree/main/packages/eslint-plugin/docs/rules/{{name}}.md",
+      },
+    ],
+  },
   env: {
     node: true,
   },
+  overrides: [
+    {
+      files: ["tests/**/*.js"],
+      env: { mocha: true },
+    },
+  ],
+  ignorePatterns: ["example-app"],
 };

packages/eslint-plugin/CONTRIBUTING.md

@@ -12,18 +12,34 @@ Here is a small summary:
 
 ### Adding new rules
 
-Adding new rules is quite simple, you just have to modify `index.js` and add your rule to the `rules` object:
-
-```js
-module.exports = {
-  ...
-  rules: {
-    ...
-    "my-new-rule": "error",
-  },
-  ...
-}
-```
+Adding new rules is quite simple:
+
+1. Create a new rule from the template:
+
+   ```bash
+   cd eslint-plugin
+   yo eslint:rule
+   ```
+
+1. Add it to the default shared config:
+
+   ```js
+   // recommended.js
+   module.exports = {
+     ...
+     rules: {
+       ...
+       "@bam.tech/my-new-rule": "error",
+     },
+   }
+   ```
+
+1. Update the README and run the tests:
+   ```bash
+   yarn update:eslint-docs
+   yarn lint
+   yarn test
+   ```
 
 ### Extending new shareable configurations
 

packages/eslint-plugin/README.md

@@ -36,6 +36,16 @@ In your `.eslintrc` config file, extend the exported recommended configuration (
   ]
 ```
 
+## Rules implemented in this plugin
+
+<!-- begin auto-generated rules list -->
+
+| Name                                                       | Description                                            |
+| :--------------------------------------------------------- | :----------------------------------------------------- |
+| [require-named-effect](docs/rules/require-named-effect.md) | Enforces the use of named functions inside a useEffect |
+
+<!-- end auto-generated rules list -->
+
 ## How to customize?
 
 You can still customize your ESLint config by adding configurations, plugins and rules to your `.eslintrc` config file.

packages/eslint-plugin/docs/rules/require-named-effect.md

@@ -0,0 +1,40 @@
+# Enforces the use of named functions inside a useEffect (`@bam.tech/require-named-effect`)
+
+<!-- end auto-generated rule header -->
+
+Force to use named functions inside a useEffect instead of lambda functions.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+useEffect(() => {}, []);
+```
+
+```jsx
+useEffect(() => {
+  const t = 1;
+  disallowTwoThings(t);
+}, []);
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+useEffect(function namedFunction() {}, []);
+```
+
+```jsx
+useEffect(theNameOfAFunction(), []);
+```
+
+```jsx
+useEffect(() => theNameOfAFunction(), []);
+```
+
+```jsx
+useEffect(() => {
+  theOnlyChildIsAFunctionCall();
+}, []);
+```

packages/eslint-plugin/example-app/.eslintrc

@@ -1,9 +1,13 @@
 {
+  "root": true,
   "extends": "plugin:@bam.tech/recommended",
   "overrides": [
     {
       "files": ["*.test.tsx"],
       "extends": "plugin:@bam.tech/tests"
     }
-  ]
+  ],
+  "rules": {
+    "@bam.tech/require-named-effect": "error"
+  }
 }

packages/eslint-plugin/example-app/break-eslint-recommended-rules.js

@@ -1,3 +1,5 @@
+// Save without formatting: [⌘ + K] > [S]
+
 "use strict";
 
 console.log(

packages/eslint-plugin/example-app/break-jest-formatting-rules.test.tsx

@@ -1,3 +1,5 @@
+// Save without formatting: [⌘ + K] > [S]
+
 // This should trigger an error breaking eslint-jest-formatting rule:
 // jest-formatting/padding-around-all