chore: update linters and clean out unnecessary config (#4)

- update linters
- removed prettier (i prefer optimizing later.. so in this case not having excess files like the prettier files if they are not used)

.eslintignore

@@ -1,3 +1,14 @@
-**/node_modules/*
-**/out/*
-**/.next/*
+webpack.*
+yarn.lock
+*.json
+*.md
+*.toml
+
+*.css
+*.scss
+*.js
+
+node_modules/
+dist/
+public/
+.next/

.eslintrc.js

@@ -0,0 +1,132 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:import/typescript',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 11,
+    sourceType: 'module',
+    project: './tsconfig.json',
+  },
+  plugins: [
+    'import',
+    'react',
+    '@typescript-eslint',
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    }
+  },
+  rules: {
+    'linebreak-style': [ 'error', 'unix' ],
+
+    '@typescript-eslint/no-require-imports': [ 'error' ],
+
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { argsIgnorePattern: '^_' }
+    ],
+
+    // 2 space indentation
+    '@typescript-eslint/indent': [ 'error', 2 ],
+
+    // Style
+    'quotes': [ 'error', 'single', { avoidEscape: true } ],
+
+    // ensures clean diffs, see https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8
+    'comma-dangle': [ 'error', 'always-multiline' ],
+
+    // Require all imported dependencies are actually declared in package.json
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        optionalDependencies: false,    // Disallow importing optional dependencies (those shouldn't be in use in the project)
+        peerDependencies: false,         // Disallow importing peer dependencies (that aren't also direct dependencies)
+      },
+    ],
+
+    // Require all imported libraries actually resolve (!!required for import/no-extraneous-dependencies to work!!)
+    'import/no-unresolved': [ 'error' ],
+
+    // Require an ordering on all imports
+    'import/order': ['warn', {
+      groups: ['builtin', 'external'],
+      alphabetize: { order: 'asc', caseInsensitive: true },
+    }],
+
+    // Cannot import from the same module twice
+    'no-duplicate-imports': ['error'],
+
+    // Cannot shadow names
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+
+    // Required spacing in property declarations (copied from TSLint, defaults are good)
+    'key-spacing': ['error'],
+
+    // Require semicolons
+    'semi': ['error', 'always'],
+
+    // Don't unnecessarily quote properties
+    'quote-props': ['error', 'consistent-as-needed'],
+
+    // No multiple empty lines
+    'no-multiple-empty-lines': ['error'],
+
+    // Max line lengths
+    'max-len': ['error', {
+      code: 120,
+      ignoreUrls: true, // Most common reason to disable it
+      ignoreStrings: true, // These are not fantastic but necessary for error messages
+      ignoreTemplateLiterals: true,
+      ignoreComments: true,
+      ignoreRegExpLiterals: true,
+    }],
+
+    // One of the easiest mistakes to make
+    '@typescript-eslint/no-floating-promises': ['error'],
+
+    // Don't leave log statements littering the premises!
+    'no-console': ['error'],
+
+    // Useless diff results
+    'no-trailing-spaces': ['error'],
+
+    // Must use foo.bar instead of foo['bar'] if possible
+    'dot-notation': ['error'],
+
+    // Are you sure | is not a typo for || ?
+    'no-bitwise': ['error'],
+
+    // Member ordering
+    '@typescript-eslint/member-ordering': ['error', {
+      default: [
+        'public-static-field',
+        'public-static-method',
+        'protected-static-field',
+        'protected-static-method',
+        'private-static-field',
+        'private-static-method',
+
+        'field',
+
+        // Constructors
+        'constructor', // = ['public-constructor', 'protected-constructor', 'private-constructor']
+
+        // Methods
+        'method',
+      ],
+    }],
+  },
+};

components/Footer.tsx

@@ -7,7 +7,7 @@ function Footer(): JSX.Element {
         made by acm at ucla, with next
       </div>
     </footer>
-  )
+  );
 }
 
 export default Footer;

components/GitHubEvent.tsx

@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import React from 'react'
+import Link from 'next/link';
+import React from 'react';
 
-import GitHubEventAction from './GitHubEventAction'
+import GitHubEventAction from './GitHubEventAction';
 
 // TODO(mattxwang): get the official types from the type registry;
 // see https://github.com/octokit/types.ts
@@ -32,12 +32,8 @@ interface GitHubRepo {
 }
 
 function GitHubEvent(props: GitHubEvent): JSX.Element {
-  const { type, actor, repo, payload } = props
-  const userLink = !actor.login.includes('[bot]') ? (
-    <Link href={`https://github.com/${actor.login}`}>{`@${actor.login}`}</Link>
-  ) : (
-    actor.login
-  )
+  const {type, actor, repo, payload} = props;
+  const userLink = !actor.login.includes('[bot]') ? <Link href={`https://github.com/${actor.login}`}>{`@${actor.login}`}</Link> : actor.login;
   return (
     <>
       {/* <div className="card" style={{marginTop: "20px"}}> */}
