Support .ts(x) eslint linting (codesandbox#2143)

* Demo linting errors

* ⚙️ Config: Add TypeScript validation to VSCode ESLint Settings

This appears to be a solution to ESLint not working on TypeScript files in VSCode. It doesn't solve issues in other editors, but right now it would appear that getting ESLint to work with TypeScript is difficult to do in general.

* app eslint: also check .ts(x) files.

* app typecheck: really exclude overmind.

* app eslint: ignore overmind (for now).

* Fix ESLint errors/warnings on linting-issues-repro branch (codesandbox#2154)

* Fix ESLint errors

* Fix some more ESLint errors

* Ignore packages/app/src/app/vscode folder

* Fix some more ESLint errors

* Resolve discussions

* Resolve some more discussions

* Fix 0 check on number

* Change undefined value

* Make function name more explicit

* Change undefined behaviour

* Support importing types in linter

Author: CompuIves

.eslintrc

@@ -49,7 +49,8 @@
       "warn",
       { "aspects": ["noHref", "invalidHref"] }
     ],
-    "jsx-a11y/label-has-for": "off"
+    "jsx-a11y/label-has-for": "off",
+    "no-bitwise": "off"
   },
   "overrides": [
     {

.vscode/settings.json

@@ -1,4 +1,10 @@
 {
   "eslint.enable": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    { "language": "typescript", "autoFix": true },
+    { "language": "typescriptreact", "autoFix": true }
+  ]
 }

packages/app/.eslintignore

@@ -0,0 +1,2 @@
+src/app/overmind/**/*
+src/app/vscode/**/*

packages/app/.eslintrc

@@ -2,7 +2,7 @@
   "settings": {
     "import/resolver": {
       "webpack": {
-        "config": "config/webpack.common.js"
+        "config": "config/webpack.lint.js"
       }
     },
     "import/external-module-folders": ["src", "node_modules"]

packages/app/config/webpack.lint.js

@@ -0,0 +1,6 @@
+const config = require('./webpack.common');
+
+// For linting support for importing types
+config.resolve.extensions.push('.d.ts');
+
+module.exports = config;

packages/app/package.json

@@ -17,8 +17,8 @@
     "test:watch": "jest --watch --env=jsdom",
     "test:integrations": "jest --config integration-tests/jest.config.json --maxWorkers=2",
     "lint": "npm run lint:app && npm run lint:embed",
-    "lint:app": "cross-env LINT=1 eslint src/app",
-    "lint:embed": "cross-env LINT=1 eslint src/embed",
+    "lint:app": "cross-env LINT=1 eslint --ext .js,.ts,.tsx src/app",
+    "lint:embed": "cross-env LINT=1 eslint --ext .js,.ts,.tsx src/embed",
     "integrations:start": "docker run -v $(pwd):/app/ -it codesandbox/test yarn start:test",
     "typecheck": "tsc --noEmit -p tsconfig.check.json"
   },

packages/app/src/app/components/CodeEditor/Configuration/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { TextOperation } from 'ot';
 import { Module } from '@codesandbox/common/lib/types';
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
-import getType from 'app/utils/get-type.ts';
+import getType from 'app/utils/get-type';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';

packages/app/src/app/components/CodeEditor/MonacoDiff/index.js

@@ -1,7 +1,6 @@
-// @flow
 import React from 'react';
 
-import type { Editor, Settings } from '../types';
+import { Editor, Settings } from '../types';
 import MonacoReactComponent from '../Monaco/MonacoReactComponent';
 import defineTheme from '../Monaco/define-theme';
 

packages/app/src/app/components/CodeEditor/VSCode/Configuration/elements.ts

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 export const Container = styled.div`
   padding: 1rem;

packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx

@@ -1,14 +1,16 @@
-import React from 'react';
-import { TextOperation } from 'ot';
-import { Module } from '@codesandbox/common/lib/types';
+import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
-import getType from 'app/utils/get-type.ts';
-import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import theme from '@codesandbox/common/lib/theme';
+import { Module } from '@codesandbox/common/lib/types';
+import { TextOperation } from 'ot';
+import React from 'react';
+
+import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import getType from 'app/utils/get-type';
 
 import { Props as EditorProps, Editor } from '../../types';
+
 import { Container, Title, Description } from './elements';
-import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';
 
 type Disposable = {
   dispose: () => void;