Merge pull request #402 from topcoder-platform/TCA-647_delete-prettier

TCA-647 Remove prettier and tslint -> TCA-499_eslint

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

.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # Editors
 .editorconfig
-.prettierrc

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

@@ -13,9 +13,6 @@
         "lint:js:fix": "eslint -c ./src/.eslintrc.js 'src/**/*.{js,jsx}' --fix",
         "lint": "npm run lint:js && npm run lint:ts",
         "lint:fix": "npm run lint:js:fix && npm run lint:ts:fix",
-        "prettier": "prettier ./src-ts/**/*.{ts,tsx} --check",
-        "prettier:fix": "prettier ./src-ts/**/*.{ts,tsx} --write",
-        "format:all": "npm run prettier:fix && npm run lint:fix",
         "test": "react-scripts test --watchAll",
         "test:no-watch": "react-scripts test --watchAll=false --passWithNoTests",
         "cy:run": "cypress run --reporter junit",
@@ -120,14 +117,14 @@
         "cypress": "^10.10.0",
         "eslint": "^8.25.0",
         "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-prettier": "^8.5.0",
         "eslint-config-react-app": "^7.0.1",
         "eslint-config-react-important-stuff": "^3.0.0",
         "eslint-import-resolver-typescript": "^3.2.5",
         "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-prettier": "^4.2.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",
         "file-loader": "^6.2.0",
@@ -140,15 +137,13 @@
         "nyc": "^15.1.0",
         "postcss-loader": "^4.0.4",
         "postcss-scss": "^3.0.2",
-        "prettier": "^2.7.1",
         "pretty-quick": "^3.1.3",
         "resolve-url-loader": "^5.0.0",
         "sass-loader": "^13.1.0",
         "serve": "^14.0.1",
         "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

