Add ESLint for JavaScript and Vue linting

- Add ESLint 9.x with flat config format
- Add eslint-plugin-vue for Vue 3 component linting
- Add lint and lint:fix npm scripts
- Rename webpack.config.js to webpack.config.cjs for ES modules compatibility
- Fix minor linting issues in existing code:
  - Use v-show instead of v-if with v-for in tabs.vue
  - Prefix unused catch variable with underscore

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) {
     return null;
   }
-  
+
   const body = parts[1].trim();
   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) {
     try {
       JSON.parse(body);
       return body;
-    } catch (e) {
+    } catch (_e) {
       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()) {
         traverse(fullPath);
       } 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) {
       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}`));

eslint.config.js

@@ -0,0 +1,39 @@
+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: {
+      'no-unused-vars': ['error', { argsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' }],
+      'vue/multi-word-component-names': 'off',
+      'vue/max-attributes-per-line': 'off',
+      'vue/html-self-closing': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+      'vue/v-bind-style': 'off',
+      'vue/attributes-order': 'off',
+      'vue/no-v-html': 'off',
+    },
+  },
+  {
+    files: ['webpack.config.cjs', '.github/**/*.js'],
+    languageOptions: {
+      sourceType: 'commonjs',
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+];

package.json

@@ -2,18 +2,25 @@
   "name": "dnsimple-developer",
   "version": "0.0.1",
   "private": true,
+  "type": "module",
   "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

@@ -4,7 +4,7 @@
       {{ 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-for="(tab, index) in tabs" :key="`tab${index}`" v-show="currentTab === tab">
         <div v-html="contents[index]"></div>
       </div>
     </div>