Switch from TSLint to ESLint (#64)

- palantir/tslint-react#210
- https://medium.com/@cosmvs/painless-migration-from-tslint-to-eslint-for-react-with-typescript-4befb4918ba8

* Switch to YAML file for ESLint
* Update test snaps
* Fix 'yarn start' trying to use TSlint

.eslintrc.yml

@@ -0,0 +1,240 @@
+---
+extends:
+- plugin:react/recommended
+env:
+  browser: true
+  es6: true
+  node: true
+parser: "@typescript-eslint/parser"
+parserOptions:
+  project: tsconfig.json
+  sourceType: module
+plugins:
+- "@typescript-eslint"
+- "@typescript-eslint/eslint-plugin-tslint"
+- import
+- prefer-arrow
+- react
+settings:
+  react:
+    version: detect
+rules:
+  "@typescript-eslint/adjacent-overload-signatures": error
+  "@typescript-eslint/array-type": error
+  "@typescript-eslint/ban-types": error
+  "@typescript-eslint/class-name-casing": error
+  "@typescript-eslint/consistent-type-assertions": error
+  "@typescript-eslint/consistent-type-definitions": error
+  "@typescript-eslint/explicit-member-accessibility":
+  - error
+  - accessibility: explicit
+  "@typescript-eslint/indent":
+  - error
+  - tab
+  - CallExpression:
+      arguments: first
+    FunctionDeclaration:
+      parameters: first
+    FunctionExpression:
+      parameters: first
+    SwitchCase: 1
+  "@typescript-eslint/interface-name-prefix": error
+  "@typescript-eslint/member-delimiter-style":
+  - error
+  - multiline:
+      delimiter: semi
+      requireLast: true
+    singleline:
+      delimiter: semi
+      requireLast: false
+  "@typescript-eslint/member-ordering": error
+  "@typescript-eslint/naming-convention":
+  - error
+  - selector: default
+    format:
+    - strictCamelCase
+  - selector: variable
+    format:
+    - strictCamelCase
+    - StrictPascalCase
+  - selector: class
+    format:
+    - StrictPascalCase
+  - selector: enum
+    format:
+    - StrictPascalCase
+  - selector: interface
+    format:
+    - StrictPascalCase
+  - selector: typeAlias
+    format:
+    - StrictPascalCase
+  - selector: typeParameter
+    format:
+    - PascalCase
+  - selector: property
+    modifiers:
+    - static
+    - readonly
+    format:
+    - UPPER_CASE
+  "@typescript-eslint/no-empty-function": error
+  "@typescript-eslint/no-empty-interface": error
+  "@typescript-eslint/no-explicit-any": 'off'
+  "@typescript-eslint/no-misused-new": error
+  "@typescript-eslint/no-namespace": error
+  "@typescript-eslint/no-parameter-properties": 'off'
+  "@typescript-eslint/no-this-alias": error
+  "@typescript-eslint/no-use-before-define": 'off'
+  "@typescript-eslint/no-var-requires": error
+  "@typescript-eslint/prefer-for-of": error
+  "@typescript-eslint/prefer-function-type": error
+  "@typescript-eslint/prefer-namespace-keyword": error
+  "@typescript-eslint/quotes":
+  - error
+  - double
+  "@typescript-eslint/semi":
+  - error
+  - always
+  "@typescript-eslint/triple-slash-reference": error
+  "@typescript-eslint/tslint/config":
+  - error
+  - rules:
+      import-spacing: true
+      jsdoc-format: true
+      no-reference-import: true
+      object-literal-sort-keys: true
+      one-line:
+      - true
+      - check-catch
+      - check-else
+      - check-open-brace
+      - check-whitespace
+      prefer-conditional-expression: true
+      typedef:
+      - true
+      - arrow-call-signature
+      - call-signature
+      - member-variable-declaration
+      - parameter
+      - property-declaration
+      - variable-declaration
+      - variable-declaration-ignore-function
+      whitespace:
+      - true
+      - check-branch
+      - check-decl
+      - check-module
+      - check-operator
+      - check-separator
+      - check-type
+      - check-typecast
+  "@typescript-eslint/type-annotation-spacing": error
+  "@typescript-eslint/unified-signatures": error
+  arrow-body-style: error
+  arrow-parens:
+  - error
+  - as-needed
+  camelcase: error
+  comma-dangle:
+  - error
+  - arrays: always-multiline
+    objects: always-multiline
+    imports: always-multiline
+    exports: always-multiline
+    functions: always-multiline
+  complexity: 'off'
+  constructor-super: error
+  curly: error
+  default-case: error
+  dot-notation: error
+  eol-last: 'off'
+  eqeqeq:
+  - error
+  - smart
+  guard-for-in: error
+  id-blacklist:
+  - error
+  - any
+  - Undefined
+  - undefined
+  id-match: error
+  import/no-extraneous-dependencies: error
+  import/no-internal-modules: 'off'
+  import/order: error
+  max-classes-per-file:
+  - error
+  - 1
+  max-len:
+  - error
+  - code: 120
+    ignorePattern: '[`"''];?$'
+    ignoreStrings: true
+  new-parens: error
+  no-bitwise: error
+  no-caller: error
+  no-cond-assign: error
+  no-console: 'off'
+  no-debugger: error
+  no-duplicate-case: error
+  no-duplicate-imports: error
+  no-empty: error
+  no-eval: error
+  no-extra-bind: error
+  no-fallthrough: error
+  no-invalid-this: 'off'
+  no-multiple-empty-lines: error
+  no-new-func: error
+  no-new-wrappers: error
+  no-redeclare: error
+  no-return-await: error
+  no-sequences: error
+  no-shadow:
+  - error
+  - builtinGlobals: true
+    hoist: all
+  no-sparse-arrays: error
+  no-template-curly-in-string: error
+  no-throw-literal: error
+  no-trailing-spaces: error
+  no-undef-init: error
+  no-underscore-dangle:
+  - error
+  - allow:
+    - __PRELOADED_STATE__
+    - __REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  no-unsafe-finally: error
+  no-unused-expressions: error
+  no-unused-labels: error
+  no-var: error
+  object-shorthand: error
+  one-var:
+  - error
+  - never
+  prefer-arrow/prefer-arrow-functions: error
+  prefer-const: error
+  prefer-object-spread: error
+  quote-props:
+  - error
+  - consistent-as-needed
+  radix: error
+  react/jsx-boolean-value:
+  - error
+  - always
+  react/jsx-curly-spacing: error
+  react/jsx-equals-spacing: error
+  react/jsx-key: error
+  react/jsx-no-bind: 'off'
+  react/no-string-refs: error
+  react/no-unescaped-entities: 'off'
+  space-before-function-paren:
+  - error
+  - anonymous: never
+    asyncArrow: always
+    named: never
+  space-in-parens:
+  - error
+  - never
+  spaced-comment: error
+  use-isnan: error
+  valid-typeof: 'off'

.github/workflows/react-ci-yarn.yml

@@ -20,7 +20,11 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - name: Install packages
       run: yarn install
+    - name: Run linting
+      run: |
+        yarn lint:ts
+        echo "Lint process exited with status code $?."
     - name: Run unit tests
       run: |
         yarn test:ci
-        echo "Process exited with status code $?."
+        echo "Test process exited with status code $?."

.vscode/settings.json

@@ -1,23 +1,26 @@
 {
-	"[json]": {
-		"editor.insertSpaces": true,
-		"editor.tabSize": 2
-	},
-	"[yml]": {
-		"editor.insertSpaces": true,
-		"editor.tabSize": 2
-	},
-	"editor.insertSpaces": false,
-	"editor.detectIndentation": false,
-	"files.exclude": {
-		"**/.git": true,
-		"**/.svn": true,
-		"**/.hg": true,
-		"**/CVS": true,
-		"**/.DS_Store": true,
-		"**/__snapshots__/**": true,
-		"build/**": true,
-		"coverage/**": true,
-		"node_modules/**": true
-	}
-}
+    "[json]": {
+        "editor.insertSpaces": true,
+        "editor.tabSize": 2
+    },
+    "[yml]": {
+        "editor.insertSpaces": true,
+        "editor.tabSize": 2
+    },
+    "editor.detectIndentation": false,
+    "editor.insertSpaces": false,
+    "eslint.nodePath": "./node_modules",
+    "eslint.options": { "configFile": "./.eslintrc.yml" },
+    "eslint.packageManager": "yarn",
+    "files.exclude": {
+        "**/.git": true,
+        "**/.svn": true,
+        "**/.hg": true,
+        "**/CVS": true,
+        "**/.DS_Store": true,
+        "**/__snapshots__/**": true,
+        "build/**": true,
+        "coverage/**": true,
+        "node_modules/**": true
+    }
+}

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "razzle build",
     "debug": "razzle start --inspect --inspect-port=9230",
