UNPKG

eslint-plugin-reblend

Version:

Reblend specific linting rules for ESLint

76 lines (58 loc) • 2.08 kB
# Ensure destructuring and symmetric naming of useState hook value and setter variables (`reblend/hook-use-state`) šŸ’” This rule is manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions). <!-- end auto-generated rule header --> šŸ’” This rule provides editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions). ## Rule Details This rule checks whether the value and setter variables destructured from a `Reblend.useState()` call are named symmetrically. Examples of **incorrect** code for this rule: ```js import Reblend from 'reblend'; export default function useColor() { // useState call is not destructured into value + setter pair const useStateResult = Reblend.useState(); return useStateResult; } ``` ```js import Reblend from 'reblend'; export default function useColor() { // useState call is destructured into value + setter pair, but identifier // names do not follow the [thing, setThing] naming convention const [color, updateColor] = Reblend.useState(); return [color, updateColor]; } ``` Examples of **correct** code for this rule: ```js import Reblend from 'reblend'; export default function useColor() { // useState call is destructured into value + setter pair whose identifiers // follow the [thing, setThing] naming convention const [color, setColor] = Reblend.useState(); return [color, setColor]; } ``` ```js import Reblend from 'reblend'; export default function useColor() { // useState result is directly returned return Reblend.useState(); } ``` ## Rule Options ```js ... "reblend/hook-use-state": [<enabled>, { "allowDestructuredState": <boolean> }] ... ``` ### `allowDestructuredState` When `true` the rule will ignore the name of the destructured value. Examples of **correct** code for this rule, when configured with `{ "allowDestructuredState": true }`: ```jsx import Reblend from 'reblend'; const [{ foo, bar, baz }, setFooBarBaz] = Reblend.useState({ foo: 'bbb', bar: 'aaa', baz: 'qqq', }); ```