Use ESlint instead of TSlint (#4901)

.eslintrc.js

@@ -0,0 +1,56 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "prettier"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    // project: "tsconfig.json", // makes things slow, see https://github.com/typescript-eslint/typescript-eslint/issues/389
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: "module" // Allows for the use of imports
+  },
+  rules: {
+    "prettier/prettier": "warn",
+    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/prefer-for-of": "error",
+    // "@typescript-eslint/no-for-in-array": "error", // requires type information
+    "@typescript-eslint/no-require-imports": "error",
+    "@typescript-eslint/no-parameter-properties": "off",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        vars: "all",
+        args: "after-used",
+        ignoreRestSiblings: true
+      }
+    ],
+    "@typescript-eslint/no-object-literal-type-assertion": "off", // we can do this later
+    "@typescript-eslint/no-namespace": "off", // we can do this later
+    // https://eslint.org/docs/rules/
+    "linebreak-style": ["error", "unix"],
+    "no-irregular-whitespace": ["error", { skipComments: true }],
+    "no-alert": "error",
+    "prefer-const": "error",
+    "no-return-assign": "error",
+    "no-useless-call": "error",
+    "no-shadow": "error",
+    "no-useless-concat": "error",
+    // "prefer-template": "error",  // we can do this later
+    "no-console": "off", // we use console
+    "no-undef": "off", // typescript takes care of this for us
+    "no-unreachable": "off" // typescript takes care of this for us
+  }
+};

.npmignore

@@ -22,7 +22,8 @@ jest-puppeteer.config.js
 npm-debug.log*
 rollup.config.js
 tsconfig.json
-tslint.json
+.eslintrc.js
+prettier*
 yarn-debug.log*
 yarn-error.log*
 *.tsbuildinfo

.vscode/settings.json

@@ -1,9 +1,11 @@
 // Place your settings in this file to overwrite default and user settings.
 {
   "editor.tabSize": 2,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.tslint": true
-  },
+  "editor.trimAutoWhitespace": true,
+  "files.insertFinalNewline": true,
+  "editor.insertSpaces": true,
+  "editor.detectIndentation": false,
+  "editor.formatOnSave": true,
   "files.exclude": {
     "coverage/**/*": true,
     "_site/**/*": true
@@ -12,10 +14,9 @@
     "build": true
   },
   "files.trimTrailingWhitespace": true,
-  "tsimporter.filesToExclude": ["build/**"],
-  "tsimporter.spaceBetweenBraces": false,
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
-  "editor.formatOnSave": true,
-  "typescript.referencesCodeLens.enabled": true
+  "typescript.referencesCodeLens.enabled": true,
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "eslint.autoFixOnSave": true
 }

CONTRIBUTING.md

