svengreb · arcticicestudio · Aug 20, 2019 · Aug 20, 2019
diff --git a/packages/@arcticicestudio/eslint-config/README.md b/packages/@arcticicestudio/eslint-config/README.md
@@ -8,7 +8,7 @@
 
 <p align="center"><a href="https://circleci.com/gh/arcticicestudio/styleguide-javascript" target="_blank"><img src="https://img.shields.io/circleci/project/github/arcticicestudio/styleguide-javascript/develop.svg?style=flat-square&label=Build&logo=circleci&logoColor=eceff4&colorA=4c566a"/></a></p>
 
-This project implements the rules of the [“Arctic Ice Studio JavaScript Style Guide”][gh-stg-repo] as an extensible shared [ESLint][] configuration including plugin support for [React][gh-esl-p-react] and [JSX A11Y][gh-esl-p-jsx-a11y] as well as compatibility integrations for other projects like [Prettier][].
+This project implements the rules of the [“Arctic Ice Studio JavaScript Style Guide”][gh-stg-repo] as an extensible shared [ESLint][] configuration including plugin support for [React][gh-esl-p-react] with [Hooks][gh-esl-p-react-hooks], [JSX A11Y][gh-esl-p-jsx-a11y] as well as compatibility integrations for other projects like [Prettier][].
 
 ## Getting Started
 
