feat: ESLint and Prettier (#135)

* feat: use eslint as linter

* feat: prettier and rule disabling

* feat: auto settings vscode

* feat(lint): hooks rules

* fix(lint): project path

get back to json for intellisense

* fix(lint): autofix and try to fix import

* fix(lint): imports resolve and remove tslint remnants

* feat(lint): eslintignore

* feat(lint): no extraneous deps monorepo and ignore patterns

https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md

* feat(lint): disable rules

* feat(lint): accessibility

* fix(test): snapshot update

* feat(lint): did not disable react no array index key

the rule is useful in most situations

* feat(lint): add cypress plugin and recommended rules

* fix(lint): make paths consistent

works across cli and editor extension now

* fix(ts): check for truthiness before using

* feat(lint): backend

* feat(lint): try to lint workspace

* refactor(lint): centalize eslint

now imports are broken again

* fix(lint): further centralization

keep extending prettier or it blows up

* fix(lint): further centralization

weird no-unused-vars behaviour in backend. still cannot read null errors when linting entire workspace

* refactor(deps): all eslint deps to root

* fix(lint): undo centralization

* fix(lint): remove linting if not in package

* fix(lint): lerna

lint frontend and backend in parallel

* fix(lint): path for import linting

* feat(lint): lint staged

* fix(lint): unused vars

* style(lint): format eslintrc files

.vscode/settings.json

@@ -6,6 +6,37 @@
     {
       "fileMatch": ["renovate.json"],
       "url": "http://json.schemastore.org/renovate"
+    },
+    {
+      "fileMatch": [".eslintrc.json"],
+      "url": "http://json.schemastore.org/eslintrc"
     }
+  ],
+  "eslint.validate": [
+    { "language": "javascript", "autoFix": true },
+    { "language": "javascriptreact", "autoFix": true },
+    { "language": "typescript", "autoFix": true },
+    { "language": "typescriptreact", "autoFix": true }
+  ],
+  "eslint.autoFixOnSave": true,
+  "eslint.alwaysShowStatus": true,
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": false
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "[typescript]": {
+    "editor.formatOnSave": false
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "prettier.disableLanguages": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
   ]
 }

package.json

@@ -18,7 +18,10 @@
   "scripts": {
     "dev": "lerna run --parallel --scope={@jsaf/backend,@jsaf/frontend} dev",
     "test": "lerna run --stream test",
-    "cm": "commit"
+    "cm": "commit",
+    "lint:fe": "cd packages/frontend && yarn lint",
+    "lint:be": "cd packages/backend && yarn lint",
+    "lint": "lerna run --parallel --scope={@jsaf/backend,@jsaf/frontend} lint"
   },
   "husky": {
     "hooks": {
@@ -28,24 +31,37 @@
   },
   "lint-staged": {
     "*.{ts,tsx}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{json,yml}": [
       "prettier --write",
-      "tslint --fix",
       "git add"
     ]
   },
   "devDependencies": {
     "@commitlint/cli": "7.5.2",
     "@commitlint/config-conventional": "7.5.0",
     "@commitlint/prompt-cli": "7.5.0",
+    "@typescript-eslint/eslint-plugin": "^1.4.2",
+    "@typescript-eslint/parser": "^1.4.2",
     "docz": "0.13.7",
     "docz-theme-default": "0.13.7",
+    "eslint": "^5.15.1",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-import-resolver-typescript": "^1.1.1",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-cypress": "^2.2.1",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.11.0",
+    "eslint-plugin-react-hooks": "^1.4.0",
     "husky": "1.3.1",
     "lerna": "3.13.1",
     "lint-staged": "8.1.5",
-    "prettier": "1.16.4",
-    "tslint": "5.13.1",
-    "tslint-config-prettier": "1.18.0",
-    "tslint-react": "3.6.0",
+    "prettier": "^1.16.4",
     "typescript": "3.3.3333"
   },
   "dependencies": {}

packages/backend/.eslintignore

@@ -0,0 +1,2 @@
+/node_modules/*
+/src/generated/*

packages/backend/.eslintrc.js

@@ -0,0 +1,67 @@
+const path = require('path');
+
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'airbnb-base',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'prettier/@typescript-eslint',
+  ],
+  plugins: ['@typescript-eslint', 'import', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      impliedStrict: true,
+    },
+    sourceType: 'module',
+    project: path.resolve(__dirname, './tsconfig.json'),
+  },
+  env: {
+    es6: true,
+    jest: true,
+    node: true,
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        directory: path.resolve(__dirname, './tsconfig.json'),
+      },
+    },
+  },
+  rules: {
+    'prettier/prettier': 'error',
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        packageDir: [
+          path.resolve(__dirname, './'),
+          path.resolve(__dirname, '../../'),
+        ],
+        devDependencies: [
+          '**/*.test.js',
+          '**/*.spec.js',
+          '/testUtils/**',
+          '/cypress/**',
+        ],
+      },
+    ],
+    'prefer-destructuring': 'off',
+    'no-underscore-dangle': 'off',
+    '@typescript-eslint/explicit-member-accessibility': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/prefer-interface': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'local',
+        args: 'none',
+      },
+    ],
+    'import/prefer-default-export': 'off',
+  },
+};

packages/backend/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "nodemon",
     "test": "jest",
-    "codegen": "graphqlgen"
+    "codegen": "graphqlgen",
+    "lint": "eslint --ext .ts ."
   },
   "dependencies": {
     "apollo-server-express": "^2.3.3",

packages/backend/src/express.ts

@@ -30,6 +30,7 @@ app.use((req: IRequest, _, next) => {
   next();
 });
 
+/* eslint-disable consistent-return */
 app.use(async (req: IRequest, _, next) => {
   // if they aren't logged in, skip this
   if (!req.userId) {
@@ -39,6 +40,7 @@ app.use(async (req: IRequest, _, next) => {
   req.user = user;
   next();
 });
+/* eslint-enable consistent-return */
 
 app.get('/auth/logout', (req: IRequest, res) => {
   res.clearCookie('token');

packages/backend/src/index.ts

@@ -1,9 +1,11 @@
-require('dotenv').config();
 import expressServer from './express';
 import { graphqlPath } from './apolloServer';
 
+require('dotenv').config();
+
 const port = process.env.PORT || 4000;
 
 expressServer.listen(port, () => {
+  /* eslint-disable no-console */
   console.log(`🚀 Server started at http://localhost:${port}${graphqlPath}`);
 });