chore: reconfigure ESLint build, improve lint speed (#4078)

Author: adidahiya

.circleci/config.yml

@@ -7,7 +7,7 @@ aliases:
   - &docker-node-browsers
     - image: circleci/node:lts-browsers
       environment:
-          CHROME_BIN: "/usr/bin/google-chrome"
+        CHROME_BIN: "/usr/bin/google-chrome"
 
   - &restore-node-modules-cache
     name: Restore node_modules cache
@@ -47,7 +47,7 @@ jobs:
       - save_cache: *save-node-modules-cache
       - save_cache: *save-yarn-cache
       - persist_to_workspace:
-          root: '.'
+          root: "."
           paths: [packages/*/node_modules]
 
   clean-lockfile:
@@ -63,37 +63,49 @@ jobs:
     steps:
       - checkout
       - restore_cache: *restore-node-modules-cache
-      - attach_workspace: { at: '.' }
+      - attach_workspace: { at: "." }
       - run: yarn compile
       - persist_to_workspace:
-          root: '.'
+          root: "."
           paths: [packages/*/lib, packages/*/src/generated]
 
   lint:
     docker: *docker-node-lts
     environment:
       JUNIT_REPORT_PATH: reports
+      NODE_ENV: test
     steps:
       - checkout
       - restore_cache: *restore-node-modules-cache
-      - attach_workspace: { at: '.' }
+      - attach_workspace: { at: "." }
       - run: mkdir -p ./reports/eslint ./reports/stylelint
       # we need to compile the lint rules for blueprint
-      - run: yarn compile --scope "@blueprintjs/{eslint-plugin-blueprint,tslint-config}"
+      - run: yarn compile --scope "@blueprintjs/eslint-plugin"
       - run: yarn lint
       - store_test_results: { path: ./reports }
       - store_artifacts: { path: ./reports }
 
+  format-check:
+    docker: *docker-node-lts
+    environment:
+      JUNIT_REPORT_PATH: reports
+      NODE_ENV: test
+    steps:
+      - checkout
+      - restore_cache: *restore-node-modules-cache
+      - attach_workspace: { at: "." }
+      - run: yarn format-check
+
   dist:
     docker: *docker-node-lts
     resource_class: large
     steps:
       - checkout
       - restore_cache: *restore-node-modules-cache
-      - attach_workspace: { at: '.' }
+      - attach_workspace: { at: "." }
       - run: yarn dist
       - persist_to_workspace:
-          root: '.'
+          root: "."
           paths: [packages/*/lib, packages/*/dist]
 
   test-jest:
@@ -104,7 +116,7 @@ jobs:
     steps:
       - checkout
       - restore_cache: *restore-node-modules-cache
-      - attach_workspace: { at: '.' }
+      - attach_workspace: { at: "." }
       - run: mkdir ./reports
       - run: yarn lerna run test:jest-ci
       - store_test_results: { path: ./reports }
@@ -118,21 +130,21 @@ jobs:
     steps:
       - checkout
       - restore_cache: *restore-node-modules-cache
-      - attach_workspace: { at: '.' }
+      - attach_workspace: { at: "." }
       - run: mkdir ./reports
       - run:
           # split karma tests into containers because they can take up a lot of memory
           # running them in one container caused Karma to time out frequently
           # see https://github.com/palantir/blueprint/issues/3616
           command: |
-              case $CIRCLE_NODE_INDEX in \
-              0) yarn lerna run --parallel test:typeCheck ;; \
-              1) yarn lerna run --scope "@blueprintjs/core" test:karma ;; \
-              2) yarn lerna run --scope "@blueprintjs/datetime" test:karma ;; \
-              3) yarn lerna run --scope "@blueprintjs/select" test:karma ;; \
-              4) yarn lerna run --scope "@blueprintjs/table" test:karma ;; \
-              5) yarn lerna run --scope "@blueprintjs/timezone" test:karma ;; \
-              esac
+            case $CIRCLE_NODE_INDEX in \
+            0) yarn lerna run --parallel test:typeCheck ;; \
+            1) yarn lerna run --scope "@blueprintjs/core" test:karma ;; \
+            2) yarn lerna run --scope "@blueprintjs/datetime" test:karma ;; \
+            3) yarn lerna run --scope "@blueprintjs/select" test:karma ;; \
+            4) yarn lerna run --scope "@blueprintjs/table" test:karma ;; \
+            5) yarn lerna run --scope "@blueprintjs/timezone" test:karma ;; \
+            esac
           when: always
       - store_test_results: { path: ./reports }
       - store_artifacts: { path: ./reports }
@@ -151,7 +163,7 @@ jobs:
     steps:
       - checkout
       - restore_cache: *restore-node-modules-cache
-      - attach_workspace: { at: '.' }
+      - attach_workspace: { at: "." }
       - run: mkdir ./reports
       - run: yarn lerna run --parallel test:iso
       - store_test_results: { path: ./reports }
@@ -169,7 +181,7 @@ jobs:
     steps:
       - checkout
       - restore_cache: *restore-node-modules-cache
-      - attach_workspace: { at: '.' }
+      - attach_workspace: { at: "." }
       - store_artifacts: { path: packages/docs-app/dist }
       - store_artifacts: { path: packages/landing-app/dist }
       - store_artifacts: { path: packages/table-dev-app/dist }
@@ -182,7 +194,7 @@ jobs:
     steps:
       - checkout
       - restore_cache: *restore-node-modules-cache
-      - attach_workspace: { at: '.' }
+      - attach_workspace: { at: "." }
       - run: ./scripts/publish-npm-semver-tagged
 
 workflows:
@@ -196,6 +208,8 @@ workflows:
           requires: [checkout-code]
       - lint:
           requires: [checkout-code]
+      - format-check:
+          requires: [checkout-code]
       - dist:
           requires: [compile]
       - test-jest:
@@ -211,7 +225,15 @@ workflows:
       - deploy-preview:
           requires: [dist]
       - deploy-npm:
-          requires: [dist, lint, test-react-15, test-react-16, test-iso-react-15, test-iso-react-16]
+          requires:
+            [
+              dist,
+              lint,
+              test-react-15,
+              test-react-16,
+              test-iso-react-15,
+              test-iso-react-16,
+            ]
           filters:
             branches:
               only:

.eslintrc.json

@@ -1,15 +1,15 @@
 {
-    "root": true,
-    "extends": [
-        "./packages/eslint-config"
-    ],
-    "ignorePatterns": [
-        "node_modules",
-        "dist",
-        "lib",
-        "fixtures",
-        "coverage",
-        "__snapshots__",
-        "src/generated"
-    ]
+  "root": true,
+  "extends": [
+    "./packages/eslint-config"
+  ],
+  "ignorePatterns": [
+    "node_modules",
+    "dist",
+    "lib",
+    "fixtures",
+    "coverage",
+    "__snapshots__",
+    "generated"
+  ]
 }

.prettierignore

@@ -0,0 +1,5 @@
+node_modules/
+generated/
+lib/
+dist/
+/site/

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "tabWidth": 4,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}

README.md

@@ -6,7 +6,6 @@ Blueprint is a React-based UI toolkit for the web.
 
 It is optimized for building complex, data-dense web interfaces for _desktop applications_ which run in modern browsers and IE11. This is not a mobile-first UI toolkit.
 
-
 [**Read the introductory blog post ▸**](https://medium.com/@palantir/scaling-product-design-with-blueprint-25492827bb4a)
 
 [**View the full documentation ▸**](http://blueprintjs.com/docs)
@@ -33,36 +32,36 @@ This repository contains multiple projects in the `packages/` directory that fal
 
 These are the component libraries we publish to NPM.
 
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/core.svg?label=@blueprintjs/core)](https://www.npmjs.com/package/@blueprintjs/core) – Core styles & components.
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/datetime.svg?label=@blueprintjs/datetime)](https://www.npmjs.com/package/@blueprintjs/datetime) – Components for interacting with dates and times.
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/icons.svg?label=@blueprintjs/icons)](https://www.npmjs.com/package/@blueprintjs/icons) – Components for generating and displaying icons.
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/select.svg?label=@blueprintjs/select)](https://www.npmjs.com/package/@blueprintjs/select) – Components for selecting items from a list.
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/table.svg?label=@blueprintjs/table)](https://www.npmjs.com/package/@blueprintjs/table) – Scalable interactive table component.
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/timezone.svg?label=@blueprintjs/timezone)](https://www.npmjs.com/package/@blueprintjs/timezone) – Components for picking timezones.
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/core.svg?label=@blueprintjs/core)](https://www.npmjs.com/package/@blueprintjs/core) – Core styles & components.
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/datetime.svg?label=@blueprintjs/datetime)](https://www.npmjs.com/package/@blueprintjs/datetime) – Components for interacting with dates and times.
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/icons.svg?label=@blueprintjs/icons)](https://www.npmjs.com/package/@blueprintjs/icons) – Components for generating and displaying icons.
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/select.svg?label=@blueprintjs/select)](https://www.npmjs.com/package/@blueprintjs/select) – Components for selecting items from a list.
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/table.svg?label=@blueprintjs/table)](https://www.npmjs.com/package/@blueprintjs/table) – Scalable interactive table component.
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/timezone.svg?label=@blueprintjs/timezone)](https://www.npmjs.com/package/@blueprintjs/timezone) – Components for picking timezones.
 
 ### Applications
 
 These are hosted on GitHub Pages as static web applications:
 
-- `docs-app` – Documentation site at blueprintjs.com/docs
-- `landing-app` – Landing page at blueprintjs.com
+-   `docs-app` – Documentation site at blueprintjs.com/docs
+-   `landing-app` – Landing page at blueprintjs.com
 
 These are used as development playground environments:
 
-- `table-dev-app` – demo page that supports manual testing of all table features
+-   `table-dev-app` – demo page that supports manual testing of all table features
 
 ### Build tooling
 
 These packages define development dependencies and contain build configuration. They adhere to the standard NPM package layout, which allows us to keep clear API boundaries for build configuration and isolate groups of `devDependencies`. They are published to NPM in order to allow other Blueprint-related projects to use this infrastructure outside this monorepo.
 
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/docs-theme.svg?label=@blueprintjs/docs-theme)](https://www.npmjs.com/package/@blueprintjs/docs-theme) – Documentation theme for [Documentalist](https://github.com/palantir/documentalist) data.
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/eslint-config.svg?label=@blueprintjs/eslint-config)](https://www.npmjs.com/package/@blueprintjs/eslint-config) – ESLint configuration used in this repo and recommended for Blueprint-related projects
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/eslint-plugin-blueprint.svg?label=@blueprintjs/eslint-plugin-blueprint)](https://www.npmjs.com/package/@blueprintjs/eslint-plugin-blueprint) – implementations for custom ESLint rules which enforce best practices for Blueprint usage
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/karma-build-scripts.svg?label=@blueprintjs/karma-build-scripts)](https://www.npmjs.com/package/@blueprintjs/karma-build-scripts)
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/node-build-scripts.svg?label=@blueprintjs/node-build-scripts)](https://www.npmjs.com/package/@blueprintjs/node-build-scripts) – various utility scripts for linting, working with CSS variables, and building icons
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/test-commons.svg?label=@blueprintjs/test-commons)](https://www.npmjs.com/package/@blueprintjs/test-commons) – various utility functions used in Blueprint test suites
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/tslint-config.svg?label=@blueprintjs/tslint-config)](https://www.npmjs.com/package/@blueprintjs/tslint-config) – TSLint configuration used in this repo and recommended for Blueprint-related projects (should be installed by `@blueprintjs/eslint-config`, not directly)
-- [![npm](https://img.shields.io/npm/v/@blueprintjs/webpack-build-scripts.svg?label=@blueprintjs/webpack-build-scripts)](https://www.npmjs.com/package/@blueprintjs/webpack-build-scripts)
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/docs-theme.svg?label=@blueprintjs/docs-theme)](https://www.npmjs.com/package/@blueprintjs/docs-theme) – Documentation theme for [Documentalist](https://github.com/palantir/documentalist) data.
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/eslint-config.svg?label=@blueprintjs/eslint-config)](https://www.npmjs.com/package/@blueprintjs/eslint-config) – ESLint configuration used in this repo and recommended for Blueprint-related projects
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/eslint-plugin.svg?label=@blueprintjs/eslint-plugin)](https://www.npmjs.com/package/@blueprintjs/eslint-plugin) – implementations for custom ESLint rules which enforce best practices for Blueprint usage
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/karma-build-scripts.svg?label=@blueprintjs/karma-build-scripts)](https://www.npmjs.com/package/@blueprintjs/karma-build-scripts)
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/node-build-scripts.svg?label=@blueprintjs/node-build-scripts)](https://www.npmjs.com/package/@blueprintjs/node-build-scripts) – various utility scripts for linting, working with CSS variables, and building icons
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/test-commons.svg?label=@blueprintjs/test-commons)](https://www.npmjs.com/package/@blueprintjs/test-commons) – various utility functions used in Blueprint test suites
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/tslint-config.svg?label=@blueprintjs/tslint-config)](https://www.npmjs.com/package/@blueprintjs/tslint-config) – TSLint configuration used in this repo and recommended for Blueprint-related projects (should be installed by `@blueprintjs/eslint-config`, not directly)
+-   [![npm](https://img.shields.io/npm/v/@blueprintjs/webpack-build-scripts.svg?label=@blueprintjs/webpack-build-scripts)](https://www.npmjs.com/package/@blueprintjs/webpack-build-scripts)
 
 ## Contributing
 
@@ -75,7 +74,7 @@ then [check out the "help wanted" label](https://github.com/palantir/blueprint/l
 [Lerna](https://lerna.js.org/) manages inter-package dependencies in this monorepo.
 Builds are orchestrated via `lerna run` and NPM scripts.
 
-__Prerequisites__: Node.js v10+, Yarn v1.18+
+**Prerequisites**: Node.js v10+, Yarn v1.18+
 
 ### One-time setup
 
@@ -85,17 +84,17 @@ After cloning this repo, run:
 1. If running on Windows:
     1. `npm install -g windows-build-tools` to install build tools globally
     1. Ensure `bash` is your configured script-shell by running:<br />
-      `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"`
+       `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"`
 1. `yarn verify` to ensure you have all the build tooling working properly.
 
 ### Incorporating upstream changes
 
 If you were previously in a working state and have just pulled new code from `develop`:
 
-- If there were package dependency changes, run `yarn` at the root.
-  - This command is very quick if there are no new things to install.
-- Run `yarn compile` to get the latest built versions of the library packages in this repo.
-  - This command is quicker than `yarn verify` since it doesn't build the application packages (`docs-app`, `landing-app`, etc.) or run tests
+-   If there were package dependency changes, run `yarn` at the root.
+    -   This command is very quick if there are no new things to install.
+-   Run `yarn compile` to get the latest built versions of the library packages in this repo.
+    -   This command is quicker than `yarn verify` since it doesn't build the application packages (`docs-app`, `landing-app`, etc.) or run tests
 
 ### Developing libraries
 

package.json

@@ -24,8 +24,10 @@
     "dist:libs": "lerna run dist --parallel --scope \"@blueprintjs/{core,datetime,docs-theme,icons,select,table,timezone}\"",
     "dist:apps": "lerna run dist --parallel --scope \"@blueprintjs/{docs-app,landing-app,table-dev-app}\"",
     "docs-data": "lerna run compile --scope \"@blueprintjs/docs-data\"",
-    "lint": "lerna run --parallel lint",
-    "lint-fix": "lerna run --parallel lint-fix",
+    "format": "prettier --write \"./**/*.{ts,tsx}\"",
+    "format-check": "prettier --check \"./**/*.{ts,tsx}\"",
+    "lint": "NODE_ENV=test lerna run --parallel lint",
+    "lint-fix": "NODE_ENV=test lerna run --parallel lint-fix",
     "serve": "http-server site",
     "site": "npm-run-all site:clean -p copy:* -s serve",
     "site:clean": "git clean -xdfq site/",
@@ -52,6 +54,7 @@
     "http-server": "^0.11.1",
     "lerna": "^2.11.0",
     "npm-run-all": "^4.1.5",
+    "prettier": "^1.19.1",
     "sinon": "^7.3.2",
     "stylelint-config-palantir": "^4.0.0",
     "stylelint-scss": "^3.9.2",

packages/core/src/components/collapse/collapse.tsx

@@ -145,7 +145,10 @@ export class Collapse extends AbstractPureComponent2<ICollapseProps, ICollapseSt
                     break;
                 default:
                     // need to set an explicit height so that transition can work
-                    return { animationState: AnimationStates.CLOSING_START, height: `${state.heightWhenOpen}px` };
+                    return {
+                        animationState: AnimationStates.CLOSING_START,
+                        height: `${state.heightWhenOpen}px`,
+                    };
             }
         }
 