@@ -89,7 +89,11 @@ module.exports = {
     /* Provides all base rules and specific rules for "React" and "JSX A11Y". */
     "@arcticicestudio/eslint-config"
     /*
-     * Provides support for projects using Prettier.
+     * Optional entry point to enable support for projects using React Hooks.
+     */
+    "@arcticicestudio/eslint-config/react-hooks",
+    /*
+     * Optional entry point to enable support for projects using Prettier.
      * Note that this must always be placed after the `@arcticicestudio/eslint-config` preset to take precedence,
      * otherwise it won't prevent errors due to useless and possibly conflicting rules!
      */
@@ -103,7 +107,8 @@ module.exports = {
 This package provides multiple entry points that can be composed especially for the projects they are used in:
 
 - `@arcticicestudio/eslint-config` — The default entry point that includes the base rules of the [@arcticicestudio/eslint-config-base][gh-t-pkg-esl-base] package as well as additional rules from the [eslint-plugin-react][gh-esl-p-react] and [eslint-plugin-jsx-a11y][gh-esl-p-jsx-a11y] packages.
-- `@arcticicestudio/eslint-config/prettier` — Entry point with support for [Prettier][] through [eslint-plugin-prettier][gh-esl-p-prettier] and the officially recommended Prettier ESLint configuration through the [eslint-config-prettier][gh-esl-c-prettier] package. It disables possibly conflicting rules and rules that definitely not needed when using _Prettier_ for code formatting. There is also additional support when _Prettier_ is used for React based projects by extending the special `prettier/react` configuration that also disables specific `react/` and JSX rules. Note that this configuration **should always be placed after `@arcticicestudio/eslint-config`** in order to override conflicting rules, otherwise the `@arcticicestudio/eslint-config` preset will take precedence leaving conflicting rules untouched!
+- `@arcticicestudio/eslint-config/prettier` — Entry point to enable support for [Prettier][] through [eslint-plugin-prettier][gh-esl-p-prettier] and the officially recommended Prettier ESLint configuration using the [eslint-config-prettier][gh-esl-c-prettier] package. It disables possibly conflicting rules and rules that definitely not needed when using _Prettier_ for code formatting. There is also additional support when _Prettier_ is used for React based projects by extending the special `prettier/react` configuration that also disables specific `react/` and JSX rules. Note that this configuration **should always be placed after `@arcticicestudio/eslint-config`** in order to override conflicting rules, otherwise the `@arcticicestudio/eslint-config` preset will take precedence leaving conflicting rules untouched!
+- `@arcticicestudio/eslint-config/react-hooks` — Entry point to enable support for [React _Hooks_][react-d-hooks] through [eslint-plugin-react-hooks][gh-esl-p-react-hooks].
 
 ## Contributing
 
@@ -122,6 +127,7 @@ Please read the [contribution guidelines][gh-stg-b-readme#contrib] of the [“Ar
 [gh-esl-p-import]: https://github.com/benmosher/eslint-plugin-import
 [gh-esl-p-jsx-a11y]: https://github.com/evcohen/eslint-plugin-jsx-a11y
 [gh-esl-p-prettier]: https://github.com/prettier/eslint-plugin-prettier
+[gh-esl-p-react-hooks]: https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
 [gh-esl-p-react]: https://github.com/yannickcr/eslint-plugin-react
 [gh-eslint]: https://github.com/eslint/eslint
 [gh-prettier]: https://github.com/prettier/prettier
@@ -134,4 +140,5 @@ Please read the [contribution guidelines][gh-stg-b-readme#contrib] of the [“Ar
 [npm-npx]: https://www.npmjs.com/package/npx
 [npm]: https://npmjs.com
 [prettier]: https://prettier.io
+[react-d-hooks]: https://reactjs.org/docs/hooks-intro.html
 [yarn]: https://yarnpkg.com
diff --git a/packages/@arcticicestudio/eslint-config/package.json b/packages/@arcticicestudio/eslint-config/package.json
@@ -38,24 +38,27 @@
     "test:unused-rules": "eslint-find-rules --unused --deprecated --no-error"
   },
   "dependencies": {
-    "@arcticicestudio/eslint-config-base": ">=0.7.0 <1.0.0",
-    "eslint-config-prettier": "6.0.0"
+    "@arcticicestudio/eslint-config-base": ">=0.7.0 <1.0.0"
   },
   "devDependencies": {
     "eslint": "^6.2.0",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-find-rules": "3.4.0",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "prettier": "^1.18.2"
   },
   "peerDependencies": {
     "eslint": "^6.2.0",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "prettier": "^1.18.2"
   }
 }
diff --git a/packages/@arcticicestudio/eslint-config/react-hooks.js b/packages/@arcticicestudio/eslint-config/react-hooks.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Arctic Ice Studio ESLint Configuration
+ * Repository: https://github.com/arcticicestudio/styleguide-javascript
+ * License:    MIT
+ */
+
+/**
+ * Entry point for the React Hooks plugin integration.
+ *
+ * @since 0.8.0
+ * @see https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
+ * @see https://reactjs.org/docs/hooks-rules.html
+ * @see https://reactjs.org/docs/hooks-intro.html
+ */
+module.exports = {
+  extends: ["./rules/react-hooks"].map(require.resolve)
+};
diff --git a/packages/@arcticicestudio/eslint-config/rules/react-hooks/index.js b/packages/@arcticicestudio/eslint-config/rules/react-hooks/index.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Arctic Ice Studio ESLint Configuration
+ * Repository: https://github.com/arcticicestudio/styleguide-javascript
+ * License:    MIT
+ */
+
+/**
+ * React Hook plugin rules.
+ * @since 0.8.0
+ * @see https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
+ * @see https://reactjs.org/docs/hooks-rules.html
+ * @see https://reactjs.org/docs/hooks-intro.html
+ */
+module.exports = {
+  plugins: ["react-hooks"],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  rules: {
+    /**
+     * Enforce Rules of Hooks.
+     * @see https://reactjs.org/docs/hooks-rules.html
+     * @see https://github.com/facebook/react/blob/master/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+     */
+    "react-hooks/rules-of-hooks": "error",
+    /**
+     * EVerify the list of the dependencies for Hooks like `useEffect` and similar.
+     * @see https://github.com/facebook/react/blob/master/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+     */
+    "react-hooks/exhaustive-deps": "error"
+  }
+};
diff --git a/packages/@arcticicestudio/eslint-config/rules/react/index.js b/packages/@arcticicestudio/eslint-config/rules/react/index.js
@@ -89,7 +89,7 @@ module.exports = {
      * Prevent missing `displayName` in a React component definition.
      * @see https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
      */
-    "react/display-name": ["warn", { ignoreTranspilerName: false }],
+    "react/display-name": ["off", { ignoreTranspilerName: false }],
     /**
      * Forbid certain props on components.
      * @see https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md

diff --git a/packages/@arcticicestudio/eslint-config/rules/react/jsx.js b/packages/@arcticicestudio/eslint-config/rules/react/jsx.js
@@ -118,8 +118,10 @@ module.exports = {
     "react/jsx-no-bind": [
       "error",
       {
+        ignoreDOMComponents: true,
         ignoreRefs: true,
-        allowArrowFunctions: false,
+        allowArrowFunctions: true,
+        allowFunctions: false,
         allowBind: false
       }
     ],

diff --git a/yarn.lock b/yarn.lock
@@ -1255,10 +1255,10 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-[email protected]:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz#f429a53bde9fc7660e6353910fd996d6284d3c25"
-  integrity sha512-vDrcCFE3+2ixNT5H83g28bO/uYAwibJxerXPj+E7op4qzBCsAV36QfvdAyVOoNxKAH2Os/e01T/2x++V0LPukA==
+eslint-config-prettier@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.1.0.tgz#e6f678ba367fbd1273998d5510f76f004e9dce7b"
+  integrity sha512-k9fny9sPjIBQ2ftFTesJV21Rg4R/7a7t7LCtZVrYQiHEp8Nnuk3EGaDmsKSAnsPj0BYcgB2zxzHa2NTkIxcOLg==
   dependencies:
     get-stdin "^6.0.0"
 
@@ -1330,6 +1330,11 @@ eslint-plugin-prettier@^3.1.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-react-hooks@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
+  integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==
+
 eslint-plugin-react@^7.14.3:
   version "7.14.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz#911030dd7e98ba49e1b2208599571846a66bdf13"