Add ESLint for JavaScript and Vue linting (#920)

Author: sbastn

.github/scripts/validate-fixtures-json.js

@@ -10,35 +10,35 @@ const path = require('path');
  */
 function extractJsonFromHttpFile(filePath) {
   const content = fs.readFileSync(filePath, 'utf8');
-  
+
   // Split by double newline to separate headers from body
   const parts = content.split(/\n\s*\n/, 2);
-  
-  if (parts.length < 2) {
+
+  if (parts.length < 2)
     return null;
-  }
-  
+
+
   const body = parts[1].trim();
-  if (!body) {
+  if (!body)
     return null;
-  }
-  
+
+
   // Check if content-type indicates JSON
   const headers = parts[0];
-  const isJsonContentType = headers.includes('Content-Type: application/json') || 
+  const isJsonContentType = headers.includes('Content-Type: application/json') ||
                            headers.includes('content-type: application/json');
-  
+
   // If no explicit JSON content-type, try to parse as JSON anyway
   // (some files might have JSON without proper content-type header)
-  if (!isJsonContentType) {
+  if (!isJsonContentType)
     try {
       JSON.parse(body);
       return body;
-    } catch (e) {
+    } catch {
       return null;
     }
-  }
-  
+
+
   return body;
 }
 
@@ -49,22 +49,22 @@ function extractJsonFromHttpFile(filePath) {
  */
 function findHttpFiles(dir) {
   const files = [];
-  
+
   function traverse(currentDir) {
     const items = fs.readdirSync(currentDir);
-    
+
     for (const item of items) {
       const fullPath = path.join(currentDir, item);
       const stat = fs.statSync(fullPath);
-      
-      if (stat.isDirectory()) {
+
+      if (stat.isDirectory())
         traverse(fullPath);
-      } else if (item.endsWith('.http')) {
+       else if (item.endsWith('.http'))
         files.push(fullPath);
-      }
+
     }
   }
-  
+
   traverse(dir);
   return files;
 }
@@ -77,21 +77,21 @@ function validateJsonInFixtures(fixturesDir) {
   const errors = [];
   let filesChecked = 0;
   let jsonFilesFound = 0;
-  
+
   console.log(`🔍 Scanning for HTTP fixtures in: ${fixturesDir}`);
-  
+
   const httpFiles = findHttpFiles(fixturesDir);
-  
+
   for (const filePath of httpFiles) {
     filesChecked++;
     const jsonContent = extractJsonFromHttpFile(filePath);
-    
-    if (!jsonContent) {
+
+    if (!jsonContent)
       continue;
-    }
-    
+
+
     jsonFilesFound++;
-    
+
     try {
       JSON.parse(jsonContent);
       console.log(`✅ ${filePath}`);
@@ -101,12 +101,12 @@ function validateJsonInFixtures(fixturesDir) {
       errors.push(errorMsg);
     }
   }
-  
+
   console.log('\n📊 Summary:');
   console.log(`Files checked: ${filesChecked}`);
   console.log(`JSON files found: ${jsonFilesFound}`);
   console.log(`Validation errors: ${errors.length}`);
-  
+
   if (errors.length > 0) {
     console.log('\n❌ Errors found:');
     errors.forEach(error => console.log(`  ${error}`));

.github/workflows/ci.yml

@@ -12,6 +12,22 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  lint:
+    name: Lint JavaScript
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v6
+      - name: Install Node
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: '.tool-versions'
+          cache: yarn
+      - name: Install JS Deps
+        run: yarn install --frozen-lockfile
+      - name: Run ESLint
+        run: yarn lint
+
   lint_openapi:
     name: Lint OpenAPI Spec
     runs-on: ubuntu-latest

eslint.config.mjs

@@ -0,0 +1,35 @@
+import js from '@eslint/js';
+import pluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+
+export default [
+  {
+    ignores: ['dist/', 'output/', 'node_modules/', 'tmp/'],
+  },
+  js.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+      },
+    },
+    rules: {
+      semi: ['error', 'always'], // Enforce semicolons
+      curly: ['error', 'multi'], // Enforce curly braces only for multi-line blocks
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-html': 'off',
+    },
+  },
+  {
+    files: ['webpack.config.js', '.github/**/*.js'],
+    languageOptions: {
+      sourceType: 'commonjs',
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+];

package.json

@@ -3,17 +3,23 @@
   "version": "0.0.1",
   "private": true,
   "devDependencies": {
+    "@eslint/js": "^9.18.0",
     "@fortawesome/fontawesome-free": "^7.1.0",
     "@redocly/cli": "^2.14.4",
     "@vue/compiler-sfc": "^3.4.21",
     "concurrently": "^9.2.1",
     "copy-webpack-plugin": "^13.0.1",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "globals": "^15.14.0",
     "tachyons": "^4.12.0",
     "vue-loader": "^17.4.2",
     "webpack": "^5.104.1",
     "webpack-cli": "^6.0.1"
   },
   "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "live": "concurrently 'bundle exec nanoc live' 'bundle exec rake compile'",
     "build": "npx webpack",
     "openapi-lint": "redocly lint content/v2/openapi.yml"

src/components/tabs.vue

@@ -1,11 +1,21 @@
 <template>
   <div class="pv3">
-    <div v-for="tab in tabs" v-bind:key="'tab-top-' + tab" @click="currentTab = tab" v-bind:class="{ 'b bg-moon-gray': currentTab === tab }" class="dib pv1 ph2 bt bl br b--moon-gray pointer ttc">
+    <div
+      v-for="tab in tabs"
+      :key="'tab-top-' + tab"
+      :class="{ 'b bg-moon-gray': currentTab === tab }"
+      class="dib pv1 ph2 bt bl br b--moon-gray pointer ttc"
+      @click="currentTab = tab"
+    >
       {{ tab }}
     </div>
     <div class="tab-content ba pa3 b--moon-gray">
-      <div v-for="(tab, index) in tabs" :key="`tab${index}`" v-if="currentTab === tab">
-        <div v-html="contents[index]"></div>
+      <div
+        v-for="(tab, index) in tabs"
+        v-show="currentTab === tab"
+        :key="`tab${index}`"
+      >
+        <div v-html="contents[index]" />
       </div>
     </div>
   </div>
@@ -21,7 +31,7 @@
         tabs: [],
         contents: [],
         currentTab: ""
-      }
+      };
     },
     mounted () {
       this.tabs = Object.keys(this.$slots);
@@ -31,5 +41,5 @@
       this.contents = Object.values(this.$slots).map(content => marked(content[0].text, codeHighlightOptions));
       this.currentTab = this.tabs[0];
     },
-  }
+  };
 </script>

src/index.js

@@ -1,13 +1,13 @@
 import { createApp } from 'vue';
-import Tabs from "./components/tabs.vue"
+import Tabs from "./components/tabs.vue";
 
-createApp(Tabs).mount('.component')
+createApp(Tabs).mount('.component');
 
 function toggleColorMode (e) {
   // Switch to Light Mode
   if (e.currentTarget.classList.contains("light--hidden")) {
     document.documentElement.setAttribute("color-mode", "light");
-    localStorage.setItem("color-mode", "light")
+    localStorage.setItem("color-mode", "light");
     return;
   }
 

webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const CopyPlugin = require('copy-webpack-plugin');
-const { VueLoaderPlugin } = require('vue-loader')
+const { VueLoaderPlugin } = require('vue-loader');
 
 module.exports = {
   mode: 'production',