Upgrade ESLint and make it part of the main process (#2451)

* Apply new linting rules

* More minor fixes

* Remove some newlines

* Remove tsignore lines

* Fix common eslint errors

* Fix more lint errors

* Fix dynamic pages linting issues

* Fix homepage lint

* Don't enforce param destructure for a reassignment

* Auto hooks

* Add hooks for eslint fixes

* Run app and common concurrently

* Upgrade TS

* Set standalone-packages as vendored

* Fix ts

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": ["airbnb", "prettier", "prettier/react", "prettier/flowtype"],
+  "extends": ["airbnb", "prettier", "prettier/react"],
   "plugins": ["react-hooks"],
   "parser": "babel-eslint",
   "env": {
@@ -19,11 +19,31 @@
   "rules": {
     "react/jsx-filename-extension": 0,
     "react/sort-comp": 0,
+    "react/destructuring-assignment": 0,
+    "react/state-in-constructor": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/static-property-placement": 0,
     "import/no-extraneous-dependencies": 0,
+    "import/no-cycle": "warn",
     "react/prop-types": 0,
     "arrow-parens": 0,
+    "prefer-destructuring": [
+      "error",
+      {
+        "VariableDeclarator": {
+          "array": false,
+          "object": true
+        },
+        "AssignmentExpression": {
+          "array": false,
+          "object": false
+        }
+      }
+    ],
+    "no-async-promise-executor": "warn",
     "import/prefer-default-export": 0,
     "class-methods-use-this": 0,
+    "jsx-a11y/click-events-have-key-events": "warn",
     "no-console": ["error", { "allow": ["error", "warn"] }],
     "prefer-template": "off",
     "no-plusplus": 0,
@@ -52,7 +72,15 @@
     ],
     "jsx-a11y/label-has-for": "off",
     "no-bitwise": "off",
-    "arrow-body-style": ["error", "as-needed"]
+    "arrow-body-style": ["error", "as-needed"],
+    "no-restricted-globals": "off",
+    "lines-between-class-members": [
+      "error",
+      "always",
+      {
+        "exceptAfterSingleLine": true
+      }
+    ]
   },
   "overrides": [
     {

.gitattributes

@@ -1 +1,2 @@
 * text=auto eol=lf
+standalone-packages/* linguist-vendored

package.json

@@ -48,7 +48,7 @@
     "start:common": "lerna run start --scope @codesandbox/common --stream",
     "start:dev_api": "lerna run start:dev_api --scope app --stream",
     "start:dynamic": "lerna run dev --scope dynamic-pages --stream",
-    "start:fast": "cd packages/app && yarn start",
+    "start:fast": "concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\"",
     "start:home": "yarn build:deps && yarn start:home:fast",
     "start:home:fast": "cd packages/homepage && yarn start",
     "start:overmind": "yarn build:deps && concurrently \"lerna run start --scope app --stream\" \"overmind-devtools\"",
@@ -70,22 +70,35 @@
     "all-contributors-cli": "^5.4.0",
     "babel-eslint": "^10.0.2",
     "concurrently": "^4.1.0",
+    "cross-env": "^6.0.0",
     "eslint": "5.16.0",
-    "eslint-config-airbnb": "^15.0.1",
-    "eslint-config-prettier": "^4.2.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.3.0",
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-loader": "^1.7.1",
-    "eslint-plugin-flowtype": "^2.34.0",
-    "eslint-plugin-import": "^2.3.0",
+    "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "~7.4.0",
-    "eslint-plugin-react-hooks": "^1.6.0",
+    "eslint-plugin-react": "~7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "gulp": "^3.9.1",
     "husky": "^2.2.0",
     "lerna": "^3.16.4",
+    "lint-staged": "^9.2.5",
     "prettier": "1.17.0",
     "pretty-quick": "^1.10.0",
-    "typescript": "3.5.3"
+    "typescript": "3.6.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "cross-env LINT=1 eslint --fix",
+      "pretty-quick --staged",
+      "git add"
+    ]
   },
   "engines": {
     "node": "^10.0.0"

packages/app/package.json

@@ -303,7 +303,7 @@
     "terser": "^4.1.4",
     "terser-webpack-plugin": "^1.4.1",
     "thread-loader": "^2.1.2",
-    "typescript": "3.5.2",
+    "typescript": "3.6.3",
     "url-loader": "1.0.1",
     "webpack": "^4.36.1",
     "webpack-bundle-analyzer": "^2.13.1",

packages/app/src/app/components/CodeEditor/CodeMirror/index.js

@@ -39,6 +39,7 @@ const highlightLines = (
 
 class CodemirrorEditor extends React.Component<Props, State> implements Editor {
   codemirror: typeof CodeMirror;
+
   codemirrorElement: ?HTMLDivElement;
   server: $PropertyType<CodeMirror, 'TernServer'>;
   sandbox: $PropertyType<Props, 'sandbox'>;
@@ -143,7 +144,7 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
       return;
     }
 
-    const linterWorker = this.linterWorker;
+    const { linterWorker } = this;
     if (linterWorker) {
       linterWorker.postMessage({
         code,
@@ -313,7 +314,7 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
   changeModule = async (newModule: Module) => {
     this.currentModule = newModule;
 
-    const currentModule = this.currentModule;
+    const { currentModule } = this;
 
     if (!documentCache[currentModule.id]) {
       const mode = (await this.getMode(currentModule.title)) || 'typescript';
@@ -358,7 +359,8 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
           return 'text/x-scss';
         }
         return 'css';
-      } else if (kind[1] === 'html' || kind[1] === 'vue') {
+      }
+      if (kind[1] === 'html' || kind[1] === 'vue') {
         await import(
           /* webpackChunkName: 'codemirror-html' */ 'codemirror/mode/htmlmixed/htmlmixed'
         );
@@ -385,19 +387,23 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
         }
 
         return 'htmlmixed';
-      } else if (kind[1] === 'md') {
+      }
+      if (kind[1] === 'md') {
         await import(
           /* webpackChunkName: 'codemirror-markdown' */ 'codemirror/mode/markdown/markdown'
         );
         return 'markdown';
-      } else if (kind[1] === 'json') {
+      }
+      if (kind[1] === 'json') {
         return 'application/json';
-      } else if (kind[1] === 'sass') {
+      }
+      if (kind[1] === 'sass') {
         await import(
           /* webpackChunkName: 'codemirror-sass' */ 'codemirror/mode/sass/sass'
         );
         return 'sass';
-      } else if (kind[1] === 'styl') {
+      }
+      if (kind[1] === 'styl') {
         await import(
           /* webpackChunkName: 'codemirror-stylus' */ 'codemirror/mode/stylus/stylus'
         );
@@ -441,7 +447,7 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
   getCode = () => this.codemirror.getValue();
 
   handleSaveCode = async () => {
-    const onSave = this.props.onSave;
+    const { onSave } = this.props;
     if (onSave) {
       onSave(this.codemirror.getValue());
     }

packages/app/src/app/components/CodeEditor/Configuration/index.tsx

@@ -9,7 +9,7 @@ import { ConfigurationFile } from '@codesandbox/common/lib/templates/configurati
 
 import CodeIcon from 'react-icons/lib/md/code';
 
-import { Props as EditorProps, Editor } from '../types';
+import { Props as EditorProps, Editor } from '../types'; // eslint-disable-line
 import { Container, Icon, Title, Description } from './elements';
 
 type Props = EditorProps & {
@@ -86,7 +86,7 @@ export class Configuration extends React.PureComponent<Props>
 
   render() {
     const { config, width, height, sandbox } = this.props;
-    const currentModule = this.currentModule;
+    const { currentModule } = this;
 
     const { ConfigWizard } = getUI(config.type);
 

packages/app/src/app/components/CodeEditor/ImageViewer/index.tsx

@@ -3,7 +3,7 @@ import Input from '@codesandbox/common/lib/components/Input';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import { Container, Title, SubTitle, Image, MaxWidth } from './elements';
 
-import { Props } from '../types';
+import { Props } from '../types'; // eslint-disable-line
 
 export class ImageViewer extends React.Component<Props> {
   onSubmit = (e: React.FormEvent<HTMLFormElement>) => {

packages/app/src/app/components/CodeEditor/Monaco/enable-emmet.js

@@ -61,18 +61,18 @@ const enableEmmet = (editor, monaco) => {
     // to ensure emmet triggered at the right time
     // we need to do grammar analysis
 
-    const model = editor.model;
+    const { model } = editor;
     cursor = cur.position;
 
-    const column = cursor.column;
+    const { column } = cursor;
     // there is no character before column 1
     // no need to continue
     if (column === 1) {
       emmetLegal.set(false);
       return;
     }
 
-    const lineNumber = cursor.lineNumber;
+    const { lineNumber } = cursor;
 
     /* eslint-disable no-underscore-dangle */
 

packages/app/src/app/components/CodeEditor/Monaco/grammars/configure-tokenizer.js

@@ -25,7 +25,8 @@ export async function liftOff(monaco) {
           format: 'json',
           content: cssGrammar,
         };
-      } else if (scopeName === 'text.html.basic') {
+      }
+      if (scopeName === 'text.html.basic') {
         return {
           format: 'json',
           content: htmlGrammar,

packages/app/src/app/components/CodeEditor/Monaco/grammars/set-grammars.js

@@ -4,12 +4,15 @@ class TokenizerState {
   constructor(_ruleStack) {
     this._ruleStack = _ruleStack;
   }
+
   get ruleStack() {
     return this._ruleStack;
   }
+
   clone() {
     return new TokenizerState(this._ruleStack);
   }
+
   equals(other) {
     if (
       !other ||