@archpublicwebsite/eslint-config 1.0.5 → 1.0.6

package/README.md

@@ -41,8 +41,38 @@ On install, this package automatically sets up in your project root:
 - `.hooks/post-commit`
 - `eslint.config.mjs` (if not present)
 - `.prettierrc` plugin entry for `prettier-plugin-tailwindcss`
+- `.vscode/settings.json` – ESLint flat-config settings so VS Code reads the config
+- `.vscode/extensions.json` – recommended extensions (ESLint, Prettier, Volar)
 - `git config core.hooksPath .hooks` (when in a git repo)
 
+### VS Code integration
+
+On install, `.vscode/settings.json` is created or merged with these settings:
+
+```json
+{
+  "eslint.useFlatConfig": true,
+  "eslint.validate": [
+    "javascript", "javascriptreact",
+    "typescript", "typescriptreact",
+    "vue", "json", "jsonc", "markdown"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "editor.formatOnSave": false
+}
+```
+
+If `.vscode/settings.json` already exists, your existing settings are preserved — only the ESLint-related keys are added or updated.
+
+You can also re-run it manually:
+
+```bash
+node node_modules/@archpublicwebsite/eslint-config/tools/setup/install.mjs
+```
+
 ## What this package provides
 
 - `eslint.config.mjs` builder via `createArchipelagoConfig`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archpublicwebsite/eslint-config",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "author": "Archipelago International",
   "description": "Reusable ESLint flat config and git-hook toolkit for Archipelago projects",
   "type": "module",
@@ -28,7 +28,8 @@
     "eslint-config",
     "flat-config",
     "vue",
-    "git-hooks"
+    "git-hooks",
+    "vscode"
   ],
   "private": false,
   "engines": {

package/tools/setup/install.mjs

@@ -1,6 +1,7 @@
 import { execSync } from 'node:child_process'
 import { chmodSync, existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
+import { ensureVscodeSettings } from './vscode.mjs'
 
 function getProjectRoot() {
   const root = process.env.INIT_CWD || process.cwd()
@@ -109,6 +110,36 @@ function ensureHooksPath(projectRoot) {
   }
 }
 
+function ensureVscodeExtensions(projectRoot) {
+  const vscodeDir = join(projectRoot, '.vscode')
+  const extPath = join(vscodeDir, 'extensions.json')
+
+  if (!existsSync(vscodeDir))
+    mkdirSync(vscodeDir, { recursive: true })
+
+  const recommended = [
+    'dbaeumer.vscode-eslint',
+    'esbenp.prettier-vscode',
+    'vue.volar',
+  ]
+
+  let current = { recommendations: [] }
+  if (existsSync(extPath)) {
+    try {
+      current = JSON.parse(readFileSync(extPath, 'utf8'))
+      if (!Array.isArray(current.recommendations))
+        current.recommendations = []
+    }
+    catch {
+      current = { recommendations: [] }
+    }
+  }
+
+  const merged = [...new Set([...current.recommendations, ...recommended])]
+  current.recommendations = merged
+  writeFileSync(extPath, `${JSON.stringify(current, null, 2)}\n`, 'utf8')
+}
+
 function main() {
   const projectRoot = getProjectRoot()
   if (!projectRoot)
@@ -118,6 +149,8 @@ function main() {
   ensureHooksPath(projectRoot)
   ensureEslintConfig(projectRoot)
   ensurePrettierConfig(projectRoot)
+  ensureVscodeSettings(projectRoot)
+  ensureVscodeExtensions(projectRoot)
 }
 
 main()

package/tools/setup/vscode.mjs

@@ -0,0 +1,100 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+/**
+ * VS Code settings required for ESLint flat config to work properly.
+ * These tell the ESLint extension to use flat config mode and validate
+ * the correct file types.
+ */
+const VSCODE_ESLINT_SETTINGS = {
+  // Use flat config mode (required for eslint.config.mjs)
+  'eslint.useFlatConfig': true,
+
+  // Enable ESLint for these languages
+  'eslint.validate': [
+    'javascript',
+    'javascriptreact',
+    'typescript',
+    'typescriptreact',
+    'vue',
+    'json',
+    'jsonc',
+    'markdown',
+  ],
+
+  // Auto-fix on save via ESLint
+  'editor.codeActionsOnSave': {
+    'source.fixAll.eslint': 'explicit',
+    'source.organizeImports': 'never',
+  },
+
+  // Let ESLint handle formatting instead of the built-in formatter
+  'editor.formatOnSave': false,
+
+  // Disable the default VS Code JSON formatter for files ESLint handles
+  '[json]': {
+    'editor.defaultFormatter': 'dbaeumer.vscode-eslint',
+  },
+  '[jsonc]': {
+    'editor.defaultFormatter': 'dbaeumer.vscode-eslint',
+  },
+}
+
+/**
+ * Deep-merge source into target. Arrays are replaced, not concatenated.
+ * Only plain objects are recursed into.
+ */
+function deepMerge(target, source) {
+  const result = { ...target }
+  for (const key of Object.keys(source)) {
+    const srcVal = source[key]
+    const tgtVal = result[key]
+    if (
+      srcVal !== null
+      && typeof srcVal === 'object'
+      && !Array.isArray(srcVal)
+      && tgtVal !== null
+      && typeof tgtVal === 'object'
+      && !Array.isArray(tgtVal)
+    ) {
+      result[key] = deepMerge(tgtVal, srcVal)
+    }
+    else {
+      result[key] = srcVal
+    }
+  }
+  return result
+}
+
+/**
+ * Ensure `.vscode/settings.json` contains the ESLint flat-config settings.
+ * - If the file doesn't exist, create it with just the ESLint settings.
+ * - If it exists, deep-merge the ESLint settings without removing existing user settings.
+ *
+ * @param {string} projectRoot - Absolute path to the consuming project root.
+ */
+export function ensureVscodeSettings(projectRoot) {
+  const vscodeDir = join(projectRoot, '.vscode')
+  const settingsPath = join(vscodeDir, 'settings.json')
+
+  if (!existsSync(vscodeDir)) {
+    mkdirSync(vscodeDir, { recursive: true })
+  }
+
+  let current = {}
+  if (existsSync(settingsPath)) {
+    try {
+      const raw = readFileSync(settingsPath, 'utf8')
+      current = JSON.parse(raw)
+    }
+    catch {
+      // File exists but is not valid JSON – back it up and start fresh
+      const backupPath = `${settingsPath}.backup`
+      writeFileSync(backupPath, readFileSync(settingsPath, 'utf8'), 'utf8')
+      current = {}
+    }
+  }
+
+  const merged = deepMerge(current, VSCODE_ESLINT_SETTINGS)
+  writeFileSync(settingsPath, `${JSON.stringify(merged, null, 2)}\n`, 'utf8')
+}