Use ESlint instead of TSlint

.eslintrc.js

@@ -0,0 +1,62 @@
+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": 0,
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    // "@typescript-eslint/prefer-for-of": 1, // wait for release
+    // "@typescript-eslint/no-for-in-array": 1, // requires type information
+    "@typescript-eslint/no-require-imports": 1,
+    "@typescript-eslint/no-parameter-properties": 0,
+    "@typescript-eslint/explicit-member-accessibility": 0,
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        vars: "all",
+        args: "after-used",
+        ignoreRestSiblings: true
+      }
+    ],
+    "@typescript-eslint/no-object-literal-type-assertion": [
+      "error",
+      {
+        allowAsParameter: true
+      }
+    ],
+    "@typescript-eslint/no-object-literal-type-assertion": 0,
+    "@typescript-eslint/no-namespace": 0, // we can do this later
+    // https://eslint.org/docs/rules/
+    "linebreak-style": ["error", "unix"],
+    "no-irregular-whitespace": ["error", { skipComments: true }],
+    "no-alert": 1,
+    "prefer-const": 1,
+    "no-return-assign": 1,
+    "no-useless-call": 1,
+    "no-shadow": 1,
+    "no-useless-concat": 1,
+    // "prefer-template": 1,  // we can do this later
+    "no-console": 0, // we use console
+    "no-undef": 0, // typescript takes care of this for us
+    "no-unreachable": 0 // typescript takes care of this for us
+  }
+};

.npmignore

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

.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

package.json

@@ -44,9 +44,10 @@
     "renameschema": "scripts/rename-schema.sh",
     "presite": "npm run data && npm run build:site && npm run build:toc && npm run build:versions && scripts/create-example-pages",
     "site": "bundle exec jekyll serve --incremental",
-    "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/",
@@ -72,12 +73,17 @@
     "@types/mkdirp": "^0.5.2",
     "@types/node": "^11.13.6",
     "@types/puppeteer": "^1.12.3",
+    "@typescript-eslint/eslint-plugin": "^1.6.0",
+    "@typescript-eslint/parser": "^1.6.0",
     "ajv": "^6.10.0",
     "chai": "^4.2.0",
     "cheerio": "^1.0.0-rc.2",
     "codecov": "^3.3.0",
     "concurrently": "^4.1.0",
     "d3": "^5.9.2",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-prettier": "^3.0.1",
     "highlight.js": "^9.15.6",
     "http-server": "^0.11.1",
     "jest": "^24.7.1",
@@ -95,8 +101,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.4",
     "vega-cli": "^5.3.5",
     "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',
@@ -222,15 +221,13 @@ 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'))
     );
   }
 
-  // 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')));
   }

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

@@ -131,7 +131,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

@@ -600,7 +600,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})`;
@@ -621,7 +621,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;

src/compile/axis/properties.ts

@@ -138,15 +138,11 @@ export function orient(channel: PositionScaleChannel) {
 export function defaultTickCount({
   fieldDef,
   scaleType,
-  size,
-  scaleName,
-  specifiedAxis = {}
+  size
 }: {
   fieldDef: TypedFieldDef<string>;
   scaleType: ScaleType;
   size?: SignalRef;
-  scaleName?: string;
-  specifiedAxis?: Axis;
 }) {
   if (
     !hasDiscreteDomain(scaleType) &&
@@ -163,12 +159,7 @@ export function defaultTickCount({
   return undefined;
 }
 
-export function values(
-  specifiedAxis: Axis,
-  model: UnitModel,
-  fieldDef: TypedFieldDef<string>,
-  channel: PositionScaleChannel
-) {
+export function values(specifiedAxis: Axis, model: UnitModel, fieldDef: TypedFieldDef<string>) {
   const vals = specifiedAxis.values;
 
   if (vals) {