chore: migrate to eslint (#249)

felixfbecker · web-flow · commit 2becf2813500 · 2020-04-16T12:27:27.000+02:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@sourcegraph/eslint-config",
+  "parserOptions": {
+    "project": "tsconfig.json"
+  },
+  "overrides": [
+    {
+      "files": ["testdata/**"],
+      "rules": {
+        "no-sync": "warn"
+      }
+    },
+    {
+      "files": ["*.test.*", "src/testutils/**"],
+      "rules": {
+        "import/extensions": ["error", "never", { "html": "always" }]
+      }
+    }
+  ]
+}
diff --git a/.travis.yml b/.travis.yml
@@ -13,7 +13,7 @@ jobs:
       script:
         - yarn run prettier-check
         - yarn run typecheck
-        - yarn run tslint
+        - yarn run eslint
         - yarn run build
         - yarn test -- --single-run --browsers ChromeHeadlessNoSandbox
         - bash <(curl -s https://codecov.io/bash)
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -14,5 +14,12 @@
         "runOn": "folderOpen",
       },
     },
+    {
+      "type": "npm",
+      "script": "eslint",
+      "problemMatcher": ["$eslint-stylish"],
+      "label": "ESLint",
+      "detail": "Lint whole project with ESLint",
+    },
   ],
 }
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "prettier": "prettier '**/{*.{js?(on),ts?(x),scss,yml},.*.js?(on),.*.yml}' --write --list-different",
     "prettier-check": "npm run prettier -- --write=false",
     "typecheck": "tsc -p tsconfig.json",
-    "tslint": "tslint -c tslint.json -p tsconfig.json './src/*.ts?(x)' './testdata/*.ts?(x)' './*.ts?(x)'",
+    "eslint": "eslint './src/**/*.ts?(x)' './testdata/**/*.ts?(x)' './*.ts?(x)'",
     "build": "tsc -p tsconfig.dist.json",
     "watch": "yarn run build --watch",
     "test": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' karma start",
@@ -39,9 +39,9 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
+    "@sourcegraph/eslint-config": "^0.16.0",
     "@sourcegraph/prettierrc": "^3.0.3",
     "@sourcegraph/tsconfig": "^4.0.1",
-    "@sourcegraph/tslint-config": "^13.4.0",
     "@types/chai": "4.2.11",
     "@types/karma": "4.4.1",
     "@types/karma-webpack": "2.0.7",
@@ -53,6 +53,7 @@
     "@types/webpack-env": "1.15.1",
     "awesome-typescript-loader": "^5.2.1",
     "chai": "^4.2.0",
+    "eslint": "^6.8.0",
     "esm": "^3.2.25",
     "husky": "^4.2.1",
     "istanbul-instrumenter-loader": "^3.0.1",
@@ -73,7 +74,6 @@
     "sinon": "^8.1.1",
     "sourcegraph": "^23.0.1",
     "ts-node": "^8.2.0",
-    "tslint": "^6.1.1",
     "typescript": "^3.8.3",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11"
