setup next-eslint

2021-06-15 22:05:41 +03:00
parent 9922ca43f9
commit a20dcca1d7
13 changed files with 108 additions and 59 deletions
@@ -1,42 +1,19 @@
 {
-  "root": true,
-  "env": {
-    "browser": true,
-    "commonjs": true,
-    "es6": true,
-    "node": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:jsx-a11y/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "airbnb-typescript"
-  ],
-  "globals": {
-    "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly"
-  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
-    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
-  "plugins": [],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "airbnb-typescript",
+    "next",
+    "next/core-web-vitals"
+  ],
  "rules": {
-    "@typescript-eslint/naming-convention": "off",
    "max-len": [
      "warn",
      240
@@ -49,10 +26,7 @@
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": "off",
    // Temp
-    "react/jsx-one-expression-per-line": "off",
-    "react/no-array-index-key": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react/no-array-index-key": "warn",
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/no-noninteractive-element-interactions": "off",
@@ -45,10 +45,8 @@
        "babel-plugin-styled-components": "^1.12.0",
        "eslint": "^7.28.0",
        "eslint-config-airbnb-typescript": "^12.3.1",
-        "eslint-plugin-import": "^2.23.4",
+        "eslint-config-next": "^11.0.0",
        "eslint-plugin-jsx-a11y": "^6.4.1",
-        "eslint-plugin-react": "^7.24.0",
-        "eslint-plugin-react-hooks": "^4.2.0",
        "husky": "^6.0.0",
        "next-sitemap": "^1.6.116",
        "npm-run-all": "^4.1.5",
@@ -1804,6 +1802,12 @@
      "resolved": "https://registry.npmjs.org/@next/env/-/env-11.0.0.tgz",
      "integrity": "sha512-VKpmDvTYeCpEQjREg3J4pCmVs/QjEzoLmkM8shGFK6e9AmFd0G9QXOL8HGA8qKhy/XmNb7dHeMqrcMiBua4OgA=="
    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-11.0.0.tgz",
+      "integrity": "sha512-fPZ0904yY1box6bRpR9rJqIkNxJdvzzxH7doXS+cdjyBAdptMR7wj3mcx1hEikBHzWduU8BOXBvRg2hWc09YDQ==",
+      "dev": true
+    },
    "node_modules/@next/polyfill-module": {
      "version": "11.0.0",
      "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.0.0.tgz",
@@ -1900,6 +1904,12 @@
      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
      "integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA=="
    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz",
+      "integrity": "sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==",
+      "dev": true
+    },
    "node_modules/@stylelint/postcss-css-in-js": {
      "version": "0.37.2",
      "resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz",
@@ -4775,6 +4785,32 @@
        "eslint-config-airbnb-base": "^14.2.0"
      }
    },
+    "node_modules/eslint-config-next": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-11.0.0.tgz",
+      "integrity": "sha512-pmatg4zqb5Vygu2HrSPxbsCBudXO9OZQUMKQCyrPKRvfL8PJ3lOIOzzwsiW68eMPXOZwOc1yxTRZWKNY8OJT0w==",
+      "dev": true,
+      "dependencies": {
+        "@next/eslint-plugin-next": "11.0.0",
+        "@rushstack/eslint-patch": "^1.0.6",
+        "@typescript-eslint/parser": "^4.20.0",
+        "eslint-import-resolver-node": "^0.3.4",
+        "eslint-plugin-import": "^2.22.1",
+        "eslint-plugin-jsx-a11y": "^6.4.1",
+        "eslint-plugin-react": "^7.23.1",
+        "eslint-plugin-react-hooks": "^4.2.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0",
+        "next": ">=10.2.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/eslint-import-resolver-node": {
      "version": "0.3.4",
      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
@@ -15581,6 +15617,12 @@
      "resolved": "https://registry.npmjs.org/@next/env/-/env-11.0.0.tgz",
      "integrity": "sha512-VKpmDvTYeCpEQjREg3J4pCmVs/QjEzoLmkM8shGFK6e9AmFd0G9QXOL8HGA8qKhy/XmNb7dHeMqrcMiBua4OgA=="
    },
+    "@next/eslint-plugin-next": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-11.0.0.tgz",
+      "integrity": "sha512-fPZ0904yY1box6bRpR9rJqIkNxJdvzzxH7doXS+cdjyBAdptMR7wj3mcx1hEikBHzWduU8BOXBvRg2hWc09YDQ==",
+      "dev": true
+    },
    "@next/polyfill-module": {
      "version": "11.0.0",
      "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.0.0.tgz",
@@ -15652,6 +15694,12 @@
      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
      "integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA=="
    },
+    "@rushstack/eslint-patch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz",
+      "integrity": "sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==",
+      "dev": true
+    },
    "@stylelint/postcss-css-in-js": {
      "version": "0.37.2",
      "resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz",
@@ -17942,6 +17990,22 @@
        "eslint-config-airbnb-base": "^14.2.0"
      }
    },