@@ -8,53 +8,65 @@ module.exports = {
         'plugin:react/recommended',
         'airbnb',
         'plugin:@typescript-eslint/recommended',
-        'prettier'
+        'plugin:ordered-imports/recommended'
     ],
     parser: '@typescript-eslint/parser',
     parserOptions: {
         useJSXTextNode: true,
-        project: "./tsconfig.json",
-        tsconfigRootDir: ".",
+        project: './tsconfig.json',
+        tsconfigRootDir: '.',
         tsx: true,
         jsx: true,
         sourceType: 'module',
     },
     plugins: [
-        'react',
         '@typescript-eslint',
-        'react-hooks',
+        'no-null',
+        'ordered-imports',
+        'react',
+        'react-hooks'
     ],
     settings: {
         react: {
-            "version": "detect"
+            'version': 'detect'
         },
-        "import/resolver": {
+        'import/resolver': {
             typescript: {},
         }
     },
     rules: {
-        "@typescript-eslint/ban-types": [
-            "error",
+        '@typescript-eslint/ban-types': [
+            'error',
             {
-                "extendDefaults": true,
-                "types": {
-                    "{}": false
+                'extendDefaults': true,
+                'types': {
+                    '{}': false
                 }
             }
         ],
         '@typescript-eslint/explicit-function-return-type': 'off',
         '@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',
             {
+                allowAny: true,
                 allowNullableBoolean: true,
                 allowNullableObject: true,
                 allowNullableNumber: true,
                 allowNullableString: true
             }
         ],
+        'arrow-parens': [
+            'error',
+            'as-needed'
+        ],
+        'complexity': [
+            'error',
+            7
+        ],
         'import/extensions': 'off',
         'import/prefer-default-export': 'off',
         'indent': [
@@ -64,10 +76,15 @@ module.exports = {
                 SwitchCase: 1,
             },
         ],
+        'jsx-quotes': [
+            'error',
+            'prefer-single'
+        ],
         'jsx-a11y/tabindex-no-positive': [
             'warn'
         ],
-        'no-extra-boolean-cast': "off",
+        'no-extra-boolean-cast': 'off',
+        'no-null/no-null': 'error',
         'no-plusplus': [
             'error',
             {
@@ -87,7 +104,56 @@ module.exports = {
                 functions: false,
             }
         ],
-        "padding-line-between-statements": [
+        'object-curly-newline': 'off',
+        'operator-linebreak': [
+            'error',
+            'before'
+        ],
+        'ordered-imports/ordered-imports': [
+            'error',
+            {
+                'symbols-first': true,
+                'declaration-ordering': [
+                    'type', {
+                        ordering: [
+                            'namespace',
+                            'destructured',
+                            'default',
+                            'side-effect',
+                        ],
+                        secondaryOrdering: [
+                            'name',
+                            'lowercase-last'
+                        ],
+                    }
+                ],
+                'specifier-ordering': 'case-insensitive',
+                'group-ordering': [
+                    {
+                        name: 'project root',
+                        match: '^@',
+                        order: 20
+                    },
+                    {
+                        name: 'parent directories',
+                        match: '^\\.\\.',
+                        order: 30
+                    },
+                    {
+                        name: 'current directory',
+                        match: '^\\.',
+                        order: 40
+                    },
+                    {
+                        name: 'third-party',
+                        match: '.*',
+                        order: 10
+                    },
+                ],
+            },
+        ],
+        'padded-blocks': 'off',
+        'padding-line-between-statements': [
             'error',
             { blankLine: 'always', prev: 'directive', next: '*' },
             { blankLine: 'any', prev: 'directive', next: 'directive' },
@@ -139,5 +205,6 @@ module.exports = {
             'error',
             'never',
         ],
+        'sort-keys': 'error'
     },
 };

src-ts/.prettierrc.js

@@ -1,9 +1,9 @@
 import { FC } from 'react'
 
-import styles from './Header.module.scss'
 import { Logo } from './logo'
 import { ToolSelectors } from './tool-selectors'
 import { UtilitySelectors } from './utility-selectors'
+import styles from './Header.module.scss'
 
 const Header: FC<{}> = () => (
     <div className={styles['header-wrap']}>

src-ts/header/Header.tsx

@@ -7,6 +7,9 @@ interface ToolSelectorsProps {
     isWide: boolean
 }
 
-const ToolSelectors: FC<ToolSelectorsProps> = (props: ToolSelectorsProps) => props.isWide ? <ToolSelectorsWide /> : <ToolSelectorsNarrow />
+const ToolSelectors: FC<ToolSelectorsProps>
+    = (props: ToolSelectorsProps) => (props.isWide
+        ? <ToolSelectorsWide />
+        : <ToolSelectorsNarrow />)
 
 export default ToolSelectors

src-ts/header/tool-selectors/ToolSelectors.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames'
 import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
+import classNames from 'classnames'
 
 import { IconOutline, routeContext, RouteContextData } from '../../../lib'
 

src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx

@@ -1,6 +1,6 @@
-import classNames from 'classnames'
 import { FC, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
+import classNames from 'classnames'
 
 import { IconOutline, PlatformRoute, routeContext, RouteContextData, routeIsActiveTool } from '../../../../lib'
 

src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.tsx

@@ -1,6 +1,6 @@
-import classNames from 'classnames'
 import { FC, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
+import classNames from 'classnames'
 
 import {
     PlatformRoute,
@@ -37,8 +37,9 @@ const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProp
         <div className={classNames(
             styles[baseClass],
             styles[activeIndicatorClass],
-            isLink ? styles['tool-selector-wide-is-link'] : undefined
-        )}>
+            isLink ? styles['tool-selector-wide-is-link'] : undefined,
+        )}
+        >
             <Link
                 className='large-tab'
                 tabIndex={-1}

src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx

@@ -1,6 +1,6 @@
-import classNames from 'classnames'
 import { FC, useContext } from 'react'
 import { NavigateFunction, useNavigate } from 'react-router-dom'
+import classNames from 'classnames'
 
 import {
     authUrlLogout,

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames'
 import { FC } from 'react'
+import classNames from 'classnames'
 
 import styles from './Avatar.module.scss'