Improve linting rules to catch more errors (vercel#9374)

* Update `packages/`

* Update examples

* Update tests

* Update bench

* Update top level files

* Fix build

* trigger

.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+**/.next/**
+**/_next/**
+**/dist/**
+examples/with-ioc/**
+examples/with-kea/**

.eslintrc.json

@@ -0,0 +1,212 @@
+{
+  "root": true,
+  "parser": "babel-eslint",
+  "plugins": ["react", "react-hooks"],
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module",
+        "ecmaFeatures": {
+          "jsx": true
+        },
+        "warnOnUnsupportedTypeScriptVersion": false
+      },
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        // Already handled by TS
+        "no-dupe-class-members": "off",
+        "no-undef": "off",
+
+        // Add TypeScript specific rules (and turn off ESLint equivalents)
+        "@typescript-eslint/consistent-type-assertions": "warn",
+        "no-array-constructor": "off",
+        "@typescript-eslint/no-array-constructor": "warn",
+        "@typescript-eslint/no-namespace": "error",
+        "no-use-before-define": "off",
+        "@typescript-eslint/no-use-before-define": [
+          "warn",
+          {
+            "functions": false,
+            "classes": false,
+            "variables": false,
+            "typedefs": false
+          }
+        ],
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          {
+            "args": "none",
+            "ignoreRestSiblings": true
+          }
+        ],
+        "no-useless-constructor": "off",
+        "@typescript-eslint/no-useless-constructor": "warn"
+      }
+    },
+    {
+      "files": ["test/**/*", "examples/**/*"],
+      "rules": { "react/react-in-jsx-scope": "off" }
+    }
+  ],
+  "rules": {
+    "array-callback-return": "warn",
+    "default-case": ["warn", { "commentPattern": "^no default$" }],
+    "dot-location": ["warn", "property"],
+    "eqeqeq": ["warn", "smart"],
+    "new-parens": "warn",
+    "no-array-constructor": "warn",
+    "no-caller": "warn",
+    "no-cond-assign": ["warn", "except-parens"],
+    "no-const-assign": "warn",
+    "no-control-regex": "warn",
+    "no-delete-var": "warn",
+    "no-dupe-args": "warn",
+    "no-dupe-class-members": "warn",
+    "no-dupe-keys": "warn",
+    "no-duplicate-case": "warn",
+    "no-empty-character-class": "warn",
+    "no-empty-pattern": "warn",
+    "no-eval": "warn",
+    "no-ex-assign": "warn",
+    "no-extend-native": "warn",
+    "no-extra-bind": "warn",
+    "no-extra-label": "warn",
+    "no-fallthrough": "warn",
+    "no-func-assign": "warn",
+    "no-implied-eval": "warn",
+    "no-invalid-regexp": "warn",
+    "no-iterator": "warn",
+    "no-label-var": "warn",
+    "no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }],
+    "no-lone-blocks": "warn",
+    "no-loop-func": "warn",
+    "no-mixed-operators": [
+      "warn",
+      {
+        "groups": [
+          ["&", "|", "^", "~", "<<", ">>", ">>>"],
+          ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
+          ["&&", "||"],
+          ["in", "instanceof"]
+        ],
+        "allowSamePrecedence": false
+      }
+    ],
+    "no-multi-str": "warn",
+    "no-native-reassign": "warn",
+    "no-negated-in-lhs": "warn",
+    "no-new-func": "warn",
+    "no-new-object": "warn",
+    "no-new-symbol": "warn",
+    "no-new-wrappers": "warn",
+    "no-obj-calls": "warn",
+    "no-octal": "warn",
+    "no-octal-escape": "warn",
+    "no-redeclare": ["warn", { "builtinGlobals": false }],
+    "no-regex-spaces": "warn",
+    "no-restricted-syntax": ["warn", "WithStatement"],
+    "no-script-url": "warn",
+    "no-self-assign": "warn",
+    "no-self-compare": "warn",
+    "no-sequences": "warn",
+    "no-shadow-restricted-names": "warn",
+    "no-sparse-arrays": "warn",
+    "no-template-curly-in-string": "error",
+    "no-this-before-super": "warn",
+    "no-throw-literal": "warn",
+    "no-undef": "error",
+    "no-unexpected-multiline": "warn",
+    "no-unreachable": "warn",
+    "no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true,
+        "allowTaggedTemplates": true
+      }
+    ],
+    "no-unused-labels": "warn",
+    "no-unused-vars": [
+      "warn",
+      {
+        "args": "none",
+        "ignoreRestSiblings": true
+      }
+    ],
+    "no-use-before-define": [
+      "warn",
+      {
+        "functions": false,
+        "classes": false,
+        "variables": false
+      }
+    ],
+    "no-useless-computed-key": "warn",
+    "no-useless-concat": "warn",
+    "no-useless-constructor": "warn",
+    "no-useless-escape": "warn",
+    "no-useless-rename": [
+      "warn",
+      {
+        "ignoreDestructuring": false,
+        "ignoreImport": false,
+        "ignoreExport": false
+      }
+    ],
+    "no-with": "warn",
+    "no-whitespace-before-property": "warn",
+    "react-hooks/exhaustive-deps": "warn",
+    "require-yield": "warn",
+    "rest-spread-spacing": ["warn", "never"],
+    "strict": ["warn", "never"],
+    "unicode-bom": ["warn", "never"],
+    "use-isnan": "warn",
+    "valid-typeof": "warn",
+    "getter-return": "warn",
+    "react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }],
+    "react/jsx-no-comment-textnodes": "warn",
+    "react/jsx-no-duplicate-props": "warn",
+    "react/jsx-no-target-blank": "warn",
+    "react/jsx-no-undef": "error",
+    "react/jsx-pascal-case": [
+      "warn",
+      {
+        "allowAllCaps": true,
+        "ignore": []
+      }
+    ],
+    "react/jsx-uses-react": "warn",
+    "react/jsx-uses-vars": "warn",
+    "react/no-danger-with-children": "warn",
+    "react/no-deprecated": "warn",
+    "react/no-direct-mutation-state": "warn",
+    "react/no-is-mounted": "warn",
+    "react/no-typos": "error",
+    "react/react-in-jsx-scope": "error",
+    "react/require-render-return": "error",
+    "react/style-prop-object": "warn",
+    "react-hooks/rules-of-hooks": "error"
+  }
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    { "language": "typescript", "autoFix": true },
+    { "language": "typescriptreact", "autoFix": true }
+  ]
+}