@@ -48,7 +44,7 @@ function GitHubEvent(props: GitHubEvent): JSX.Element {
       {/*  </div> */}
       {/* // </div> */}
     </>
-  )
+  );
 }
 
-export default GitHubEvent
+export default GitHubEvent;

components/GitHubEventAction.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 // TODO(mattxwang): fix the payload thing to actually use a type, maybe
 // from the octokit types
 interface GitHubEventActionProps {
@@ -9,45 +10,45 @@ interface GitHubEventActionProps {
 // returns a string of form: <verb> <location/type of action> <preposition>
 function GitHubEventAction({type, payload}: GitHubEventActionProps): JSX.Element {
   const linkProps = {
-    rel: "noopener noreferrer",
-    target: "_blank",
-  }
+    rel: 'noopener noreferrer',
+    target: '_blank',
+  };
   const unknown = <span>did a {type} on</span>;
   switch(type){
-    case "CreateEvent":
-    case "DeleteEvent": {
+    case 'CreateEvent':
+    case 'DeleteEvent': {
       const target = payload?.ref;
       const targetType = payload?.ref_type;
       if (!target || !targetType) {
         return unknown;
       }
-      const action = type === "CreateEvent"? "created" : "deleted";
+      const action = type === 'CreateEvent'? 'created' : 'deleted';
       return <span>{action} {targetType} <code>{target}</code> in</span>;
     }
-    case "IssueCommentEvent": {
+    case 'IssueCommentEvent': {
       const action = payload?.action;
       const issue = payload?.issue;
       const issueURL = issue?.html_url;
       const issueNum = issue?.number;
       if (!action || !issue || !issueURL) {
         return unknown;
       }
-      const issueText = issueNum ? `issue #${issueNum}` : "an issue";
-      const actionStr = action === "created" ? "commented on" : action;
+      const issueText = issueNum ? `issue #${issueNum}` : 'an issue';
+      const actionStr = action === 'created' ? 'commented on' : action;
       return <span>{actionStr} <a href={issueURL} {...linkProps}>{issueText}</a> in</span>;
     }
-    case "IssuesEvent": {
+    case 'IssuesEvent': {
       const action = payload?.action;
       const issue = payload?.issue;
       const issueURL = issue?.html_url;
       const issueNum = issue?.number;
       if (!action || !issue || !issueURL) {
         return unknown;
       }
-      const issueText = issueNum ? `issue #${issueNum}` : "an issue";
+      const issueText = issueNum ? `issue #${issueNum}` : 'an issue';
       return <span>{action} <a href={issueURL} {...linkProps}>{issueText}</a> in</span>;
     }
-    case "PullRequestEvent": {
+    case 'PullRequestEvent': {
       const action = payload?.action;
       const prNum = payload?.number;
       const prURL = payload?.pull_request?.html_url;
@@ -56,20 +57,20 @@ function GitHubEventAction({type, payload}: GitHubEventActionProps): JSX.Element
       }
       return <span>{action} <a href={prURL} {...linkProps}>pull request #{prNum}</a> in</span>;
     }
-    case "PullRequestReviewEvent": {
+    case 'PullRequestReviewEvent': {
       const action = payload?.action;
       const prNum = payload?.pull_request?.number;
       const prURL = payload?.pull_request?.html_url;
       if (!action || !prNum || !prURL) {
         return unknown;
       }
-      const actionStr = action === "created" ? "reviewed" : action;
+      const actionStr = action === 'created' ? 'reviewed' : action;
       return <span>{actionStr} <a href={prURL} {...linkProps}>pull request #{prNum}</a> in</span>;
     }
-    case "PushEvent": {
+    case 'PushEvent': {
       const size = payload?.size; // should this be distinct_size?
       const sizeStr = size ? size : '1'; // should we use 'a'?
-      return <span>pushed {sizeStr} commit{size !== 1 && "s"} to</span>;
+      return <span>pushed {sizeStr} commit{size !== 1 && 's'} to</span>;
     }
     default:
       return unknown;

components/Navbar.tsx

@@ -25,7 +25,7 @@ function Navbar(): JSX.Element {
         </div>
       </div>
     </nav>
-  )
+  );
 }
 
 export default Navbar;