[#1904] Add ESLint support for TypeScript imports (#1905)

ESLint is currently not configured to properly support TypeScript
imports. This results in an error when importing local TypeScript files
with the file extension omitted, which is the default way to import
TypeScript files.

Let's configure ESLint to support TypeScript imports and enforce the
omission of file extensions for .ts and .js files. This will allow us to
pass the lint check while using the default import method, and enforce
consistency throughout the codebase.

frontend/.eslintrc.json

@@ -5,7 +5,8 @@
   "extends": [
     "airbnb-base",
     "plugin:vue/recommended",
-    "@vue/typescript"
+    "@vue/typescript",
+    "plugin:import/typescript"
   ],
   "rules": {
     "vue/component-definition-name-casing": [
@@ -42,7 +43,14 @@
     ],
     "prefer-object-spread": 0,
     "function-call-argument-newline": 0,
-    "vue/no-computed-properties-in-data": 0
+    "vue/no-computed-properties-in-data": 0,
+    "import/extensions": [
+      "error",
+      {
+        "js": "never",
+        "ts": "never"
+      }
+    ]
   },
   "parserOptions": {
     "parser": "@typescript-eslint/parser"

frontend/src/components/c-ramp.vue

@@ -34,8 +34,8 @@
 </template>
 
 <script>
-import brokenLinkDisabler from '../mixin/brokenLinkMixin.ts';
-import User from '../utils/user.ts';
+import brokenLinkDisabler from '../mixin/brokenLinkMixin';
+import User from '../utils/user';
 
 export default {
   name: 'c-ramp',

frontend/src/components/c-segment.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import Segment from '../utils/segment.ts';
+import Segment from '../utils/segment';
 
 export default {
   name: 'c-segment',

frontend/src/components/c-summary-charts.vue

@@ -184,7 +184,7 @@
 <script>
 import { mapState } from 'vuex';
 
-import brokenLinkDisabler from '../mixin/brokenLinkMixin.ts';
+import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import cRamp from './c-ramp.vue';
 
 export default {

frontend/src/utils/api.js

@@ -1,4 +1,4 @@
-import User from './user.ts';
+import User from './user';
 
 // utility functions //
 window.$ = (id) => document.getElementById(id);

frontend/src/views/c-authorship.vue

@@ -166,9 +166,9 @@
 <script>
 import { mapState } from 'vuex';
 import minimatch from 'minimatch';
-import brokenLinkDisabler from '../mixin/brokenLinkMixin.ts';
+import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import cSegmentCollection from '../components/c-segment-collection.vue';
-import Segment from '../utils/segment.ts';
+import Segment from '../utils/segment';
 
 const getFontColor = window.getFontColor;
 

frontend/src/views/c-zoom.vue

@@ -134,9 +134,9 @@
 <script>
 import { mapState } from 'vuex';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import brokenLinkDisabler from '../mixin/brokenLinkMixin.ts';
+import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import cRamp from '../components/c-ramp.vue';
-import User from '../utils/user.ts';
+import User from '../utils/user';
 
 const getFontColor = window.getFontColor;