+    "lint:ts": "eslint --ext=jsx,ts,tsx src",
     "postinstall": "npm rebuild node-sass",
     "start": "razzle start",
     "start:prod": "node build/server.js",
@@ -47,15 +48,21 @@
     "@types/serialize-javascript": "^1.5.0",
     "@types/webpack-env": "^1.13.6",
     "@types/yaml": "^1.2.0",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
     "cross-env": "^7.0.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-prefer-arrow": "^1.1.7",
+    "eslint-plugin-react": "^7.19.0",
     "jest": "^25.2.3",
     "razzle": "^3.0.0",
     "razzle-plugin-scss": "^3.0.0",
     "razzle-plugin-typescript": "^3.0.0",
     "react-test-renderer": "^16.13.1",
     "ts-jest": "^25.0.0",
     "tslint": "^5.19.0",
-    "tslint-react": "^4.0.0",
     "typescript": "^3.2.2"
   },
   "jest": {

razzle.config.js

@@ -1,5 +1,16 @@
-'use strict';
+"use strict";
 
 module.exports = {
-  plugins: ['scss', 'typescript'],
+	plugins: [
+		"scss",
+		{
+			name: "typescript",
+			options: {
+				useEslint: true,
+				forkTsChecker: {
+					tslint: false,
+				},
+			},
+		},
+	],
 };

src/__tests__/TestUtils.ts

@@ -1,9 +1,9 @@
 type ComponentGenerator = (props: {}) => string;
 
-export const mockComponent = (componentName: string): ComponentGenerator => {
-	return (props: {}): string => {
+export const mockComponent = (componentName: string): ComponentGenerator =>
+	(props: {}): string => {
 		const openingTag: string = `[component: ${componentName}`;
-		const closingTag: string = `/]`;
+		const closingTag: string = "/]";
 
 		const propKeys: string[] = Object.keys(props);
 
@@ -27,4 +27,3 @@ export const mockComponent = (componentName: string): ComponentGenerator => {
 
 		return `${openingTag} ${propsList.join(" ")} ${closingTag}`;
 	};
-};

src/__tests__/employer-records.test.ts

@@ -6,9 +6,7 @@ import { EmployerRecord } from "../common/EmployerRecord";
 const directory: string = "./public";
 const subDirectory: string = "employers";
 
-const dateToNumber = (date: string | Date | null): number => {
-	return new Date(date || "").getTime();
-};
+const dateToNumber = (date: string | Date | null): number => new Date(date || "").getTime();
 
 const recordIds: string[] =
 	fs.readdirSync(`${directory}/${subDirectory}`)
@@ -24,7 +22,7 @@ describe("employer records", () => {
 	});
 
 	test.each(
-		recordIds.map((recordId: string) => [ recordId ])
+		recordIds.map((recordId: string) => [ recordId ]),
 	)("can load and parse %p (%#)", async (recordId: string) => {
 		const record: EmployerRecord = await loader.loadAsync(recordId);