Add CI jobs for ESLint and Typescript checks

.github/workflows/pullrequest.yml

@@ -27,3 +27,35 @@ jobs:
     uses: viamrobotics/rdk/.github/workflows/appimage.yml@main
     secrets:
       GCP_CREDENTIALS: ${{ secrets.GCP_CREDENTIALS }}
+
+  eslint:
+    # Ignore adding a new label not Deploy
+    if: contains(fromJson('["opened", "synchronize", "reopened"]'), github.event.action)
+    name: ESLint
+    timeout-minutes: 5
+    runs-on: [self-hosted, x64]
+    container:
+      image: ghcr.io/viamrobotics/canon:amd64-cache
+      options: --platform linux/amd64
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules & generate protos
+      run: make buf-web
+    - name: Run ESLint
+      run: make lint-web
+
+  typecheck:
+    # Ignore adding a new label not Deploy
+    if: contains(fromJson('["opened", "synchronize", "reopened"]'), github.event.action)
+    name: Typescript
+    timeout-minutes: 5
+    runs-on: [self-hosted, x64]
+    container:
+      image: ghcr.io/viamrobotics/canon:amd64-cache
+      options: --platform linux/amd64
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules & generate protos
+      run: make buf-web
+    - name: Run Typecheck
+      run: make typecheck-web

Makefile

@@ -52,8 +52,11 @@ lint-go: tool-install
 	export pkgs="`go list $(GO_BUILD_TAGS) -f '{{.Dir}}' ./... | grep -v /proto/`" && echo "$$pkgs" | xargs go vet $(GO_BUILD_TAGS) -vettool=$(TOOL_BIN)/combined
 	GOGC=50 $(TOOL_BIN)/golangci-lint run $(LINT_BUILD_TAGS) -v --fix --config=./etc/.golangci.yaml
 
-lint-web: buf-web
-	cd web/frontend && npm ci --audit=false && npm run rollup && npm run lint
+lint-web:
+	npm run lint --prefix web/frontend
+
+typecheck-web:
+	npm run typecheck --prefix web/frontend
 
 cover:
 	PATH=$(PATH_WITH_TOOLS) ./etc/test.sh cover
@@ -63,8 +66,8 @@ test: test-go test-web
 test-go:
 	./etc/test.sh
 
-test-web: build-web
-	cd web/frontend && npm run test:unit
+test-web:
+	npm run test:unit --prefix web/frontend
 
 # test.short skips tests requiring external hardware (motors/servos)
 test-pi:

web/frontend/.eslintrc.js

@@ -10,54 +10,65 @@ module.exports = {
     parser: '@typescript-eslint/parser',
     ecmaVersion: 'latest',
     sourceType: 'module',
-    ecmaFeatures: { jsx: true },
   },
   plugins: [
     'vue',
     '@typescript-eslint',
     'unicorn',
-    'import',
     'tailwindcss',
   ],
   extends: [
-    'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:import/recommended',
-    'plugin:import/typescript',
+    'eslint:all',
     'plugin:unicorn/recommended',
     'plugin:tailwindcss/recommended',
     'plugin:vue/vue3-essential',
     'plugin:vue/vue3-strongly-recommended',
     'plugin:vue/vue3-recommended',
   ],
