ci: make Prettier the only formatter and check formatting in CI

.github/workflows/main.yml

@@ -48,6 +48,9 @@ jobs:
 
       - run: pnpm lint --max-warnings 0
 
+      - name: Check formatting
+        run: pnpm format:check
+
       - name: Prepare module types
         run: pnpm dev:prepare
 

.prettierignore

@@ -19,4 +19,7 @@ coverage
 .vscode
 
 # git
-.git 
+.git 
+
+# pnpm writes the lockfile in its own format
+pnpm-lock.yaml

README.md

@@ -251,6 +251,7 @@ pnpm install --frozen-lockfile
 pnpm dev:prepare
 pnpm playwright-core install chromium
 pnpm lint
+pnpm format:check
 pnpm test:types
 pnpm test
 pnpm test:package

docs/CONTRIBUTING.md

@@ -16,4 +16,4 @@ Contact any of our current maintainers, or send us an email at [community@stackb
 
 Use the pnpm version pinned in `package.json`. With Corepack installed, run `corepack enable`, then `pnpm install --frozen-lockfile` and `pnpm dev:prepare` from the repository root. The module and playground share `pnpm-lock.yaml`; install dependencies from the root and use `pnpm --dir playground build` to build the playground directly.
 
-Before submitting a change, run `pnpm lint`, `pnpm test:types`, `pnpm test`, and `pnpm test:package`. For runtime changes, also run `pnpm test:compatibility` and `NUXT_VERSION=3 pnpm test:compatibility` to test independent static-site consumers.
+Before submitting a change, run `pnpm lint`, `pnpm format:check`, `pnpm test:types`, `pnpm test`, and `pnpm test:package`. Prettier owns formatting and ESLint checks everything else; `pnpm format` applies the formatting. For runtime changes, also run `pnpm test:compatibility` and `NUXT_VERSION=3 pnpm test:compatibility` to test independent static-site consumers.

eslint.config.mjs

@@ -1,38 +1,20 @@
 // @ts-check
 import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+import prettier from 'eslint-config-prettier/flat'
 
 // Run `npx @eslint/config-inspector` to inspect the resolved config interactively
 export default createConfigForNuxt({
   features: {
     // Rules for module authors
     tooling: true,
-    // Rules for formatting
-    stylistic: true,
+    // Prettier formats the code, so the key order rule that came with stylistic is enabled on its own
+    nuxt: { sortConfigKeys: true },
   },
   dirs: {
     src: ['./playground'],
   },
-}).append({
-  rules: {
-    '@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
-    '@stylistic/semi': ['error', 'never'],
-    '@stylistic/comma-dangle': ['error', 'always-multiline'],
-    '@stylistic/arrow-parens': ['error', 'always'],
-    '@stylistic/operator-linebreak': 'off',
-    '@stylistic/brace-style': 'off',
-    '@stylistic/indent-binary-ops': 'off',
-    '@stylistic/member-delimiter-style': [
-      'error',
-      {
-        multiline: {
-          delimiter: 'none',
-          requireLast: false,
-        },
-        singleline: {
-          delimiter: 'comma',
-          requireLast: false,
-        },
-      },
-    ],
-  },
+}).append(prettier, {
+  // eslint-config-prettier turns this off, but without semicolons it is the rule that catches
+  // a new line silently continuing the previous statement
+  rules: { 'no-unexpected-multiline': 'error' },
 })

package.json

@@ -47,8 +47,8 @@
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release:prepare": "pnpm run prepack && changelogen --release --no-tag --no-push --no-github",
     "lint": "eslint .",
-    "lint:prettier": "eslint --config .eslintprettier.config.js .",
     "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "lint:fix": "eslint . --fix && prettier --write .",
     "test": "vitest run",
     "test:watch": "vitest watch",
@@ -71,7 +71,6 @@
     "changelogen": "^0.6.1",
     "eslint": "^10.7.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.4.0",
     "hookable": "^6.1.1",
     "nuxt": "^4.2.1",
     "playwright": "1.63.0",

playground/app.vue

@@ -14,28 +14,15 @@
       </p>
 
       <div class="buttons">
-        <button @click="utm.enableTracking">
-          Enable Tracking
-        </button>
-        <button @click="utm.disableTracking">
-          Disable Tracking
-        </button>
-        <button
-          class="danger"
-          @click="utm.clearData"
-        >
-          Clear All Data
-        </button>
+        <button @click="utm.enableTracking">Enable Tracking</button>
+        <button @click="utm.disableTracking">Disable Tracking</button>
+        <button class="danger" @click="utm.clearData">Clear All Data</button>
       </div>
 
       <h2>Custom Hook Testing</h2>
       <div class="buttons">
-        <button @click="visitWithPageCategory('pricing')">
-          Track pageCategory: pricing
-        </button>
-        <button @click="visitWithPageCategory('features')">
-          Track pageCategory: features
-        </button>
+        <button @click="visitWithPageCategory('pricing')">Track pageCategory: pricing</button>
+        <button @click="visitWithPageCategory('features')">Track pageCategory: features</button>
       </div>
 
       <div class="info">

playground/plugins/page-category.client.ts

@@ -5,7 +5,9 @@ export default defineNuxtPlugin(() => {
   const utm = useNuxtUTM()
 
   utm.onBeforePersist((data) => {
-    const pageCategory = new URL(data.additionalInfo.landingPageUrl).searchParams.get('page_category')
+    const pageCategory = new URL(data.additionalInfo.landingPageUrl).searchParams.get(
+      'page_category',
+    )
     if (!pageCategory) return
 
     data.customParams = {

scripts/test-compatibility.mjs

@@ -24,8 +24,8 @@ export async function testCompatibility({ root, directory, tarball }) {
       private: true,
       type: 'module',
       packageManager,
-      dependencies: { 'nuxt': version, 'nuxt-utm': `file:${tarball}`, 'vue': '^3.5.0' },
-      devDependencies: { 'typescript': '~5.9.3', 'vue-tsc': '^3.3.8' },
+      dependencies: { nuxt: version, 'nuxt-utm': `file:${tarball}`, vue: '^3.5.0' },
+      devDependencies: { typescript: '~5.9.3', 'vue-tsc': '^3.3.8' },
     }),
   )
   writeFileSync(
@@ -39,9 +39,12 @@ export async function testCompatibility({ root, directory, tarball }) {
       timeout: 300_000,
       env: { ...process.env, NUXT_TELEMETRY_DISABLED: '1' },
     })
-  const allowBuilds = JSON.parse(execFileSync(pnpmCommand, [...pnpmArguments, 'config', 'get', 'allowBuilds', '--json'], {
-    cwd: root, encoding: 'utf8',
-  }))
+  const allowBuilds = JSON.parse(
+    execFileSync(pnpmCommand, [...pnpmArguments, 'config', 'get', 'allowBuilds', '--json'], {
+      cwd: root,
+      encoding: 'utf8',
+    }),
+  )
   writeFileSync(join(fixture, 'pnpm-workspace.yaml'), JSON.stringify({ allowBuilds }))
   run(['install', '--no-frozen-lockfile'])
   const installed = JSON.parse(
@@ -108,7 +111,13 @@ export async function testCompatibility({ root, directory, tarball }) {
     await page.getByRole('button', { name: 'Send', exact: true }).click()
     await page.getByRole('status').filter({ hasText: 'Please try again' }).waitFor()
     assert.equal(submissions.length, 1)
-    assert.equal(await page.getByTestId('history-count').textContent().then((text) => text.trim()), '3')
+    assert.equal(
+      await page
+        .getByTestId('history-count')
+        .textContent()
+        .then((text) => text.trim()),
+      '3',
+    )
     await page.getByRole('button', { name: 'Send', exact: true }).click()
     await page.getByRole('status').filter({ hasText: 'Sent' }).waitFor()
     assert.equal(submissions.length, 2)

test/integration-runtime-control.test.ts

@@ -73,7 +73,9 @@ describe('Runtime tracking control', async () => {
 
     let rawData = await page.evaluate(() => window.localStorage.getItem('nuxt-utm-data'))
     let entries = JSON.parse(rawData ?? '[]')
-    const hasDisabled = entries.some((e: DataObject) => e.utmParams?.utm_source === 'while_disabled')
+    const hasDisabled = entries.some(
+      (e: DataObject) => e.utmParams?.utm_source === 'while_disabled',
+    )
     expect(hasDisabled).toBe(false)
 
     // Enable tracking
@@ -119,7 +121,9 @@ describe('Runtime tracking control', async () => {
     expect(rawData).toBeNull()
 
     // Check session ID is also cleared
-    const sessionId = await page.evaluate(() => window.sessionStorage.getItem('nuxt-utm-session-id'))
+    const sessionId = await page.evaluate(() =>
+      window.sessionStorage.getItem('nuxt-utm-session-id'),
+    )
     expect(sessionId).toBeNull()
 
     await page.close()