+    "eslint-config-next": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-11.0.0.tgz",
+      "integrity": "sha512-pmatg4zqb5Vygu2HrSPxbsCBudXO9OZQUMKQCyrPKRvfL8PJ3lOIOzzwsiW68eMPXOZwOc1yxTRZWKNY8OJT0w==",
+      "dev": true,
+      "requires": {
+        "@next/eslint-plugin-next": "11.0.0",
+        "@rushstack/eslint-patch": "^1.0.6",
+        "@typescript-eslint/parser": "^4.20.0",
+        "eslint-import-resolver-node": "^0.3.4",
+        "eslint-plugin-import": "^2.22.1",
+        "eslint-plugin-jsx-a11y": "^6.4.1",
+        "eslint-plugin-react": "^7.23.1",
+        "eslint-plugin-react-hooks": "^4.2.0"
+      }
+    },
    "eslint-import-resolver-node": {
      "version": "0.3.4",
      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
@@ -20,8 +20,8 @@
    "postbuild": "next-sitemap",
    "export": "next export",
    "lint": "npm run lint:es && npm run lint:css",
-    "lint:es": "eslint . --ext .ts,.tsx",
-    "lint:es:fix": "eslint --fix . --ext .ts,.tsx",
+    "lint:es": "next lint",
+    "lint:es:fix": "next lint -- fix",
    "lint:css": "stylelint \"./src/**/*.{ts,tsx}\"",
    "dev": "next dev",
    "start": "next dev",
@@ -46,10 +46,8 @@
    "babel-plugin-styled-components": "^1.12.0",
    "eslint": "^7.28.0",
    "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-config-next": "^11.0.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^6.0.0",
    "next-sitemap": "^1.6.116",
    "npm-run-all": "^4.1.5",
@@ -1,7 +1,6 @@
 import React from "react";

-// eslint-disable-next-line react/display-name
-export default (): JSX.Element => (
+const Icons = (): JSX.Element => (
  <>
    <link rel="shortcut icon" href="/favicons/favicon.ico" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
@@ -54,3 +53,5 @@ export default (): JSX.Element => (
    <link rel="yandex-tableau-widget" href="/favicons/yandex-browser-manifest.json" />
  </>
 );
+
+export default Icons;
@@ -1,7 +1,6 @@
 import React from "react";

-// eslint-disable-next-line react/display-name
-export default (): JSX.Element => (
+const Logo = (): JSX.Element => (
  // eslint-disable-next-line react/no-danger
  <head dangerouslySetInnerHTML={{
    __html:
@@ -55,3 +54,5 @@ export default (): JSX.Element => (
  }}
  />
 );
+
+export default Logo;
@@ -27,7 +27,9 @@ const Heading = styled.h3`

 const SectionDividerWidget: React.FC<SectionDividerWidgetProps> = ({ label }) => (
  <Heading>
-    {label}&nbsp;{getIconByLabel(label)}
+    {label}
+    &nbsp;
+    {getIconByLabel(label)}
  </Heading>
 );

@@ -51,19 +51,20 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
    onChange(questions);
  };

-  requiredField() {
+  requiredField(): JSX.Element {
    const { inputProps } = this.props;
    const { questions, index } = inputProps;
    return (
      <Checkbox
        checked={questions[index].required}
        onChange={this.handleRequiredChange(questions, index)}
-      >Required?
+      >
+        Required?
      </Checkbox>
    );
  }

-  render() {
+  render(): JSX.Element {
    const { inputProps } = this.props;
    const {
      type, value, questions, index,
@@ -26,7 +26,9 @@ const NotFoundPage: NextPage = () => (
    <Header />
    <NotFound id="not-found">
      <p>
-        <strong>404</strong> | Ei&nbsp;vaan&nbsp;löydy
+        <strong>404</strong>
+        {" "}
+        | Ei&nbsp;vaan&nbsp;löydy
      </p>
    </NotFound>
  </>
@@ -126,11 +126,10 @@ const AppContainer = styled.div`
  background-color: ${colors.white};
 `;

-const Web20App = ({ Component, pageProps }: AppProps) => (
+const Web20App = ({ Component, pageProps }: AppProps): JSX.Element => (
  <>
    <Head>
      <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
-      <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,800,900&display=swap" rel="stylesheet" />
      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>Aalto-yliopiston Sähköinsinöörikilta ry</title>
@@ -29,12 +29,13 @@ export default class MyDocument extends Document<{ styleTags: unknown }> {
    }
  }

-  render() {
+  render(): JSX.Element {
    const { styleTags } = this.props;
    return (
      <Html lang="fi">
        <Head>
          <HTMLLogo />
+          <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,800,900&display=swap" rel="stylesheet" />
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
          <Favicons />
        </Head>
@@ -46,7 +46,8 @@ const AdminLoginPage: NextPage = () => {
        <div className="error">You have to log in first.</div>
        )}
        <form className="admin-login-form" onSubmit={handleSubmit}>
-          <label>Username
+          <label>
+            Username
            <input
              id="login-username"
              type="text"
@@ -57,7 +58,8 @@ const AdminLoginPage: NextPage = () => {
              }}
            />
          </label>
-          <label>Password
+          <label>
+            Password
            <input
              id="login-password"
              type="password"
@@ -61,7 +61,10 @@ const SignupEmailPage: NextPage = () => {

  return (
    <AdminListCommon>
-      <h1>{title}: Sign-ups</h1>
+      <h1>
+        {title}
+        : Sign-ups
+      </h1>
      <table>
        <thead>
          <tr>
@@ -30,7 +30,7 @@ const orderedCommittees = [
  Others,
 ];

-const blank_profile = "/img/blank_profile.png";
+const blankProfile = "/img/blank_profile.png";

 const BlueLink = styled(Link)`
  color: ${colors.blue1};
@@ -91,7 +91,7 @@ const CommitteeContainer: React.FC<{
            name={representative.name}
            phone={representative.phone_number}
            email={representative.email}
-            image={(committee.name_en === "Board") ? (representative.image || blank_profile) : null}
+            image={(committee.name_en === "Board") ? (representative.image || blankProfile) : null}
            role_fi={role.name_fi}
            role_en={role.name_en}
          />
@@ -126,7 +126,8 @@ const ContactsPageView: React.FC = () => (
    <TextSection>
      <h1>Yhteystiedot</h1>
      <p>
-        Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
+        Asiaa olisi, mutta kehen ottaa yhteyttä?
+        <br />
        Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
      </p>
      <aside>