refactor: add eslint as the default linter

microsoft · Jun 14, 2019 · 5465119 · 5465119
1 parent 5817757
commit 5465119
Show file tree

Hide file tree

Showing 34 changed files with 402 additions and 51 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,6 @@
+node_modules/
+lib/
+dist/
+out/
+public/
+static/
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,40 @@
+{
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"ecmaVersion": 2018
+	},
+	"plugins": ["@typescript-eslint"],
+	"extends": [
+		"eslint:recommended",
+		"plugin:react/recommended",
+		"plugin:@typescript-eslint/recommended",
+		"prettier",
+		"prettier/@typescript-eslint"
+	],
+	"settings": {
+		"react": {
+			"version": "16.8"
+		}
+	},
+	"env": {
+		"node": true,
+		"browser": true,
+		"mocha": true,
+		"es6": true,
+		"jest": true
+	},
+	"globals": {
+		"Promise": "readonly"
+	},
+	"rules": {
+		"@typescript-eslint/no-parameter-properties": 0,
+		"@typescript-eslint/explicit-function-return-type": 0,
+		"@typescript-eslint/no-explicit-any": 0,
+		"@typescript-eslint/no-var-requires": 0,
+		"@typescript-eslint/array-type": 0,
+		"@typescript-eslint/no-use-before-define": 0,
+		"@typescript-eslint/no-non-null-assertion": 0,
+		"react/prop-types": 0,
+		"no-inner-declarations": 0
+	}
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,7 +1,7 @@
 {
-    "recommendations": [
-        "esbenp.prettier-vscode",
-        "eg2.tslint",
-        "jpoissonnier.vscode-styled-components"
-    ]
-}
+	"recommendations": [
+		"esbenp.prettier-vscode",
+		"dbaeumer.vscode-eslint",
+		"jpoissonnier.vscode-styled-components"
+	]
+}
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
 		"start:packages": "lerna run start --parallel --stream",
 		"test:packages": "lerna run test --stream",
 		"release:packages": "lerna run release --stream",
-		"lint": "lerna run lint --parallel --stream",
+		"lint": "eslint . --ext .js,.ts,.jsx,.tsx",
 		"unit_test": "jest --coverage",
 		"test": "run-s lint build unit_test test:packages",
 		"lerna:publish": "lerna --registry https://msrp-essex.pkgs.visualstudio.com/_packaging/essex-npm/npm/registry/ publish",
@@ -35,6 +35,12 @@
 		"prettier": "^1.18.2",
 		"rxjs": "^6.5.2",
 		"ts-jest": "^24.0.2",
+		"@typescript-eslint/eslint-plugin": "^1.10.2",
+		"@typescript-eslint/parser": "^1.10.2",
+		"eslint": "^5.16.0",
+		"eslint-config-prettier": "^4.3.0",
+		"eslint-plugin-react": "^7.13.0",
+		"eslint-plugin-react-hooks": "^1.6.0",
 		"tslint": "^5.17.0",
 		"tslint-config-prettier": "^1.18.0",
 		"tslint-react": "^4.0.0",
