Set up ESLint with @typescript-eslint packages (#118)

[@typescript-eslint](https://github.com/typescript-eslint/typescript-eslint) seems to be the way to go since it actually uses TypeScript under the hood. The alternative is Babel, which "parses and strips the type information, you still need the TypeScript compiler running if you want type checking." see [babel/babel-eslint#63](babel/babel-eslint#663 (comment))

[The future of TypeScript on ESLint (Jan 2019)](https://eslint.org/blog/2019/01/future-typescript-eslint)

Closes #51

.circleci/config.yml

@@ -67,6 +67,11 @@ jobs:
             - web/node_modules
           key: web-modules-{{ checksum "web/package.json" }}
 
+      # ESLint should not care about code formating, we use Prettier for that. 
+      - run:
+          name: Checking ESLint Rules for Conflicts with Prettier
+          command: npm run lint:check
+
       - run:
           name: Linting
           command: npm run lint

.eslintignore

@@ -0,0 +1,11 @@
+# Code generated by Prisma CLI and GraphQL Code Generator
+api/src/__generated__
+
+# Test coverage reports generated by Jest
+coverage
+
+# Compiled JavaScript by 'tsc' cli command from TypeScript
+dist
+
+# NPM installed packages
+node_modules

.eslintrc.js

@@ -0,0 +1,54 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['import'],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    // Disable all rules related to code formatting. Prettier handles formatting.
+    // Prettier related configs should come last in the 'extends' Array.
+    'plugin:import/recommended',
+    // We could move the import/* settings below to a lerna package, and use it here:
+    // 'plugin:typescript-eslint-import/recommended',
+    'plugin:prettier/recommended',
+    'prettier/@typescript-eslint',
+  ],
+  rules: {
+    'no-param-reassign': ['error'],
+
+    // The code base was migrated from JavaScript recently. Let's chill a bit.
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-member-accessibility': 'off',
+    '@typescript-eslint/no-empty-interface': 'warn',
+    '@typescript-eslint/no-use-before-define': 'off',
+
+    // eslint-plugin-import
+    // We can't alphabetize imports within groups, yet
+    // https://github.com/benmosher/eslint-plugin-import/pull/1105
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        // Allow imports from devDependencies
+        devDependencies: [
+          // In test files
+          '**/*.test.{ts,tsx}',
+          '**/*/__tests__/**/*.{ts,tsx}',
+          // In test utilities files
+          '**/*/utils/test/*.{ts,tsx}',
+          // In configuration or setup files
+          '**/*.{config,setup}.{js,ts}',
+        ],
+      },
+    ],
+    'import/order': ['error'],
+  },
+  settings: {
+    'import/extensions': ['.ts', '.tsx'],
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    // https://www.npmjs.com/package/eslint-import-resolver-typescript#configuration
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+};

.vscode/extensions.json

@@ -4,10 +4,12 @@
 
 	// List of extensions which should be recommended for users of this workspace.
 	"recommendations": [
+    "dbaeumer.vscode-eslint",
 		"jvandyke.vscode-circleci"
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": [
-
+    "dbaeumer.jshint",
+    "hookyqr.beautify",
 	]
 }

.vscode/settings.json

@@ -1,3 +1,39 @@
 {
-  "circleci.apiKey": "71b8fe885d9b5f6ff461fd86c8bfdd8acf2f4059"
-}
+  "circleci.apiKey": "71b8fe885d9b5f6ff461fd86c8bfdd8acf2f4059",
+
+  // ESLint + Prettier code formating
+  //*
+  "javascript.format.enable": false,
+  "typescript.format.enable": false,
+  // Disable formatOnSave for every language
+  "editor.formatOnSave": false,
+  // Enable per-language
+  "[javascript]": {
+    // We still use JavaScript for some configuration/setup files
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": true
+  },
+  // Prettier is run by ESLint as an autofixable rule, so we don't
+  // need to run it separately:
+  "eslint.autoFixOnSave": true,
+  // Otherwise, we could use 'esbenp.prettier-vscode' extension.
+  // Formats our code using prettier followed by eslint --fix:
+  // "prettier.eslintIntegration": true,
+  "eslint.validate": [
+    "javascript",
+    {
+      "language": "typescript",
+      "autoFix": true
+    },
+    {
+      "language": "typescriptreact",
+      "autoFix": true
+    }
+  ],
+  /**/
+}

api/jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   displayName: 'API',
-  setupFiles: ['<rootDir>/jest.setup.js'],
+  setupFiles: ['<rootDir>/jest.setup.ts'],
   transform: {
     '\\.ts?$': 'ts-jest',
   },

api/jest.setup.ts

@@ -0,0 +1,10 @@
+// Precisamos desse script para configurar um arquivo de variáveis diferente.
+import path from 'path';
+import dotenv from 'dotenv';
+
+const testEnvFile = path.join(__dirname, './.env.test');
+const result = dotenv.config({ path: testEnvFile });
+
+if (result.error) {
+  throw result.error;
+}

api/src/__tests__/__utils.ts

@@ -1,8 +1,8 @@
+import { AddressInfo } from 'net';
 import { execute, toPromise } from 'apollo-link';
 import { HttpLink } from 'apollo-link-http';
 import { ApolloServer } from 'apollo-server-express';
 import express from 'express';
-import { AddressInfo } from 'net';
 // @types/node-fetch possui tipo incompatível com o HttpLink,
 // por isso não foi instalado.
 import fetch from 'node-fetch';

api/src/filepond.ts

@@ -1,7 +1,7 @@
-import { UploadedFile } from 'express-fileupload';
 import * as fs from 'fs';
-import { extension } from 'mime-types';
 import * as path from 'path';
+import { UploadedFile } from 'express-fileupload';
+import { extension } from 'mime-types';
 import { generate } from 'shortid';
 
 import config from './config';

api/src/index.ts

@@ -1,9 +1,9 @@
+import path from 'path';
 import { ApolloServer, gql } from 'apollo-server-express';
 import cors from 'cors';
 import express from 'express';
 import fileUpload from 'express-fileupload';
 import { importSchema } from 'graphql-import';
-import path from 'path';
 
 import { prisma } from './__generated__/prisma-client';
 import config from './config';

api/src/resolvers/Mutation/questions.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs';
-import mv from 'mv';
 import * as path from 'path';
+import mv from 'mv';
 
 import { MutationResolvers } from '../../__generated__/resolvers-types';
 // Estes tipos são gerados pelo 'prisma generate'

api/src/resolvers/Query.ts

@@ -2,7 +2,7 @@ import { QueryResolvers } from '../__generated__/resolvers-types';
 import { getUserId } from '../utils';
 
 // O primeiro argumento dos resolvers, 'parent', sempre será
-// 'blank' porque ele se refere à raíz do grafo.
+// vazio porque ele se refere à raíz do grafo.
 export const Query: QueryResolvers.Resolvers = {
   // https://github.com/prisma/prisma/issues/2225#issuecomment-413265367
   // O 'prisma generate' gera um tipo inconpatível, a interface Node está vazia,

olimat.code-workspace

@@ -33,8 +33,7 @@
   "extensions": {
     "recommendations": [
       "apollographql.vscode-apollo",
-      "editorconfig.editorconfig",
-      "eg2.tslint"
+      "editorconfig.editorconfig"
     ]
   }
 }