disable formatting rules for eslint and add prettier in lint-staged (#2355)

* disable formatting rules for eslint and add prettier in lint-staged

* update npm modules

* set plugin-proposal-private-methods to loose

* update snapshots due to popover package update

* add missing quotes

Co-authored-by: bkmartinjr <bruce@chanzuckerberg.com>

client/configuration/babel/babel.dev.js

@@ -17,6 +17,7 @@ module.exports = {
     "@babel/plugin-proposal-function-bind",
     ["@babel/plugin-proposal-decorators", { legacy: true }],
     ["@babel/plugin-proposal-class-properties", { loose: true }],
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
     "@babel/plugin-proposal-export-namespace-from",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",

client/configuration/babel/babel.prod.js

@@ -10,13 +10,13 @@ module.exports = {
       },
     ],
     "@babel/preset-react",
-    // eslint-disable-next-line prettier/prettier --- FIXME: disabled temporarily on migrate to TS.
-    "@babel/preset-typescript"
+    "@babel/preset-typescript",
   ],
   plugins: [
     "@babel/plugin-proposal-function-bind",
     ["@babel/plugin-proposal-decorators", { legacy: true }],
     ["@babel/plugin-proposal-class-properties", { loose: true }],
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
     "@babel/plugin-proposal-export-namespace-from",
     "@babel/plugin-transform-react-constant-elements",
     "@babel/plugin-transform-runtime",

client/configuration/eslint/eslint.js

@@ -8,7 +8,11 @@ module.exports = {
     "plugin:eslint-comments/recommended",
     "plugin:@blueprintjs/recommended",
     "plugin:compat/recommended",
-    "plugin:prettier/recommended",
+    "plugin:jsx-a11y/recommended",
+    // (thuang) disable eslint formatting rules, so prettier can do its job
+    // Do not use `plugin:prettier/recommended` per doc below:
+    // https://prettier.io/docs/en/integrating-with-linters.html
+    "prettier",
   ],
   settings: {
     // AbortController is not supported in iOS Safari 10.3, Chrome 61

client/configuration/lint-staged/lint-staged.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   "*.{js,ts,jsx,tsx}": "eslint --fix",
+  "**/*": "prettier --write --ignore-unknown",
 };

client/configuration/webpack/obsoleteHTMLTemplate.html

@@ -22,7 +22,7 @@
 >
   <img
     src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/cellxgene-logo.png"
-    style="width: 320px;"
+    style="width: 320px"
   />
   <div
     style="
@@ -37,36 +37,34 @@
       max-width: 550px;
     "
   >
-    <div style="margin-bottom: 0; font-weight: bolder; font-size: 1.2em;">
+    <div style="margin-bottom: 0; font-weight: bolder; font-size: 1.2em">
       Unsupported Browser
     </div>
-    <div style="margin-top: 0;">
+    <div style="margin-top: 0">
       cellxgene is currently supported on the following browsers
     </div>
-    <div
-      style="display: flex; justify-content: space-around; margin-top: 16px;"
-    >
+    <div style="display: flex; justify-content: space-around; margin-top: 16px">
       <a
         href="https://www.google.com/chrome/?hl=en%22"
         aria-label="Download Google Chrome"
       >
         <img
           src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/chrome.png"
-          style="width: 80px; height: 80px;"
+          style="width: 80px; height: 80px"
         />
         <div>Chrome &gt; 60</div>
       </a>
       <a href="https://www.mozilla.com/firefox/" aria-label="Download Firefox">
         <img
           src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/firefox.png"
-          style="width: 80px; height: 80px;"
+          style="width: 80px; height: 80px"
         />
         <div>Firefox ≥ 60</div>
       </a>
       <a href="//www.microsoft.com/edge" aria-label="Download Edge">
         <img
           src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/edge.png"
-          style="width: 80px; height: 80px;"
+          style="width: 80px; height: 80px"
         />
         <div>Edge ≥ 79</div>
       </a>