Merge pull request #1086 from votingworks/style/lint/enforce-and-fix-…

…gts-no-dollar-sign-names

style(lint): enforce & fix `gts-no-dollar-sign-names`

libs/eslint-plugin-vx/docs/rules/gts-no-dollar-sign-names.md

@@ -0,0 +1,20 @@
+# Disallows use of $ in identifiers, except when aligning with naming conventions for third party frameworks. (`vx/gts-no-dollar-sign-names`)
+
+This rule is from
+[Google TypeScript Style Guide section "Identifiers"](https://google.github.io/styleguide/tsguide.html#identifiers):
+
+> Identifiers should not generally use `$`, except when aligning with naming conventions for third party frameworks.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```ts
+const $button = useRef<HTMLButtonElement>(null)
+```
+
+Examples of **correct** code for this rule:
+
+```ts
+const buttonRef = useRef<HTMLButtonElement>(null)
+```

libs/eslint-plugin-vx/src/configs/recommended.ts

@@ -37,6 +37,7 @@ export = {
   rules: {
     'vx/gts-direct-module-export-access-only': 'error',
     'vx/gts-no-array-constructor': 'error',
+    'vx/gts-no-dollar-sign-names': 'error',
     'vx/gts-no-foreach': 'error',
     'vx/gts-no-import-export-type': ['error', { allowReexport: true }],
     'vx/gts-no-private-fields': 'error',

libs/eslint-plugin-vx/src/rules/gts-no-dollar-sign-names.ts

@@ -0,0 +1,45 @@
+import { TSESTree } from '@typescript-eslint/experimental-utils'
+import { createRule } from '../util'
+
+export default createRule({
+  name: 'gts-no-dollar-sign-names',
+  meta: {
+    docs: {
+      description:
+        'Disallows use of $ in identifiers, except when aligning with naming conventions for third party frameworks.',
+      category: 'Best Practices',
+      recommended: 'error',
+      suggestion: false,
+      requiresTypeChecking: false,
+    },
+    messages: {
+      noDollarSign: `Do not use $ in names`,
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allowedNames: { type: 'array', items: { type: 'string' } },
+        },
+        additionalProperties: false,
+      },
+    ],
+    type: 'problem',
+  },
+  defaultOptions: [{ allowedNames: [] as string[] }],
+
+  create(context) {
+    const { allowedNames = [] } = context.options[0] ?? {}
+
+    return {
+      Identifier(node: TSESTree.Identifier): void {
+        if (node.name.includes('$') && !allowedNames.includes(node.name)) {
+          context.report({
+            messageId: 'noDollarSign',
+            node,
+          })
+        }
+      },
+    }
+  },
+})

libs/eslint-plugin-vx/src/rules/index.ts

@@ -1,6 +1,7 @@
 import { TSESLint } from '@typescript-eslint/experimental-utils'
 import gtsDirectModuleExportAccessOnly from './gts-direct-module-export-access-only'
 import gtsNoArrayConstructor from './gts-no-array-constructor'
+import gtsNoDollarSignNames from './gts-no-dollar-sign-names'
 import gtsNoForeach from './gts-no-foreach'
 import gtsNoImportExportType from './gts-no-import-export-type'
 import gtsNoPrivateFields from './gts-no-private-fields'
@@ -13,6 +14,7 @@ import noFloatingVoids from './no-floating-results'
 export default {
   'gts-direct-module-export-access-only': gtsDirectModuleExportAccessOnly,
   'gts-no-array-constructor': gtsNoArrayConstructor,
+  'gts-no-dollar-sign-names': gtsNoDollarSignNames,
   'gts-no-foreach': gtsNoForeach,
   'gts-no-import-export-type': gtsNoImportExportType,
   'gts-no-private-fields': gtsNoPrivateFields,

libs/eslint-plugin-vx/tests/rules/gts-no-dollar-sign-names.test.ts

@@ -0,0 +1,46 @@
+import { ESLintUtils } from '@typescript-eslint/experimental-utils'
+import { join } from 'path'
+import rule from '../../src/rules/gts-no-dollar-sign-names'
+
+const ruleTester = new ESLintUtils.RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    tsconfigRootDir: join(__dirname, '../fixtures'),
+    project: './tsconfig.json',
+  },
+  parser: '@typescript-eslint/parser',
+})
+
+ruleTester.run('gts-no-dollar-sign-names', rule, {
+  valid: [
+    { code: `abc` },
+    { code: `'$abc'` },
+    {
+      code: `$0`,
+      options: [{ allowedNames: ['$0'] }],
+    },
+  ],
+  invalid: [
+    {
+      code: '$abc',
+      errors: [{ messageId: 'noDollarSign', line: 1 }],
+    },
+    {
+      code: '$abc()',
+      errors: [{ messageId: 'noDollarSign', line: 1 }],
+    },
+    {
+      // Do we ever want to specifically allow jQuery?
+      code: `const $button = $('.button')`,
+      errors: [
+        { messageId: 'noDollarSign', line: 1 },
+        { messageId: 'noDollarSign', line: 1 },
+      ],
+    },
+    {
+      // Do we ever want to specifically allow RxJS?
+      code: 'device$.subscribe()',
+      errors: [{ messageId: 'noDollarSign', line: 1 }],
+    },
+  ],
+})

libs/hmpb-interpreter/.eslintrc

@@ -1,10 +1,10 @@
 {
-  "extends": [
-    "plugin:vx/recommended"
-  ],
+  "extends": ["plugin:vx/recommended"],
   "rules": {
     "camelcase": ["error", { "allow": ["matrix_t", "^.+_\\d+"] }],
     "new-cap": ["error", { "newIsCapExceptionPattern": "^jsfeat\\.." }],
-    "no-bitwise": "off"
+    "no-bitwise": "off",
+
+    "vx/gts-no-dollar-sign-names": ["error", { "allowedNames": ["$0"] }]
   }
 }