@@ -176,7 +176,7 @@ We use the [Visual Studio Code](https://code.visualstudio.com/) editor.
 
 - VSCode has nice built-in Typescript support!
 - We already include project settings to hide compiled files (`*.js`, `*.js.map`). This should work automatically if you open the `vega-lite` folder with VSCode.
-- Make sure to install [TSLint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint), [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extensions.
+- Make sure to install [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extensions.
 - The [vscode-jest-runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) extension is also very helpful for debugging tests.
 
 ## Manually Testing with Vega-Editor

_config.yml

@@ -12,6 +12,11 @@ exclude:
   - bin
   - .github
   - .vscode
+  - .eslintrc.js
+  - .prettierrc
+  - .prettierignore
+  - .travis.yml
+  - .npmignore
   - coverage
   - Gemfile
   - Gemfile.lock
@@ -23,7 +28,6 @@ exclude:
   - package.json
   - yarn.lock
   - tsconfig.json
-  - tslint.json
   - nodemon.json
   - LICENSE
   - README.md

build/vega-lite-schema.json

@@ -9361,7 +9361,7 @@
           "description": "Extending the domain so that it starts and ends on nice round values. This method typically modifies the scale’s domain, and may only extend the bounds to the nearest round value. Nicing is useful if the domain is computed from data and may be irregular. For example, for a domain of _[0.201479…, 0.996679…]_, a nice domain might be _[0.2, 1.0]_.\n\nFor quantitative scales such as linear, `nice` can be either a boolean flag or a number. If `nice` is a number, it will represent a desired tick count. This allows greater control over the step size used to extend the bounds, guaranteeing that the returned ticks will exactly cover the domain.\n\nFor temporal fields with time and utc scales, the `nice` value can be a string indicating the desired time interval. Legal values are `\"millisecond\"`, `\"second\"`, `\"minute\"`, `\"hour\"`, `\"day\"`, `\"week\"`, `\"month\"`, and `\"year\"`. Alternatively, `time` and `utc` scales can accept an object-valued interval specifier of the form `{\"interval\": \"month\", \"step\": 3}`, which includes a desired number of interval steps. Here, the domain would snap to quarter (Jan, Apr, Jul, Oct) boundaries.\n\n__Default value:__ `true` for unbinned _quantitative_ fields; `false` otherwise."
         },
         "padding": {
-          "description": "For _[continuous](https://vega.github.io/vega-lite/docs/scale.html#continuous)_ scales, expands the scale domain to accommodate the specified number of pixels on each of the scale range. The scale range must represent pixels for this parameter to function as intended. Padding adjustment is performed prior to all other adjustments, including the effects of the zero, nice, domainMin, and domainMax properties.\n\nFor _[band](https://vega.github.io/vega-lite/docs/scale.html#band)_ scales, shortcut for setting `paddingInner` and `paddingOuter` to the same value.\n\nFor _[point](https://vega.github.io/vega-lite/docs/scale.html#point)_ scales, alias for `paddingOuter`.\n\n__Default value:__ For _continuous_ scales, derived from the [scale config](https://vega.github.io/vega-lite/docs/scale.html#config)'s `continuousPadding`.\nFor _band and point_ scales, see `paddingInner` and `paddingOuter`.",
+          "description": "For _[continuous](https://vega.github.io/vega-lite/docs/scale.html#continuous)_ scales, expands the scale domain to accommodate the specified number of pixels on each of the scale range. The scale range must represent pixels for this parameter to function as intended. Padding adjustment is performed prior to all other adjustments, including the effects of the `zero`, `nice`, `domainMin`, and `domainMax` properties.\n\nFor _[band](https://vega.github.io/vega-lite/docs/scale.html#band)_ scales, shortcut for setting `paddingInner` and `paddingOuter` to the same value.\n\nFor _[point](https://vega.github.io/vega-lite/docs/scale.html#point)_ scales, alias for `paddingOuter`.\n\n__Default value:__ For _continuous_ scales, derived from the [scale config](https://vega.github.io/vega-lite/docs/scale.html#config)'s `continuousPadding`.\nFor _band and point_ scales, see `paddingInner` and `paddingOuter`.",
           "minimum": 0,
           "type": "number"
         },

package.json

@@ -46,9 +46,10 @@
     "site": "bundle exec jekyll serve --incremental",
     "tsc:src": "tsc -b src/tsconfig.src.json",
     "tsc:site": "tsc -b site/tsconfig.site.json",
-    "prettierbase": "prettier '{src,test,test-runtime,site,typings}/**/*.{ts,md,css}'",
-    "format": "tslint -p . --fix && npm run prettierbase -- --write",
-    "lint": "tslint -p . && npm run prettierbase -- --check",
+    "prettierbase": "prettier '{src,test,test-runtime,site,typings}/**/*.{md,css}'",
+    "eslintbase": "eslint '{src,test,test-runtime,site,typings}/**/*.{ts,js}'",
+    "format": "npm run eslintbase -- --fix && npm run prettierbase -- --write",
+    "lint": "npm run eslintbase && npm run prettierbase -- --check",
     "test": "jest test/ && npm run lint && npm run schema && jest examples/ && npm run test:runtime",
     "test:inspect": "node --inspect-brk ./node_modules/.bin/jest --runInBand test",
     "test:runtime": "TZ=America/Los_Angeles jest test-runtime/",
@@ -74,12 +75,17 @@
     "@types/mkdirp": "^0.5.2",
     "@types/node": "^12.0.2",
     "@types/puppeteer": "^1.12.4",
+    "@typescript-eslint/eslint-plugin": "^1.9.0",
+    "@typescript-eslint/parser": "^1.9.0",
     "ajv": "^6.10.0",
     "chai": "^4.2.0",
     "cheerio": "^1.0.0-rc.2",
     "codecov": "^3.5.0",
     "concurrently": "^4.1.0",
     "d3": "^5.9.2",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-prettier": "^3.1.0",
     "highlight.js": "^9.15.6",
     "http-server": "^0.11.1",
     "jest": "^24.8.0",
@@ -97,8 +103,6 @@
     "terser": "^3.17.0",
     "ts-jest": "^24.0.2",
     "ts-json-schema-generator": "^0.41.0",
-    "tslint": "5.16.0",
-    "tslint-config-prettier": "^1.18.0",
     "typescript": "^3.4.5",
     "vega-cli": "^5.4.0",
     "vega-datasets": "^1.25.0",

scripts/check-and-fix.sh

@@ -71,7 +71,7 @@ echo ""
 if [[ $TRAVIS_BRANCH != 'master' ]]; then
   yarn format
 
-  ## For non-master branch, commit tslint fix and prettier changes if outdated
+  ## For non-master branch, commit eslint fix and prettier changes if outdated
   if ! git diff --word-diff=color --exit-code HEAD -- src test test-runtime
   then
     git add src test test-runtime

site/static/index.ts

@@ -48,7 +48,7 @@ selectAll('h2, h3, h4, h5, h6').each(function(this: d3.BaseType) {
   const sel = select(this);
   const name = sel.attr('id');
   const title = sel.text();
-  sel.html('<a href="#' + name + '" class="anchor"><span class="octicon octicon-link"></span></a>' + trim(title));
+  sel.html(`<a href="#${name}" class="anchor"><span class="octicon octicon-link"></span></a>${trim(title)}`);
 });
 
 /* Documentation */
@@ -59,7 +59,7 @@ function renderExample($target: Selection<any, any, any, any>, specText: string)
   const vis = $target.append('div').attr('class', 'example-vis');
 
   // Decrease visual noise by removing $schema and description from code examples.
-  const textClean = specText.replace(/(\s)+\"(\$schema|description)\": \".*?\",/g, '');
+  const textClean = specText.replace(/(\s)+"(\$schema|description)": ".*?",/g, '');
   const code = $target
     .append('pre')
     .attr('class', 'example-code')
@@ -92,7 +92,6 @@ export function embedExample($target: any, spec: TopLevelSpec, actions = true, t
       .append('a')
       .text('Open in Vega Editor')
       .attr('href', '#')
-      // tslint:disable-next-line
       .on('click', function() {
         post(window, editorURL, {
           mode: 'vega-lite',
@@ -196,8 +195,8 @@ function setSlide(
 ) {
   return () => {
     // Reset all slides
-    for (let i = 0; i < indicators.length; i++) {
-      indicators[i].setAttribute('data-state', '');
+    for (const [i, indicator] of indicators.entries()) {
+      indicator.setAttribute('data-state', '');
       slides[i].setAttribute('data-state', '');
       carouselHide(slides, indicators, links, i);
     }
@@ -222,17 +221,12 @@ if (carousel) {
   const indicators = carousel.querySelectorAll('.indicator');
   const links = carousel.querySelectorAll('.slide-nav');
 
-  // tslint:disable-next-line:prefer-for-of
-  for (let i = 0; i < indicators.length; i++) {
-    indicators[i].addEventListener(
-      'click',
-      setSlide(slides, indicators, links, +indicators[i].getAttribute('data-slide'))
-    );
+  for (const indicator of indicators) {
+    indicator.addEventListener('click', setSlide(slides, indicators, links, +indicator.getAttribute('data-slide')));
   }
 
-  // tslint:disable-next-line:prefer-for-of
-  for (let i = 0; i < links.length; i++) {
-    links[i].addEventListener('click', setSlide(slides, indicators, links, +links[i].getAttribute('data-slide')));
+  for (const link of links) {
+    link.addEventListener('click', setSlide(slides, indicators, links, +link.getAttribute('data-slide')));
   }
 
   carousel.querySelector('.next-slide').addEventListener('click', () => {

site/static/post.ts

@@ -12,7 +12,7 @@ export type Config = VlConfig | VgConfig;
  * Open editor url in a new window, and pass a message.
  */
 export function post(window: Window, url: string, data: {config?: any; mode: any; renderer?: Renderers; spec: string}) {
-  const editor = window.open(url)!;
+  const editor = window.open(url);
   const wait = 10000;
   const step = 250;
   let count = ~~(wait / step);

src/bin.ts

@@ -133,7 +133,7 @@ export function autoMaxBins(channel: Channel): number {
     case FILLOPACITY:
     case STROKEOPACITY:
     // Facets and Size shouldn't have too many bins
-    // We choose 6 like shape to simplify the rule
+    // We choose 6 like shape to simplify the rule [falls through]
     case SHAPE:
       return 6; // Vega's "shape" has 6 distinct values
     default:

src/channel.ts

@@ -323,6 +323,7 @@ function getSupportedMark(channel: Channel): SupportedMark {
     case COLOR:
     case FILL:
     case STROKE:
+    // falls through
 
     case DETAIL:
     case KEY:
@@ -333,9 +334,10 @@ function getSupportedMark(channel: Channel): SupportedMark {
     case FILLOPACITY:
     case STROKEOPACITY:
     case STROKEWIDTH:
+    // falls through
 
     case FACET:
-    case ROW:
+    case ROW: // falls through
     case COLUMN:
       return {
         // all marks
@@ -412,7 +414,8 @@ export function rangeType(channel: Channel): RangeType {
     case OPACITY:
     case FILLOPACITY:
     case STROKEOPACITY:
-    // X2 and Y2 use X and Y scales, so they similarly have continuous range.
+
+    // X2 and Y2 use X and Y scales, so they similarly have continuous range. [falls through]
     case X2:
     case Y2:
       return undefined;
@@ -421,7 +424,7 @@ export function rangeType(channel: Channel): RangeType {
     case ROW:
     case COLUMN:
     case SHAPE:
-    // TEXT, TOOLTIP, and HREF have no scale but have discrete output
+    // TEXT, TOOLTIP, and HREF have no scale but have discrete output [falls through]
     case TEXT:
     case TOOLTIP:
     case HREF:

src/channeldef.ts

@@ -594,7 +594,7 @@ export function verbalTitleFormatter(fieldDef: FieldDefBase<string>, config: Con
   return field;
 }
 
-export function functionalTitleFormatter(fieldDef: FieldDefBase<string>, config: Config) {
+export function functionalTitleFormatter(fieldDef: FieldDefBase<string>) {
   const {aggregate, bin, timeUnit, field} = fieldDef;
   if (isArgmaxDef(aggregate)) {
     return `${field} for argmax(${aggregate.argmax})`;
@@ -615,7 +615,7 @@ export const defaultTitleFormatter: FieldTitleFormatter = (fieldDef: FieldDefBas
     case 'plain':
       return fieldDef.field;
     case 'functional':
-      return functionalTitleFormatter(fieldDef, config);
+      return functionalTitleFormatter(fieldDef);
     default:
       return verbalTitleFormatter(fieldDef, config);
   }

src/compile/axis/encode.ts

@@ -1,12 +1,11 @@
-import {AxisOrient} from 'vega';
 import {PositionScaleChannel} from '../../channel';
 import {isTimeFormatFieldDef} from '../../channeldef';
 import {ScaleType} from '../../scale';
 import {keys} from '../../util';
 import {timeFormatExpression} from '../common';
 import {UnitModel} from '../unit';
 
-export function labels(model: UnitModel, channel: PositionScaleChannel, specifiedLabelsSpec: any, orient: AxisOrient) {
+export function labels(model: UnitModel, channel: PositionScaleChannel, specifiedLabelsSpec: any) {
   const fieldDef =
     model.fieldDef(channel) ||
     (channel === 'x' ? model.fieldDef('x2') : channel === 'y' ? model.fieldDef('y2') : undefined);

src/compile/axis/parse.ts

@@ -260,10 +260,7 @@ function parseAxis(channel: PositionScaleChannel, model: UnitModel): AxisCompone
 
       const axisEncodingPart = guideEncodeEntry(axisEncoding[part] || {}, model);
 
-      const value =
-        part === 'labels'
-          ? encode.labels(model, channel, axisEncodingPart, axisComponent.get('orient'))
-          : axisEncodingPart;
+      const value = part === 'labels' ? encode.labels(model, channel, axisEncodingPart) : axisEncodingPart;
 
       if (value !== undefined && keys(value).length > 0) {
         e[part] = {update: value};
@@ -336,15 +333,14 @@ function getProperty<K extends keyof AxisComponentProps>(
       return orient;
     case 'tickCount': {
       const scaleType = model.getScaleComponent(channel).get('type');
-      const scaleName = model.scaleName(channel);
       const sizeType = channel === 'x' ? 'width' : channel === 'y' ? 'height' : undefined;
       const size = sizeType ? model.getSizeSignalRef(sizeType) : undefined;
       return getFirstDefined<number | SignalRef>(
         specifiedAxis.tickCount,
-        properties.defaultTickCount({fieldDef, scaleType, size, scaleName, specifiedAxis})
+        properties.defaultTickCount({fieldDef, scaleType, size})
       );
     }
-    case 'title':
+    case 'title': {
       const channel2 = channel === 'x' ? 'x2' : 'y2';
       const fieldDef2 = model.fieldDef(channel2);
       // Keep undefined so we use default if title is unspecified.
@@ -354,9 +350,9 @@ function getProperty<K extends keyof AxisComponentProps>(
         getFieldDefTitle(model, channel), // If title not specified, store base parts of fieldDef (and fieldDef2 if exists)
         mergeTitleFieldDefs([toFieldDefBase(fieldDef)], fieldDef2 ? [toFieldDefBase(fieldDef2)] : [])
       );
-
+    }
     case 'values':
-      return properties.values(specifiedAxis, model, fieldDef, channel);
+      return properties.values(specifiedAxis, model, fieldDef);
   }
   // Otherwise, return specified property.
   return isAxisProperty(property) ? specifiedAxis[property] : undefined;