diff --git a/src/hoverifier.test.ts b/src/hoverifier.test.ts
@@ -434,7 +434,7 @@ describe('Hoverifier', () => {
                     }
 
                     // Click (to pin) https://sourcegraph.sgdev.org/github.com/gorilla/mux@cb4698366aa625048f3b815af6a0dea8aef9280a/-/blob/mux.go#L24:6
-                    cold(`a`).subscribe(() => {
+                    cold('a').subscribe(() => {
                         dispatchMouseEventAtPositionImpure('click', codeView, {
                             line: 24,
                             character: 6,
@@ -502,7 +502,7 @@ describe('Hoverifier', () => {
                         distinctUntilChanged()
                     )
 
-                    const outputDiagram = `ab`
+                    const outputDiagram = 'ab'
                     const outputValues: {
                         [key: string]: 'hidden' | 'pinned' | 'visible'
                     } = {
@@ -511,15 +511,15 @@ describe('Hoverifier', () => {
                     }
 
                     // Click (to pin) https://sourcegraph.sgdev.org/github.com/gorilla/mux@cb4698366aa625048f3b815af6a0dea8aef9280a/-/blob/mux.go#L24:6
-                    cold(`a`).subscribe(() =>
+                    cold('a').subscribe(() =>
                         dispatchMouseEventAtPositionImpure('click', codeView, {
                             line: 24,
                             character: 6,
                         })
                     )
 
                     // Click to another position and ensure the hover is no longer pinned.
-                    cold(`-b`).subscribe(() =>
+                    cold('-b').subscribe(() =>
                         positionJumps.next({
                             codeView: codeView.codeView,
                             scrollElement: codeView.container,
@@ -716,14 +716,17 @@ describe('Hoverifier', () => {
                 }
 
                 // Mouse on https://sourcegraph.sgdev.org/github.com/gorilla/mux@cb4698366aa625048f3b815af6a0dea8aef9280a/-/blob/mux.go#L24:6
-                cold(`a b ${MOUSEOVER_DELAY - 2}ms c d e`, {
-                    a: 'mouseover',
-                    b: 'mousemove',
-                    // Now perform repeated mousemove/mouseover events on the same token.
-                    c: 'mousemove',
-                    d: 'mouseover',
-                    e: 'mousemove',
-                } as Record<string, SupportedMouseEvent>).subscribe(eventType =>
+                cold(
+                    `a b ${MOUSEOVER_DELAY - 2}ms c d e`,
+                    ((): Record<string, SupportedMouseEvent> => ({
+                        a: 'mouseover',
+                        b: 'mousemove',
+                        // Now perform repeated mousemove/mouseover events on the same token.
+                        c: 'mousemove',
+                        d: 'mouseover',
+                        e: 'mousemove',
+                    }))()
+                ).subscribe(eventType =>
                     dispatchMouseEventAtPositionImpure(eventType, codeView, {
                         line: 24,
                         character: 6,
diff --git a/src/hoverifier.ts b/src/hoverifier.ts
@@ -529,7 +529,7 @@ export function createHoverifier<C extends object, D, A>({
                   }
                   return {
                       ...rest,
-                      eventType: 'jump' as 'jump',
+                      eventType: 'jump' as const,
                       target,
                       position: { ...position, part },
                       codeView,
@@ -891,7 +891,7 @@ export function createHoverifier<C extends object, D, A>({
         )
     }
 
-    const resetHover = () => {
+    const resetHover = (): void => {
         container.update({
             hoverOverlayIsFixed: false,
             hoverOverlayPosition: undefined,
diff --git a/src/positions.test.ts b/src/positions.test.ts
@@ -59,7 +59,7 @@ describe('positions', () => {
 
     for (const tokenize of [false, true]) {
         for (const codeView of testcases) {
-            it((tokenize ? 'tokenizes' : 'does not tokenize') + ` the DOM when tokenize: ${tokenize}`, () => {
+            it((tokenize ? 'tokenizes' : 'does not tokenize') + ` the DOM when tokenize: ${String(tokenize)}`, () => {
                 of(codeView.codeView)
                     .pipe(findPositionsFromEvents({ domFunctions: codeView, tokenize }))
                     .subscribe()
diff --git a/src/positions.ts b/src/positions.ts
@@ -61,7 +61,7 @@ export const findPositionsFromEvents = ({
         ),
         from(elements).pipe(
             switchMap(element => fromEvent<MouseEvent>(element, 'click')),
-            map(event => ({ event, eventType: 'click' as 'click' })),
+            map(event => ({ event, eventType: 'click' as const })),
             // ignore click events caused by the user selecting text.
             // Selecting text should not mess with the hover, hover pinning nor the URL.
             filter(() => {
diff --git a/src/testutils/assert.ts b/src/testutils/assert.ts
@@ -1,2 +1,2 @@
-export const isWithinOne = (a: number, b: number) =>
+export const isWithinOne = (a: number, b: number): void =>
     chai.assert(Math.abs(a - b) < 1, `expected the difference between ${a} and ${b} to be less than 1`)
diff --git a/src/testutils/dom.ts b/src/testutils/dom.ts
@@ -191,6 +191,7 @@ export class DOM {
 
     /**
      * Creates and inserts the generated test cases into the DOM
+     *
      * @returns the CodeViewProps for the test cases added to the DOM.
      */
     public createCodeViews(): CodeViewProps[] {
@@ -205,6 +206,7 @@ export class DOM {
 
     /**
      * Creates a div with some arbitrary content.
+     *
      * @param html the content of the element you wish to create.
      * @returns the created div.
      */
diff --git a/src/testutils/fixtures.ts b/src/testutils/fixtures.ts
@@ -6,6 +6,7 @@ import { HoverAttachment } from '../types'
 
 /**
  * Create a stubbed HoverAttachment object.
+ *
  * @param hover optional values for the HoverAttachment object. If none is provided, we'll output defaults.
  */
 export const createHoverAttachment = (hover: Partial<HoverAttachment> = {}): HoverAttachment => ({
@@ -19,6 +20,7 @@ export const createHoverAttachment = (hover: Partial<HoverAttachment> = {}): Hov
 
 /**
  * Create a stubbed HoverProvider
+ *
  * @param hover optional values to be passed to createHoverAttachment
  * @param delayTime optionally delay the hover fetch
  */
diff --git a/src/testutils/mouse.ts b/src/testutils/mouse.ts
@@ -8,7 +8,7 @@ interface Coordinates {
     y: number
 }
 
-export const createMouseEvent = (type: string, coords: Coordinates) => {
+export const createMouseEvent = (type: string, coords: Coordinates): MouseEvent => {
     const event = new MouseEvent(type, {
         clientX: coords.x,
         clientY: coords.y,
@@ -18,22 +18,23 @@ export const createMouseEvent = (type: string, coords: Coordinates) => {
     return event
 }
 
-const invalidPosition = ({ line, character }: Position, message: string) =>
+const invalidPosition = ({ line, character }: Position, message: string): string =>
     `Invalid position L${line}:${character}. ${message}. Positions are 0-indexed.`
 
 /**
  * Dispatch a mouse event at the given position in a code element. This is impure because the current hoverifier
  * implementation requires the click event to come from the already tokenized DOM elements. Ideally we would not
  * rely on this at all.
  *
+ * @param eventType The type of event to dispatch.
  * @param codeViewProps the codeViewProps props from the test cases.
  * @param position the position of the event.
  */
 export const dispatchMouseEventAtPositionImpure = (
     eventType: 'click' | 'mouseover' | 'mousemove',
     { codeView, getCodeElementFromLineNumber }: CodeViewProps,
     position: Position
-) => {
+): void => {
     const line = getCodeElementFromLineNumber(codeView, position.line)
     if (!line) {
         throw new Error(invalidPosition(position, 'Line not found'))
@@ -74,7 +75,7 @@ export const dispatchMouseEventAtPositionImpure = (
  * @param codeViewProps the CodeViewProps from the generated test cases
  * @param position the 0-indexed position to click
  */
-export const clickPosition = ({ codeView, getCodeElementFromLineNumber }: CodeViewProps, position: Position) => {
+export const clickPosition = ({ codeView, getCodeElementFromLineNumber }: CodeViewProps, position: Position): void => {
     const line = getCodeElementFromLineNumber(codeView, position.line)
     if (!line) {
         throw new Error(invalidPosition(position, 'Line not found'))
diff --git a/src/token_position.test.ts b/src/token_position.test.ts
@@ -123,7 +123,8 @@ describe('token_positions', () => {
         })
 
         it('finds the correct token (without tokenization)', () => {
-            const content = `<span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-keyword">if</span> <span class="cm-variable">rv</span> :<span class="cm-operator">=</span> <span class="cm-variable">contextGet</span>(<span class="cm-variable">r</span>, <span class="cm-variable">varsKey</span>); <span class="cm-variable">rv</span> <span class="cm-operator">!=</span> <span class="cm-atom">nil</span> {</span>`
+            const content =
+                '<span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-keyword">if</span> <span class="cm-variable">rv</span> :<span class="cm-operator">=</span> <span class="cm-variable">contextGet</span>(<span class="cm-variable">r</span>, <span class="cm-variable">varsKey</span>); <span class="cm-variable">rv</span> <span class="cm-operator">!=</span> <span class="cm-atom">nil</span> {</span>'
 
             // Each offset is 3 more than the corresponding offset in the
             // tokenized test above because this test case comes from Bitbucket
diff --git a/src/token_position.ts b/src/token_position.ts
@@ -10,6 +10,7 @@ import { LineOrPositionOrRange } from './types'
 export interface DOMFunctions {
     /**
      * Get the element containing the code for a line from an event target.
+     *
      * @param target is the event target.
      * @returns the element containing the code for a line or null if it can't be found. For example, the second <td> inside a <tr> on Sourcegraph and Github.
      */
@@ -27,6 +28,7 @@ export interface DOMFunctions {
     /**
      * Gets the line number for a given element containing code for a line.
      * When this function is called, it will be passed the result of either `getCodeElementFromTarget` or `getCodeElementFromLineNumber`.
+     *
      * @param codeElement The element containing code for a line.
      * @returns The line number.
      */
@@ -55,7 +57,7 @@ export interface DOMFunctions {
  * Like `convertNode`, but idempotent.
  * The CSS class `annotated` is used to check if the cell is already converted.
  *
- * @param cell The code `<td>` to convert.
+ * @param element The code `<td>` to convert.
  */
 export function convertCodeElementIdempotent(element: HTMLElement): void {
     if (element && !element.classList.contains('annotated')) {
@@ -197,6 +199,7 @@ function isSameTokenType(tokenType: TokenType, node: Node): boolean {
  * consumeNextToken parses the text content of a text node and returns the next "distinct"
  * code token. It handles edge case #1 from convertNode(). The tokenization scheme is
  * heuristic-based and uses simple regular expressions.
+ *
  * @param txt Aribitrary text to tokenize.
  */
 function consumeNextToken(txt: string): string {
@@ -365,6 +368,7 @@ export interface HoveredToken {
  * It works by traversing the DOM until the HTMLElement's TD ancestor. Once the ancestor is found, we traverse the DOM again
  * (this time the opposite direction) counting characters until the original target is found.
  * Returns undefined if line/char cannot be determined for the provided target.
+ *
  * @param target The element to compute line & character offset for.
  * @param ignoreFirstChar Whether to ignore the first character on a line when computing character offset.
  */
@@ -402,13 +406,11 @@ export function locateTarget(
         if (root === target) {
             return true
         }
-        // tslint:disable-next-line
-        for (let i = 0; i < root.childNodes.length; ++i) {
-            const child = root.childNodes[i] as HTMLElement
+        for (const child of root.childNodes) {
             if (child === target) {
                 return true
             }
-            if (child.children === undefined) {
+            if (!(child instanceof HTMLElement)) {
                 character += child.textContent!.length
                 continue
             }
@@ -417,7 +419,7 @@ export function locateTarget(
                 return true
             }
             if (child.children.length === 0) {
-                // Child is not the original target, but has no chidren to recurse on. Add to character offset.
+                // Child is not the original target, but has no children to recurse on. Add to character offset.
                 character += (child.textContent as string).length // TODO(john): I think this needs to be escaped before we add its length...
                 if (ignoreFirstCharacter) {
                     character -= 1
diff --git a/src/types.ts b/src/types.ts
@@ -2,7 +2,7 @@ import { Position, Range } from '@sourcegraph/extension-api-types'
 import { ErrorLike } from './errors'
 import { HoveredToken } from './token_position'
 
-export const LOADING: 'loading' = 'loading'
+export const LOADING = 'loading' as const
 
 /**
  * @template C Extra context for the hovered token.
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@sourcegraph/tsconfig/tsconfig.json",
+  "extends": "@sourcegraph/tsconfig",
   "compilerOptions": {
     "target": "es2018",
     "module": "es2015",
@@ -11,4 +11,5 @@
     "esModuleInterop": true,
     "lib": ["es2017", "dom", "dom.iterable"],
   },
+  "include": ["**/*"],
 }
diff --git a/tslint.json b/tslint.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -529,7 +529,7 @@ export function createHoverifier<C extends object, D, A>({`
`529`	`529`	`}`
`530`	`530`	`return {`
`531`	`531`	`...rest,`
`532`		`- eventType: 'jump' as 'jump',`
	`532`	`+ eventType: 'jump' as const,`
`533`	`533`	`target,`
`534`	`534`	`position: { ...position, part },`
`535`	`535`	`codeView,`
`@@ -891,7 +891,7 @@ export function createHoverifier<C extends object, D, A>({`
`891`	`891`	`)`
`892`	`892`	`}`
`893`	`893`
`894`		`- const resetHover = () => {`
	`894`	`+ const resetHover = (): void => {`
`895`	`895`	`container.update({`
`896`	`896`	`hoverOverlayIsFixed: false,`
`897`	`897`	`hoverOverlayPosition: undefined,`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-export const isWithinOne = (a: number, b: number) =>`
	`1`	`+export const isWithinOne = (a: number, b: number): void =>`
`2`	`2`	chai.assert(Math.abs(a - b) < 1, `expected the difference between ${a} and ${b} to be less than 1`)