fixup! [New] Symmetric useState hook variable names

Author: duncanbeevers

lib/rules/hook-use-state.js

@@ -19,16 +19,16 @@ module.exports = {
  description: 'Ensure symmetric naming of useState hook value and setter variables',
  category: 'Best Practices',
  recommended: false,
- url: docsUrl('hook-use-state')
+ url: docsUrl('hook-use-state'),
  },
  fixable: 'code',
  messages: {
- [USE_STATE_ERROR_MESSAGE]: 'setState call is not destructured into value + setter pair'
+ [USE_STATE_ERROR_MESSAGE]: 'setState call is not destructured into value + setter pair',
  },
  schema: [{
  type: 'object',
- additionalProperties: false
- }]
+ additionalProperties: false,
+ }],
  },
 
  create(context) {
@@ -63,7 +63,7 @@ module.exports = {
  );
 
  if (!isDestructuringDeclarator) {
- context.report({node, messageId: USE_STATE_ERROR_MESSAGE});
+ context.report({ node, messageId: USE_STATE_ERROR_MESSAGE });
  return;
  }
 
@@ -97,7 +97,7 @@ module.exports = {
  fix: valueVariableName ? (fixer) => fixer.replaceTextRange(
  [node.parent.id.range[0], node.parent.id.range[1]],
  `[${valueVariableName}, ${expectedSetterVariableName}]`
- ) : undefined
+ ) : undefined,
  });
  }
  },
@@ -118,7 +118,7 @@ module.exports = {
  reactUseStateLocalName = reactUseStateSpecifier
  ? reactUseStateSpecifier.local.name
  : undefined;
- }
+ },
  };
- }
+ },
 };

tests/lib/rules/hook-use-state.js

@@ -20,208 +20,206 @@ const parsers = require('../../helpers/parsers');
 const ruleTester = new RuleTester({
  parserOptions: {
  ecmaVersion: 2018,
- sourceType: 'module'
- }
+ sourceType: 'module',
+ },
 });
 
 const tests = {
- valid: [
+ valid: parsers.all([
  {
  code: `import { useState } from 'react';
- const [color, setColor] = useState()`
+ const [color, setColor] = useState()`,
  },
  {
  code: `import { useState } from 'react';
- const [color, setColor] = useState('#ffffff')`
+ const [color, setColor] = useState('#ffffff')`,
  },
  {
  code: `import { useState } from 'react';
- const [color, setColor] = React.useState()`
+ const [color, setColor] = React.useState()`,
  },
  {
  code: `import { useState } from 'react';
- const [color1, setColor1] = useState()`
+ const [color1, setColor1] = useState()`,
  },
  {
- code: 'const result = useState()'
+ code: 'const result = useState()',
  },
  {
- code: `import { useRef } from 'react';
- const result = useState()`
+ code: 'const [color, setFlavor] = useState()',
  },
  {
- code: 'const result = React.useState()'
+ code: `import { useRef } from 'react';
+ const result = useState()`,
  },
  {
- code: `import { useState } from 'react';
- const [color, setColor] = useState<string>()`,
- parser: parsers.TYPESCRIPT_ESLINT
+ code: 'const result = React.useState()',
  },
- {
- code: `import { useState } from 'react';
- const [color, setColor] = useState<string>('#ffffff')`,
- parser: parsers.TYPESCRIPT_ESLINT
- }
- ].concat(parsers.TS([
  {
  code: `import { useState } from 'react';
  const [color, setColor] = useState<string>()`,
- parser: parsers['@TYPESCRIPT_ESLINT']
+ features: ['ts'],
  },
  {
  code: `import { useState } from 'react';
  const [color, setColor] = useState<string>('#ffffff')`,
- parser: parsers['@TYPESCRIPT_ESLINT']
- }
- ])
- ),
- invalid: [
+ features: ['ts'],
+ },
+ ]),
+ invalid: parsers.all([
  {
  code: `import { useState } from 'react';
  useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import { useState as useStateAlternativeName } from 'react';
  useStateAlternativeName()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import React from 'react';
  const result = React.useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import ReactAlternative from 'react';
  ReactAlternative.useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import { useState } from 'react';
  const result = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import { useState } from 'react';
  const [, , extra1] = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import { useState } from 'react';
  const [, setColor] = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import { useState } from 'react';
  const { color } = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import { useState } from 'react';
  const [] = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import { useState } from 'react';
  const [, , , ,] = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import { useState } from 'react';
  const [color] = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
+ message: 'setState call is not destructured into value + setter pair',
  }],
  output: `import { useState } from 'react';
- const [color, setColor] = useState()`
+ const [color, setColor] = useState()`,
  },
  {
  code: `import { useState } from 'react';
  const [color, , extra1] = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
+ message: 'setState call is not destructured into value + setter pair',
  }],
  output: `import { useState } from 'react';
- const [color, setColor] = useState()`
+ const [color, setColor] = useState()`,
  },
  {
  code: `import { useState } from 'react';
  const [color, setColor, extra1, extra2, extra3] = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
+ message: 'setState call is not destructured into value + setter pair',
  }],
  output: `import { useState } from 'react';
- const [color, setColor] = useState()`
+ const [color, setColor] = useState()`,
  },
  {
  code: `import { useState } from 'react';
  const [, makeColor] = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }]
+ message: 'setState call is not destructured into value + setter pair',
+ }],
  },
  {
  code: `import { useState } from 'react';
  const [color, setFlavor, extraneous] = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
+ message: 'setState call is not destructured into value + setter pair',
  }],
  output: `import { useState } from 'react';
- const [color, setColor] = useState()`
+ const [color, setColor] = useState()`,
  },
  {
  code: `import { useState } from 'react';
  const [color, setFlavor] = useState()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
+ message: 'setState call is not destructured into value + setter pair',
  }],
  output: `import { useState } from 'react';
- const [color, setColor] = useState()`
+ const [color, setColor] = useState()`,
  },
  {
  code: `import { useState } from 'react';
  const [color, setFlavor] = useState<string>()`,
  errors: [{
- message: 'setState call is not destructured into value + setter pair'
+ message: 'setState call is not destructured into value + setter pair',
  }],
  output: `import { useState } from 'react';
  const [color, setColor] = useState<string>()`,
- parser: parsers.TYPESCRIPT_ESLINT
- }
- ].concat(
- parsers.TS([
- {
- code: `import { useState } from 'react';
- const [color, setFlavor] = useState<string>()`,
- errors: [{
- message: 'setState call is not destructured into value + setter pair'
- }],
- output: `import { useState } from 'react';
- const [color, setColor] = useState<string>()`,
- parser: parsers['@TYPESCRIPT_ESLINT']
- }
- ])
- )
+ features: ['ts'],
+ },
+ {
+ code: `import { useState } from 'react';
+ const [color, setFlavor] = useState<string>('#ffffff')`,
+ errors: [{
+ message: 'setState call is not destructured into value + setter pair',
+ }],
+ output: `import { useState } from 'react';
+ const [color, setColor] = useState<string>('#ffffff')`,
+ features: ['ts'],
+ },
+ {
+ code: `import React from 'react';
+ const [color, setFlavor] = React.useState<string>('#ffffff')`,
+ errors: [{
+ message: 'setState call is not destructured into value + setter pair',
+ }],
+ output: `import React from 'react';
+ const [color, setColor] = React.useState<string>('#ffffff')`,
+ features: ['ts'],
+ },
+ ]),
 };
 
 ruleTester.run('hook-set-state-names', rule, tests);