+  ignorePatterns: ['**/node_modules/**', '*.json', '**/protos/**'],
   rules: {
-    // Spacing and code style
     // https://github.com/eslint/eslint/issues/13956
     indent: 'off',
-    'arrow-spacing': 'error',
-    'block-spacing': 'error',
-    'comma-spacing': 'error',
-    'computed-property-spacing': 'error',
-    'func-call-spacing': 'error',
-    'key-spacing': 'error',
-    'keyword-spacing': 'error',
-    'rest-spread-spacing': 'error',
-    'semi-spacing': 'error',
-    'array-bracket-spacing': 'error',
-    'space-before-blocks': 'error',
-    'space-in-parens': 'error',
-    'space-infix-ops': 'error',
-    'space-unary-ops': 'error',
-    'spaced-comment': 'error',
-    'template-curly-spacing': 'error',
+    'array-element-newline': ['error', 'consistent'],
+    'arrow-body-style': 'off',
+    camelcase: ['error', { properties: 'never' }],
+    'capitalized-comments': 'off',
+    'consistent-return': 'off',
+    'default-case': 'off',
+    'dot-location': ['error', 'property'],
+    'function-call-argument-newline': ['error', 'consistent'],
+    'function-paren-newline': ['error', 'consistent'],
+    'id-length': ['error', { exceptions: ['_', 'x', 'y', 'z', 'w', 'i', 'j', 'k'] }],
+    'init-declarations': 'off',
+    'implicit-arrow-linebreak': 'off',
+    'lines-around-commen': 'off',
+    'max-len': ['error', { code: 120 }],
+    'max-lines': 'off',
+    'max-lines-per-function': 'off',
+    'max-params': 'off',
+    'max-statements': 'off',
+    'multiline-ternary': ['error', 'always-multiline'],
+    'prefer-destructuring': [
+      'error', {
+        AssignmentExpression: { array: false, object: false },
+        VariableDeclarator: { array: true, object: true },
+      },
+    ],
+    'sort-keys': 'off',
+    'sort-imports': 'off',
     'object-curly-spacing': ['error', 'always'],
+    'object-property-newline': ['error', { allowAllPropertiesOnSameLine: true }],
+    'no-continue': 'off',
+    'no-extra-parens': 'off',
+    'no-magic-numbers': 'off',
     'no-multiple-empty-lines': ['error', { max: 1 }],
-    'no-multi-spaces': 'error',
-    'eol-last': 'error',
-    'brace-style': 'error',
-    'semi-style': 'error',
-    'dot-notation': 'error',
-    'nonblock-statement-body-position': 'error',
+    'no-ternary': 'off',
+    'no-undefined': 'off',
+    // Eventually we want to re-enable, so that people comment jira tickets instead of TODO.
+    'no-warning-comments': 'off',
+    'padded-blocks': 'off',
+    'vue/no-deprecated-slot-attribute': 'off',
     quotes: ['error', 'single', { avoidEscape: true }],
     semi: ['error', 'always'],
     'comma-dangle': [
@@ -71,12 +82,12 @@ module.exports = {
       },
     ],
 
-    // Typescript catches these issues, and ESLint isn't smart enough to understand
-    // Vue's macros like 'defineProps()', so we'll turn these off for now
+    /**
+     * Typescript catches these issues, and ESLint isn't smart enough to understand
+     * Vue's macros like 'defineProps()', so we'll turn these off for now
+     */
     'no-undef': 'off',
     'no-unused-vars': 'off',
-    'prefer-object-spread': 'error',
-    'prefer-template': 'error',
     'quote-props': ['error', 'as-needed'],
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -102,39 +113,15 @@ module.exports = {
     yoda: 'error',
     'no-implicit-coercion': 'error',
     'no-unneeded-ternary': 'error',
-    'no-useless-return': 'error',
     'no-var': 'error',
     'object-shorthand': ['error', 'properties'],
     'prefer-arrow-callback': 'error',
     'prefer-const': 'error',
 
     // Vue
-    'vue/no-deprecated-slot-attribute': 'off',
-    'vue/require-default-prop': 'off',
     'vue/multi-word-component-names': 'off',
-    'vue/no-undef-components': ['error', { ignorePatterns: ['v-'] }],
-
-    // Import
-    'import/no-unresolved': 'error',
-    'import/named': 'error',
-    'import/default': 'error',
-    'import/namespace': 'error',
-    'import/no-absolute-path': 'error',
-    'import/no-webpack-loader-syntax': 'error',
-    'import/no-self-import': 'error',
-    'import/no-cycle': 'error',
-    'import/no-useless-path-segments': 'error',
-    'import/order': 'error',
-    'import/export': 'error',
-    'import/first': 'error',
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        js: 'never',
-        ts: 'never',
-      },
-    ],
+    'vue/no-undef-components': ['error', { ignorePatterns: ['-'] }],
+    'vue/require-default-prop': 'off',
 
     // Unicorn
     'unicorn/no-empty-file': 'off',
@@ -164,11 +151,28 @@ module.exports = {
     '@typescript-eslint/ban-ts-comment': 'warn',
   },
   settings: {
+    'import/extensions': ['.vue'],
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.js'],
+    },
     'import/resolver': {
-      node: {
-        extensions: ['.js', '.ts', '.vue'],
+      typescript: {
+        alwaysTryTypes: true,
+        project: './tsconfig.json',
+      },
+      'eslint-import-resolver-custom-alias': {
+        alias: {
+          '@': './frontend/src',
+        },
+        extensions: ['.ts', '.js', '.vue'],
       },
     },
   },
-  ignorePatterns: ['**/cypress/**', '**/node_modules/**', '*.json', '**/protos/**'],
+  // User ts parser for typescript files
+  overrides: [
+    {
+      files: ['*.ts'],
+      parser: '@typescript-eslint/parser',
+    },
+  ],
 };

web/frontend/cypress/e2e/rc-controls.cy.ts

@@ -10,12 +10,14 @@ describe('should load the page', () => {
     cy.contains('h2', 'test_servo').should('exist');
     cy.contains('h2', 'test_motor').should('exist');
     cy.contains('h2', 'test_input').should('exist');
-    cy.contains('h2', "WebGamepad").should('exist');
+    cy.contains('h2', 'WebGamepad').should('exist');
     cy.contains('h2', 'test_board').should('exist');
     cy.contains('h2', 'test_camera').should('exist');
     cy.contains('h2', 'test_navigation').should('exist');
     cy.contains('h2', 'Sensors').should('exist');
     cy.contains('h2', 'Current Operations').should('exist');
     cy.contains('h2', 'DoCommand()').should('exist');
-  })
-})
+  });
+});
+
+export {};

web/frontend/cypress/support/commands.ts

@@ -35,3 +35,5 @@
 //     }
 //   }
 // }
+
+export {};