Install & Configure Prettier

.eslintrc.json

@@ -1,41 +1,29 @@
 {
-    "rules": {        
+    "rules": {  
         "array-callback-return" : "error",
-        "arrow-body-style" : ["error", "as-needed", { "requireReturnForObjectLiteral": true }],
-        "arrow-parens" : ["error", "always"],
-        "generator-star-spacing" : "error",
-        "indent": [2, 4, {"SwitchCase": 1}],
-        "getter-return" :"error",
-        "jsx-quotes" : ["error", "prefer-double"],
-        "linebreak-style": [2, "unix"],
         "new-cap" : "error",
         "no-await-in-loop": "error",
         "no-console": 0,
         "no-empty": 0,
         "no-global-assign" : "error",
         "no-invalid-this" : "error",
-        "no-tabs" : "error",
-        "no-trailing-spaces" : "error",
         "no-undef": 0,
         "no-unused-vars": ["warn", { "args" : "none" }],
         "no-useless-concat": "error",
         "no-useless-constructor": "error",
-        "no-whitespace-before-property" : "error",
-        "object-curly-spacing" : ["error", "always"],
         "prefer-const" : "error",
         "prefer-destructuring" : "warn",
         "prefer-spread" : "error",
+        "prettier/prettier": "error",
+        // Do not add rules options for prettier config here; it will interfere with editor extensions
+        // See: https://github.com/prettier/eslint-plugin-prettier#options
         "react/button-has-type" : "error",
         "react/destructuring-assignment" : ["warn", "always"],
         "react/display-name" : 0,
-        "react/jsx-closing-tag-location" : "error",
-        "react/jsx-indent" : "error",
-        "react/jsx-indent-props" : "error",
         "react/jsx-key" : "error",
         "react/jsx-no-duplicate-props" : "error",
         "react/jsx-no-bind" : ["warn", { "ignoreDOMComponents" : true }],
         "react/jsx-pascal-case" : ["error", { "allowAllCaps" : true }],
-        "react/jsx-props-no-multi-spaces" : "error",
         "react/no-access-state-in-setstate" : "error",
         "react/no-direct-mutation-state" : "error",
         "react/no-children-prop" : 1,
@@ -45,7 +33,6 @@
         "react/no-this-in-sfc" : "error",
         "react/no-typos": "error",
         "react/prop-types": [1, { "skipUndeclared" : true }],
-        "semi": ["error", "always"],
         "valid-typeof" : ["error", { "requireStringLiterals": true }]
     },
     "env": {
@@ -56,22 +43,27 @@
     },
     "parser" : "@babel/eslint-parser",
     "extends": [
+        "plugin:react/recommended",
         "eslint:recommended",
-        "plugin:react/recommended"
+        "prettier"
     ],
     "parserOptions": {
         "ecmaVersion": 6,
         "sourceType": "module",
         "ecmaFeatures": {
             "jsx": true,
-            "classes" : true
+            "classes" : true,
+            "modules": true
         }
     },
     "plugins": [
         "react",
-        "cypress"
+        "cypress",
+        "prettier"
     ],
     "overrides": [
+        // Prettier isn't great at formatting these files, so we're skipping
+        // them there; doing this here to prevent annoying squigglies
         {
             "files" : ["./src/encoded/static/data/*.jsx"],
             "rules" : {
@@ -80,5 +72,10 @@
                 "react/react-in-jsx-scope" : 0
             }
         }
-    ]
-}
+    ],
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+      }
+}

.prettierignore

@@ -0,0 +1,9 @@
+# Ignore deps & build files
+/node_modules/
+/src/encoded/static/build/
+
+# Ignore jsx static sections (overzealous about adding unnecessary semicolons)
+/docs/public/help/
+
+# Also ignore that help doc for embedded search tables
+/src/encoded/static/data/embedded-search-table-demo.jsx

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+    "bracketSameLine": true,
+    "endOfLine": "lf",
+    "singleQuote": true,
+    "jsxSingleQuote": false,
+    "tabs": true,
+    "tabWidth": 4,
+    "trailingComma": "es5"
+}

babel.config.js

@@ -1,19 +1,18 @@
-
-module.exports = function(api){
+module.exports = function (api) {
     api.cache(true);
     return {
-        "presets" : [
+        presets: [
             // We don't need to convert import/export statements.
             // @see https://stackoverflow.com/questions/63563485/how-can-i-preserve-dynamic-import-statements-with-babel-preset-env
-            [ "@babel/preset-env", { "modules": false } ],
-            "@babel/preset-react",
+            ['@babel/preset-env', { modules: false }],
+            '@babel/preset-react',
         ],
-        "plugins": [
-            "@babel/plugin-syntax-dynamic-import",
-            "@babel/plugin-proposal-object-rest-spread",
-            "@babel/plugin-proposal-class-properties",
-            "babel-plugin-minify-dead-code-elimination"
+        plugins: [
+            '@babel/plugin-syntax-dynamic-import',
+            '@babel/plugin-proposal-object-rest-spread',
+            '@babel/plugin-proposal-class-properties',
+            'babel-plugin-minify-dead-code-elimination',
         ],
-        "comments": true
+        comments: true,
     };
 };

deploy/post_deploy_testing/cypress.config.js

@@ -1,17 +1,17 @@
-const { defineConfig } = require("cypress");
+const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
-    projectId: "9hf9k3",
-    defaultCommandTimeout : 60000,
-    pageLoadTimeout : 120000,
-    requestTimeout : 40000,
-    responseTimeout : 120000,
-    blockHosts: "www.google-analytics.com",
+    projectId: '9hf9k3',
+    defaultCommandTimeout: 60000,
+    pageLoadTimeout: 120000,
+    requestTimeout: 40000,
+    responseTimeout: 120000,
+    blockHosts: 'www.google-analytics.com',
     e2e: {
-      baseUrl: "https://cgap-mgb.hms.harvard.edu/",
-      specPattern: "./cypress/e2e/*.cy.js",
-      setupNodeEvents(on, config) {
-        // implement node event listeners here
-      }
-    }
+        baseUrl: 'https://cgap-mgb.hms.harvard.edu/',
+        specPattern: './cypress/e2e/*.cy.js',
+        setupNodeEvents(on, config) {
+            // implement node event listeners here
+        },
+    },
 });

deploy/post_deploy_testing/cypress/e2e/00_homepage.cy.js

@@ -1,14 +1,14 @@
 import { cypressVisitHeaders } from './../support';
 
 describe('Home Page', function () {
-
     it('Has correct title', function () {
-
-        cy.visit('/', { headers: cypressVisitHeaders }).end()
-            .title().should('include', 'Computational Genome Analysis Platform').end()
-            .get('#top-nav .navbar-title').should('have.text', 'CGAP').end();
-
+        cy.visit('/', { headers: cypressVisitHeaders })
+            .end()
+            .title()
+            .should('include', 'Computational Genome Analysis Platform')
+            .end()
+            .get('#top-nav .navbar-title')
+            .should('have.text', 'CGAP')
+            .end();
     });
-
 });
-