bench/pages/stateless.js

@@ -1 +1,2 @@
+import React from 'react'
 export default () => <h1>My component!</h1>

bench/readdir/glob.js

@@ -4,7 +4,7 @@ const globMod = require('glob')
 const glob = promisify(globMod)
 const resolveDataDir = join(__dirname, 'fixtures', '**/*')
 
-async function test () {
+async function test() {
   const time = process.hrtime()
   await glob(resolveDataDir)
 
@@ -14,7 +14,7 @@ async function test () {
   console.log(milliseconds)
 }
 
-async function run () {
+async function run() {
   for (let i = 0; i < 50; i++) {
     await test()
   }

bench/readdir/recursive-readdir.js

@@ -2,7 +2,7 @@ const { join } = require('path')
 const { recursiveReadDir } = require('next/dist/lib/recursive-readdir')
 const resolveDataDir = join(__dirname, 'fixtures')
 
-async function test () {
+async function test() {
   const time = process.hrtime()
   await recursiveReadDir(resolveDataDir, /\.js$/)
 
@@ -12,7 +12,7 @@ async function test () {
   console.log(milliseconds)
 }
 
-async function run () {
+async function run() {
   for (let i = 0; i < 50; i++) {
     await test()
   }

bench/recursive-copy/run.js

@@ -4,7 +4,7 @@ const fs = require('fs-extra')
 const recursiveCopyNpm = require('recursive-copy')
 
 const {
-  recursiveCopy: recursiveCopyCustom
+  recursiveCopy: recursiveCopyCustom,
 } = require('next/dist/lib/recursive-copy')
 
 const fixturesDir = join(__dirname, 'fixtures')
@@ -23,8 +23,8 @@ const createSrcFolder = async () => {
   await Promise.all(files.map(file => fs.outputFile(file, 'hello')))
 }
 
-async function run (fn) {
-  async function test () {
+async function run(fn) {
+  async function test() {
     const start = process.hrtime()
 
     await fn(srcDir, destDir)
@@ -48,7 +48,7 @@ async function run (fn) {
   console.log({ sum, nb, avg })
 }
 
-async function main () {
+async function main() {
   await createSrcFolder()
 
   console.log('test recursive-copy npm module')

bench/recursive-delete/recursive-delete.js

@@ -2,7 +2,7 @@ const { join } = require('path')
 const { recursiveDelete } = require('next/dist/lib/recursive-delete')
 const resolveDataDir = join(__dirname, `fixtures-${process.argv[2]}`)
 
-async function test () {
+async function test() {
   const time = process.hrtime()
   await recursiveDelete(resolveDataDir)
 

bench/recursive-delete/rimraf.js

@@ -4,7 +4,7 @@ const rimrafMod = require('rimraf')
 const resolveDataDir = join(__dirname, `fixtures-${process.argv[2]}`, '**/*')
 const rimraf = promisify(rimrafMod)
 
-async function test () {
+async function test() {
   const time = process.hrtime()
   await rimraf(resolveDataDir)
 

examples/active-class-name/components/ActiveLink.js

@@ -16,14 +16,14 @@ const ActiveLink = ({ children, activeClassName, ...props }) => {
   return (
     <Link {...props}>
       {React.cloneElement(child, {
-        className: className || null
+        className: className || null,
       })}
     </Link>
   )
 }
 
 ActiveLink.propTypes = {
-  activeClassName: PropTypes.string.isRequired
+  activeClassName: PropTypes.string.isRequired,
 }
 
 export default ActiveLink

examples/active-class-name/components/Nav.js

@@ -11,15 +11,15 @@ const Nav = () => (
         content: ' (current page)';
       }
     `}</style>
-    <ul className='nav'>
+    <ul className="nav">
       <li>
-        <ActiveLink activeClassName='active' href='/'>
-          <a className='nav-link'>Home</a>
+        <ActiveLink activeClassName="active" href="/">
+          <a className="nav-link">Home</a>
         </ActiveLink>
       </li>
       <li>
-        <ActiveLink activeClassName='active' href='/about'>
-          <a className='nav-link'>About</a>
+        <ActiveLink activeClassName="active" href="/about">
+          <a className="nav-link">About</a>
         </ActiveLink>
       </li>
     </ul>