@@ -48,7 +54,7 @@
 	},
 	"lint-staged": {
 		"**/*.{ts,tsx}": [
-			"tslint --fix",
+			"eslint --fix",
 			"prettier --write",
 			"git add"
 		]

diff --git a/packages/client/builder/.eslintrc b/packages/client/builder/.eslintrc
@@ -0,0 +1,5 @@
+{
+	"rules": {
+		"@typescript-eslint/no-empty-interface": 0
+	}
+}
diff --git a/packages/client/builder/src/AxisBuilder.ts b/packages/client/builder/src/AxisBuilder.ts
@@ -53,7 +53,11 @@ export class AxisBuilder {
 	private labelFormatValue?: string
 
 	// #endregion
-	constructor(private scaleName: string, private orientValue: AxisOrientation) {
+
+	public constructor(
+		private scaleName: string,
+		private orientValue: AxisOrientation,
+	) {
 		if (!this.scaleName) {
 			throw new Error('scale name must be defined')
 		}

diff --git a/packages/client/builder/src/ChartOptionsManager.ts b/packages/client/builder/src/ChartOptionsManager.ts
@@ -11,7 +11,7 @@ import {
 } from '@chart-parts/interfaces'
 
 export class ChartOptionsManager {
-	constructor(private options: ChartOptions = {}) {}
+	public constructor(private options: ChartOptions = {}) {}
 
 	public get ariaTitle() {
 		return this.options.ariaTitle || 'data visualization using chart-parts'

diff --git a/packages/client/builder/src/MarkBuilder.ts b/packages/client/builder/src/MarkBuilder.ts
@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 
-// tslint:disable no-this-assignment unified-signatures
+/* eslint-disable no-dupe-class-members */
 import {
 	Mark,
 	Channels,
@@ -41,7 +41,7 @@ export class MarkBuilder {
 	private encodingsValue: MarkEncodings = {}
 	private metadataValue?: MarkEncoding<Metadata>
 
-	constructor(private type: MarkType) {}
+	public constructor(private type: MarkType) {}
 
 	public table(table: string): MarkBuilder {
 		this.tableValue = table

diff --git a/packages/client/interfaces/.eslintrc b/packages/client/interfaces/.eslintrc
@@ -0,0 +1,5 @@
+{
+	"rules": {
+		"@typescript-eslint/no-empty-interface": 0
+	}
+}
diff --git a/packages/client/react/.eslintrc b/packages/client/react/.eslintrc
@@ -0,0 +1,5 @@
+{
+	"rules": {
+		"@typescript-eslint/no-empty-interface": 0
+	}
+}
diff --git a/packages/client/react/src/Chart.tsx b/packages/client/react/src/Chart.tsx
@@ -39,7 +39,7 @@ export interface ChartState {
 export class Chart extends React.Component<ChartProps, ChartState> {
 	private pipeline: Orchestrator<React.ReactNode>
 
-	constructor(props: ChartProps) {
+	public constructor(props: ChartProps) {
 		super(props)
 		this.pipeline = new Orchestrator(props.renderer)
 		this.state = { rendered: null }

diff --git a/packages/documentation/.eslintrc b/packages/documentation/.eslintrc
@@ -1,2 +1,5 @@
 {
-}
+  "rules": {
+    "react/no-unescaped-entities": 0
+  }
+}
diff --git a/packages/documentation/gatsby-node.js b/packages/documentation/gatsby-node.js
@@ -31,6 +31,7 @@ async function createPages({ actions, graphql }) {
   const result = await retrieveMarkdownPages()
 
   if (result.errors) {
+    // eslint-disable-next-line no-console
     console.error('graphql error', result.errors)
     throw new Error('Error invoking graphql for pages')
   }

diff --git a/packages/documentation/src/components/sidebar/link_tree.tsx b/packages/documentation/src/components/sidebar/link_tree.tsx
@@ -32,7 +32,7 @@ export default class LinkTree extends React.Component<
   LinkTreeProps,
   LinkTreeState
 > {
-  constructor(props: LinkTreeProps) {
+  public constructor(props: LinkTreeProps) {
     super(props)
     this.state = { expanded: !!props.expanded, hasBeenManuallyToggled: false }
   }

diff --git a/packages/documentation/src/examples/mark-testers/util/single-mark-tester.tsx b/packages/documentation/src/examples/mark-testers/util/single-mark-tester.tsx
@@ -62,7 +62,7 @@ export class SingleMarkTester extends React.Component<
   SingleMarkTesterProps,
   SingleMarkTesterState
 > {
-  constructor(props: SingleMarkTesterProps) {
+  public constructor(props: SingleMarkTesterProps) {
     super(props)
     this.state = { scenegraph: props.initialScenegraph }
   }

diff --git a/packages/examples/mobile/.eslintrc b/packages/examples/mobile/.eslintrc
@@ -0,0 +1,5 @@
+{
+	"rules": {
+		"no-console": 0
+	}
+}
diff --git a/packages/examples/mobile/clear-rn-cache.js b/packages/examples/mobile/clear-rn-cache.js
@@ -5,7 +5,7 @@ const rimraf = require('rimraf')
 function clear(pattern) {
 	return new Promise((resolve, reject) => {
 		const target = path.join(os.tmpdir(), pattern)
-		rimraf(target, (err, done) => {
+		rimraf(target, err => {
 			console.log(`Cleared Cache at ${target}`)
 			err ? reject(err) : resolve
 		})

diff --git a/packages/examples/mobile/src/Chart.js b/packages/examples/mobile/src/Chart.js
@@ -12,7 +12,7 @@ const pipeline = new Orchestrator(new Renderer())
 const renderChart = chart =>
 	pipeline.renderScenegraph(chart.scenegraph, chart.dimensions)
 
-export default () => (
+const Chart = () => (
 	<FlatList
 		style={{ flex: 1 }}
 		data={testCharts}
@@ -22,3 +22,5 @@ export default () => (
 		)}
 	/>
 )
+Chart.displayName = 'Chart'
+export default Chart
diff --git a/packages/examples/testdata/CAPTURE_UTIL.js b/packages/examples/testdata/CAPTURE_UTIL.js
@@ -7,6 +7,7 @@
  * 4) Evaluate scene to console
  * 5) Paste this function in
  */
+/* eslint-disable */
 JSON.stringify(scene, (key, value) => {
 	if (
 		key === 'mark' ||

diff --git a/packages/examples/web/.eslintrc b/packages/examples/web/.eslintrc
@@ -0,0 +1,5 @@
+{
+	"rules": {
+		"@typescript-eslint/explicit-function-return-type": 0
+	}
+}
diff --git a/packages/examples/web/stories/builder-examples/BarChart.tsx b/packages/examples/web/stories/builder-examples/BarChart.tsx
@@ -30,7 +30,7 @@ export interface BarChartState {
 export class BarChart extends React.Component<{}, BarChartState> {
 	private chart: SceneNode
 
-	constructor(props: {}) {
+	public constructor(props: {}) {
 		super(props)
 		this.state = { hoverRowIndex: undefined }
 		const isHovered = (index: number) => this.state.hoverRowIndex === index

diff --git a/packages/examples/web/stories/builder-examples/BarChartUtc.tsx b/packages/examples/web/stories/builder-examples/BarChartUtc.tsx
@@ -28,7 +28,7 @@ export interface BarChartState {
 export class BarChartUtc extends React.Component<{}, BarChartState> {
 	private chart: SceneNode
 
-	constructor(props: {}) {
+	public constructor(props: {}) {
 		super(props)
 		this.state = { hoverRowIndex: undefined }
 		const isHovered = (index: number) => this.state.hoverRowIndex === index

diff --git a/packages/examples/web/stories/builder-examples/GroupedBarChart.tsx b/packages/examples/web/stories/builder-examples/GroupedBarChart.tsx
@@ -40,7 +40,7 @@ const data = [
 export class GroupedBarChart extends React.Component<{}> {
 	private chart: SceneNode
 
-	constructor(props: {}) {
+	public constructor(props: {}) {
 		super(props)
 
 		this.chart = scene(

diff --git a/packages/examples/web/stories/renderless-examples/BarChart.tsx b/packages/examples/web/stories/renderless-examples/BarChart.tsx
@@ -37,7 +37,7 @@ export interface BarChartState {
  * Adapted from https://vega.github.io/vega/examples/bar-chart/
  */
 export class BarChart extends React.Component<{}, BarChartState> {
-	constructor(props: {}) {
+	public constructor(props: {}) {
 		super(props)
 		this.state = { hoverRowIndex: undefined }
 	}

diff --git a/packages/examples/web/stories/renderless-examples/LineChart.tsx b/packages/examples/web/stories/renderless-examples/LineChart.tsx
@@ -1,4 +1,4 @@
-// tslint:disable
+/* eslint-disable @typescript-eslint/camelcase */
 import * as React from 'react'
 import { VerticalTextAlignment } from '@chart-parts/interfaces'
 import {
@@ -112,7 +112,7 @@ const TEXT_GROUP_HEIGHT = 110
  * Adapted from https://vega.github.io/vega/examples/bar-chart/
  */
 export class LineChart extends React.Component<{}, BarChartState> {
-	constructor(props: {}) {
+	public constructor(props: {}) {
 		super(props)
 		this.state = { hoverRowIndex: undefined }
 	}

diff --git a/packages/processing/orchestrator/src/Orchestrator.ts b/packages/processing/orchestrator/src/Orchestrator.ts
@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 
-// tslint:disable no-console
+/* eslint-disable no-console */
 import {
 	ChartOptions,
 	SceneNode,
@@ -16,7 +16,7 @@ import { VirtualSvgConverter } from '@chart-parts/vsvg'
 import { createScenegraph } from '@chart-parts/scene'
 
 export class Orchestrator<T> {
-	constructor(
+	public constructor(
 		private renderer: VDomRenderer<T>,
 		private prerenderer: ScenegraphConverter<any> = new VirtualSvgConverter(),
 	) {}

diff --git a/packages/processing/scene/src/scene/SceneFrame.ts b/packages/processing/scene/src/scene/SceneFrame.ts
@@ -20,7 +20,7 @@ import {
  * information for a section of a scene, including dimensions, scales, data, and event handlers
  */
 export class SceneFrame {
-	constructor(
+	public constructor(
 		public node: SceneNode,
 		public mark: Mark | undefined,
 		public data: DataFrame,

diff --git a/packages/processing/scenegraph/src/MarkBuilder.ts b/packages/processing/scenegraph/src/MarkBuilder.ts
@@ -14,7 +14,7 @@ export class MarkBuilder {
 	private nameValue?: string
 	private zIndexValue?: number
 
-	constructor(public markType: MarkType) {}
+	public constructor(public markType: MarkType) {}
 
 	public items(...values: any[]): MarkBuilder {
 		this.itemsValue.push(

diff --git a/packages/util/scales/src/DomainScale.ts b/packages/util/scales/src/DomainScale.ts
@@ -96,7 +96,7 @@ export abstract class DomainScale<Domain> implements ScaleBuilder {
 			: (bindDomain as string[])
 	}
 
-	get tableBind(): string | undefined {
+	private get tableBind(): string | undefined {
 		const bind = this.bindDomainValue
 		if (!bind) {
 			return undefined
@@ -109,7 +109,7 @@ export abstract class DomainScale<Domain> implements ScaleBuilder {
 		return tableName
 	}
 
-	get fieldBind() {
+	private get fieldBind() {
 		const bind = this.bindDomainValue
 		if (!bind) {
 			return undefined

diff --git a/packages/util/shapes/src/Rectangle.ts b/packages/util/shapes/src/Rectangle.ts
@@ -8,7 +8,7 @@ import { SGRectItem } from '@chart-parts/interfaces'
 import { Xform } from './util'
 
 export class Rectangle {
-	constructor(
+	public constructor(
 		public x: Xform<SGRectItem, number> = d => d.x || 0,
 		public y: Xform<SGRectItem, number> = d => d.y || 0,
 		public width: Xform<SGRectItem, number> = d => d.width || 0,

diff --git a/packages/util/shapes/src/arc.ts b/packages/util/shapes/src/arc.ts
@@ -2,9 +2,9 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-
-export const segmentCache: { [key: string]: any } = {}
-export const bezierCache: { [key: string]: any } = {}
+/* eslint-disable @typescript-eslint/camelcase */
+export const segmentCache: Record<string, any> = {}
+export const bezierCache: Record<string, any> = {}
 
 const join = [].join