TCA-647 #comment This commit updates rules so that we can remove tslint #time 30m

Author: brooketopcoder

.circleci/config.yml

@@ -41,10 +41,10 @@ save_cache_settings: &save_cache_settings
     paths:
       - node_modules
 
-running_yarn_tslint: &running_yarn_tslint
-    name: Running Yarn tslint
+running_yarn_eslint: &running_yarn_eslint
+    name: Running Yarn eslint
     command: |
-      yarn add tslint -g
+      yarn add eslint -g
       yarn lint
 
 running_yarn_build: &running_yarn_build
@@ -81,7 +81,7 @@ lint_steps: &lint_steps
     # Initialization.
     - checkout
     - setup_remote_docker
-    - run: *running_yarn_tslint
+    - run: *running_yarn_eslint
 
 build_steps: &build_steps
     # Initialization.
@@ -239,4 +239,4 @@ workflows:
                 - master
 
       - test-dev:
-          context : org-global
+          context : org-global

README.md

@@ -190,10 +190,12 @@ Each [Tool](#tools) can have its own setup requirements. Please see each tool's
 | `yarn start:<dev>`    | Serve dev mode build with dev's personal config |
 | `yarn build`          | Build dev mode build with the default config and outputs static files in /builds |
 | `yarn build:prod`     | Build prod mode build with the prod config and outputs static files in /builds |
-| `yarn lint`           | Run tslint against ts/x files and outputs report |
-| `yarn lint:fix`       | Run tslint against ts/x files, fixes auto-fixable issues, and  outputs report |
-| `yarn eslint`         | Run eslint against js/x files and outputs report |
-| `yarn eslint:fix`     | Run eslint against js/x files, fixes auto-fixable issues, and  outputs report |
+| `yarn lint:ts`        | Run eslint against ts/x files and outputs report |
+| `yarn lint:ts:fix`    | Run eslint against ts/x files, fixes auto-fixable issues, and  outputs report |
+| `yarn lint:js`        | Run eslint against js/x files and outputs report |
+| `yarn lint:js:fix`    | Run eslint against js/x files, fixes auto-fixable issues, and  outputs report |
+| `yarn lint`           | Run eslint against js/x and ts/x files and outputs report |
+| `yarn lint:fix`       | Run eslint against js/x and ts/x files, fixes auto-fixable issues, and  outputs report |
 | `yarn test`           | Run unit tests, watching for changes and re-running per your specifications |             
 | `yarn test:no-watch`  | Run unit tests once, without watching for changes or re-running |
 | `yarn cy:run`         | Run e2e tests once in local command with the site is running    |
@@ -370,11 +372,11 @@ The PlatformRoute model has several useful options:
 ## Linting
 
 ### Rules
-While [TSLint](https://palantir.github.io/tslint/) is technically deprecated in favor of [Typescript ESLint](https://typescript-eslint.io/), TSLint is still far better at linting Typescript files than ESLint. So, for the time being, TSLint will be the primary linter, but ESLint remains configured for JS/X files.
 
-The following command will install TSLint globally:
+Javascript rules: [src/.eslintrc.js](src/.eslintrc.js)
+
+Typescript rules: [src-ts/.eslintrc.js](src-ts/.eslintrc.js)
 
->% yarn global add tslint typescript 
 
 ### Command Line
 
@@ -386,9 +388,7 @@ The following command will install TSLint globally:
 
 >% yarn lint:fix
 
-OR
-
->% yarn eslint:fix
+See the [yarn commmands](#yarn-commands) for further options.
 
 ### VS Code
 
@@ -411,16 +411,16 @@ The most useful feature is to automatically apply all lint rules any time you sa
         ...
         "editor.formatOnSave": true,
         "editor.codeActionsOnSave": {
-            "source.fixAll.tslint": true,
+            "source.fixAll.eslint": true,
         },
     }
     ```
 
-#### TSLint Plugin
+#### ESLint Plugin
 
 Created by Microsoft, this plugin will allow you to see lint errors in the Problems panel.
 
->**WARNING:** Other lint plugins can interfere with TSLint, so it is recommended that you uninstall/disable all other lint plugins (e.g. ESLint, Prettier, etc).
+>**WARNING:** Other lint plugins can interfere with ESLint, so it is recommended that you uninstall/disable all other lint plugins (e.g. TSLint, Prettier, etc).
 
 ## Styling
 

cypress.config.ts

@@ -1,4 +1,3 @@
-// tslint:disable-next-line: no-submodule-imports This is the way cypress does it
 import task from '@cypress/code-coverage/task'
 import { defineConfig } from 'cypress'
 

package.json

@@ -123,6 +123,7 @@
         "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-no-null": "^1.0.2",
         "eslint-plugin-ordered-imports": "^0.6.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
@@ -143,7 +144,6 @@
         "start-server-and-test": "^1.14.0",
         "style-loader": "^3.3.1",
         "systemjs-webpack-interop": "^2.3.7",
-        "tslint": "^6.1.3",
         "webpack": "^4.41.2",
         "webpack-cli": "^4.10.0",
         "webpack-config-single-spa-react": "^4.0.3",

src-ts/.eslintrc.js

@@ -20,10 +20,11 @@ module.exports = {
         sourceType: 'module',
     },
     plugins: [
-        'react',
         '@typescript-eslint',
+        'no-null',
         'ordered-imports',
-        'react-hooks',
+        'react',
+        'react-hooks'
     ],
     settings: {
         react: {
@@ -47,6 +48,7 @@ module.exports = {
         '@typescript-eslint/no-explicit-any': 'error',
         '@typescript-eslint/no-inferrable-types': 'off',
         '@typescript-eslint/no-shadow': 'error',
+        '@typescript-eslint/no-unused-vars': 'error',
         '@typescript-eslint/strict-boolean-expressions': [
             'error',
             {
@@ -60,6 +62,10 @@ module.exports = {
             "error",
             "as-needed"
         ],
+        'complexity': [
+            'error',
+            7
+        ],
         'import/extensions': 'off',
         'import/prefer-default-export': 'off',
         'indent': [
@@ -77,6 +83,7 @@ module.exports = {
             'warn'
         ],
         'no-extra-boolean-cast': "off",
+        "no-null/no-null": "error",
         'no-plusplus': [
             'error',
             {
@@ -197,5 +204,6 @@ module.exports = {
             'error',
             'never',
         ],
+        'sort-keys': 'error'
     },
 };

src-ts/lib/button/index.ts

@@ -1,11 +1,5 @@
 export { default as Button } from './Button'
 export { type ButtonProps } from './Button'
-export
-// tslint:disable-next-line: no-unused-expression
-type { ButtonSize } from './Button'
-export
-// tslint:disable-next-line: no-unused-expression
-type { ButtonStyle } from './Button'
-export
-// tslint:disable-next-line: no-unused-expression
-type { ButtonType } from './Button'
+export { type ButtonSize } from './Button'
+export { type ButtonStyle } from './Button'
+export { type ButtonType } from './Button'

src-ts/lib/form/form-groups/FormGroups.tsx

@@ -35,7 +35,6 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
 
         let inputElement: JSX.Element
 
-        /* tslint:disable:cyclomatic-complexity */
         switch (input.type) {
 
             case 'rating':

src-ts/lib/form/form-groups/form-input/input-file-picker/InputFilePicker.tsx

@@ -1,4 +1,3 @@
-// tslint:disable:no-null-keyword
 import { createRef, Dispatch, FC, RefObject, SetStateAction, useEffect, useState } from 'react'
 
 import { Button, useCheckIsMobile } from '../../../..'
@@ -22,8 +21,10 @@ const InputFilePicker: FC<InputFilePickerProps> = (props: InputFilePickerProps)
 
     const fileInputRef: RefObject<HTMLInputElement> = createRef<HTMLInputElement>()
 
+    // eslint-disable-next-line no-null/no-null
     const [files, setFiles]: [FileList | null, Dispatch<SetStateAction<FileList | null>>] = useState<FileList | null>(null)
-    const [fileName, setFileName]: [string | undefined, Dispatch<SetStateAction<string | undefined>>] = useState<string | undefined>()
+    const [fileName, setFileName]: [string | undefined, Dispatch<SetStateAction<string | undefined>>]
+        = useState<string | undefined>()
 
     useEffect(() => {
         if (files && files.length) {

src-ts/lib/form/form-groups/form-input/input-image-picker/InputImagePicker.tsx

@@ -19,7 +19,6 @@ const InputImagePicker: FC<InputImagePickerProps> = (props: InputImagePickerProp
 
     const fileInputRef: RefObject<HTMLInputElement> = createRef<HTMLInputElement>()
 
-    // tslint:disable-next-line:no-null-keyword
     const [files, setFiles]: [FileList | null, Dispatch<SetStateAction<FileList | null>>] = useState<FileList | null>(null)
     const [fileDataURL, setFileDataURL]: [string | undefined, Dispatch<SetStateAction<string | undefined>>] = useState<string | undefined>()
 

src-ts/lib/form/validator-functions/index.ts

@@ -7,6 +7,4 @@ export {
     requiredIfOther as validatorRequiredIfOther,
     sslUrl as validatorSslUrl,
 } from './validator.functions'
-export
-// tslint:disable-next-line: no-unused-expression
-type { ValidatorFn } from './validator.functions'
+export { type ValidatorFn } from './validator.functions'

src-ts/lib/functions/user-functions/user-store/index.ts

@@ -1,4 +1,2 @@
 export { patchAsync as userPatchAsync } from './user-xhr.store'
-export
-// tslint:disable-next-line: no-unused-expression
-type { UserPatchRequest } from './user-xhr.store'
+export { type UserPatchRequest } from './user-xhr.store'

src-ts/lib/hooks/use-storage.hook.ts

@@ -44,7 +44,7 @@ export function useStorage<T>(
             })
         } catch (error) {
             // A more advanced implementation would handle the error case
-            // tslint:disable-next-line:no-console
+            // eslint-disable-next-line no-console
             console.error(error)
         }
     }, [storage, storageKey]) as Dispatch<SetStateAction<T>>

src-ts/lib/member-autocomplete/InputHandleAutocomplete.tsx

@@ -1,6 +1,5 @@
 import { FC, FocusEvent } from 'react'
 import { MultiValue, StylesConfig } from 'react-select'
-// tslint:disable-next-line: no-submodule-imports
 import AsyncSelect from 'react-select/async'
 
 import { InputWrapper } from '../form/form-groups/form-input/input-wrapper'

src-ts/lib/pagination/use-infinite-page.hook.ts

@@ -1,5 +1,4 @@
 import { flatten, map } from 'lodash'
-// tslint:disable-next-line: no-submodule-imports
 import useSWRInfinite, { SWRInfiniteResponse } from 'swr/infinite'
 
 import { InfinitePageDao } from './infinite-page-dao.model'

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownCode.tsx

@@ -18,7 +18,6 @@ export const MarkdownCode: React.FC<MarkdownCodeProps> = props => {
         boolean,
         React.Dispatch<React.SetStateAction<boolean>>
     ] = React.useState(!isTerminal)
-    // tslint:disable-next-line no-null-keyword
     const ref: React.RefObject<HTMLDivElement> = React.useRef<HTMLDivElement>(null)
 
     const handleLineNumberVisibilityChange: (visibility: boolean) => void
@@ -113,7 +112,6 @@ const LineNumbers = (props: LineNumbersProps): React.ReactElement | null => {
     }, [size.width, onVisibilityChange, codeRef])
 
     if (!showLineNumbers) {
-        // tslint:disable-next-line no-null-keyword
         return null
     }
 

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/renderer.tsx

@@ -1,4 +1,3 @@
-// tslint:disable-next-line: no-submodule-imports
 import * as React from 'react'
 import { marked, Renderer as MarkedRenderer } from 'marked'
 import _ from 'lodash'
@@ -100,8 +99,6 @@ export class Renderer implements MarkdownRenderer {
         )
     }
 
-    // Hard to avoid due to the complexity of group by
-    // tslint:disable-next-line: cyclomatic-complexity
     private groupBy(
         nodes: Array<React.ReactNode>,
         options?: MarkdownRenderOptions,
@@ -167,8 +164,6 @@ export class Renderer implements MarkdownRenderer {
         return result
     }
 
-    // Hard to avoid due to the complexity of parsing markdown token.
-    // tslint:disable-next-line: cyclomatic-complexity
     private parseToken(
         token: marked.Token,
         index: number,

src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx

@@ -3,11 +3,10 @@ import { ChangeEvent, createRef, Dispatch, FC, KeyboardEvent, RefObject, SetStat
 import { Params, useLocation, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { KeyedMutator, useSWRConfig } from 'swr'
+import { FullConfiguration } from 'swr/dist/types'
 import ContentEditable from 'react-contenteditable'
 import MarkdownIt from 'markdown-it'
 import sanitizeHtml from 'sanitize-html'
-// tslint:disable-next-line: no-submodule-imports
-import { FullConfiguration } from 'swr/dist/types'
 
 import { Breadcrumb, BreadcrumbItemModel, Button, ButtonProps, ContentLayout, IconOutline, IconSolid, LoadingSpinner, PageDivider, Sort, tableGetDefaultSort, TabsNavbar, TabsNavItem } from '../../../../lib'
 import { GamificationConfig } from '../../game-config'
@@ -29,7 +28,6 @@ const md: MarkdownIt = new MarkdownIt({
     // typographer: true,
 })
 
-/* tslint:disable:cyclomatic-complexity */
 const BadgeDetailPage: FC = () => {
     const [headerButtonConfig, setHeaderButtonConfig]: [
         ButtonProps | undefined,
@@ -66,7 +64,7 @@ const BadgeDetailPage: FC = () => {
 
     const fileInputRef: RefObject<HTMLInputElement> = createRef<HTMLInputElement>()
 
-    // tslint:disable-next-line:no-null-keyword
+    // eslint-disable-next-line no-null/no-null
     const [newImageFile, setNewImageFile]: [FileList | null, Dispatch<SetStateAction<FileList | null>>] = useState<FileList | null>(null)
 
     const [fileDataURL, setFileDataURL]: [string | undefined, Dispatch<SetStateAction<string | undefined>>] = useState<string | undefined>()

src-ts/tools/gamification-admin/pages/badge-detail/BatchAwardTab/BatchAwardTab.tsx

@@ -1,4 +1,3 @@
-// tslint:disable:no-null-keyword
 import { Dispatch, FC, SetStateAction, useState } from 'react'
 
 import { Button, IconSolid, InputFilePicker } from '../../../../../lib'
@@ -17,6 +16,7 @@ const BatchAwardTab: FC<BatchAwardTabProps> = (props: BatchAwardTabProps) => {
 
     const [showBadgeAssigned, setShowBadgeAssigned]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
+    // eslint-disable-next-line no-null/no-null
     const [files, setFiles]: [FileList | null, Dispatch<SetStateAction<FileList | null>>] = useState<FileList | null>(null)
 
     const [errorText, setErrorText]: [string, Dispatch<SetStateAction<string>>] = useState<string>('')

src-ts/tools/learn/course-completed/CourseCompletedPage.tsx

@@ -56,7 +56,6 @@ const CourseCompletedPage: FC<{}> = () => {
         enabled: progressReady && !!progress,
     })
 
-    /* tslint:disable:cyclomatic-complexity */
     const isLoggedIn: boolean = profileReady && !!profile
     const certificatesDataReady: boolean = progressReady && certifReady
     const ready: boolean = profileReady && courseDataReady && (!isLoggedIn || certificatesDataReady)

src-ts/tools/learn/course-details/CourseDetailsPage.tsx

@@ -59,8 +59,6 @@ const CourseDetailsPage: FC<{}> = () => {
         enabled: courseReady,
     })
 
-    // this looks better than finding workarounds for cyclomatic-complexity
-    /* tslint:disable:cyclomatic-complexity */
     const ready: boolean = profileReady && courseReady && certificateReady && (!profile || progressReady)
 
     const breadcrumb: Array<BreadcrumbItemModel> = useLearnBreadcrumb([

src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts

@@ -331,11 +331,12 @@ function buildFormDataDesign(formData: any): ReadonlyArray<FormDetail> {
     const styleInfo: {} = {
         Like: formData.likedStyles?.value?.join(', '),
         // Disabling lint error to maintain order for display
-        // tslint:disable-next-line: object-literal-sort-keys
+        /* eslint-disable sort-keys */
         Dislike: formData.dislikedStyles?.value?.join(', '),
         'Additional Details': formData.stylePreferences?.value,
         'Color Selections': formData.colorOption?.value.join(', '),
         'Specific Colors': formData.specificColor?.value,
+        /* eslint-enable sort-keys */
     }
 
     return [