packages/core/src/components/forms/numericInput.tsx

@@ -204,7 +204,11 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumer
     };
 
     public static getDerivedStateFromProps(props: INumericInputProps, state: INumericInputState) {
-        const nextState = { prevMinProp: props.min, prevMaxProp: props.max, prevValueProp: props.value };
+        const nextState = {
+            prevMaxProp: props.max,
+            prevMinProp: props.min,
+            prevValueProp: props.value,
+        };
 
         const didMinChange = props.min !== state.prevMinProp;
         const didMaxChange = props.max !== state.prevMaxProp;
@@ -505,7 +509,10 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumer
         const currValue = this.state.value || NumericInput.VALUE_ZERO;
         const nextValue = this.getSanitizedValue(currValue, delta);
 
-        this.setState({ shouldSelectAfterUpdate: this.props.selectAllOnIncrement, value: nextValue });
+        this.setState({
+            shouldSelectAfterUpdate: this.props.selectAllOnIncrement,
+            value: nextValue,
+        });
 
         return nextValue;
     }

packages/core/src/components/html-table/htmlTable.tsx

@@ -59,7 +59,7 @@ export class HTMLTable extends AbstractPureComponent2<IHTMLTableProps> {
             },
             className,
         );
-        // eslint-disable-next-line @blueprintjs/blueprint/html-components
+        // eslint-disable-next-line @blueprintjs/html-components
         return <table {...htmlProps} ref={elementRef} className={classes} />;
     }
 }