Skip to content

chore(vue): use Ionic lint and Prettier configs and replace Cypress with Playwright - #1917

Merged
brandyscarney merged 2 commits into
mainfrom
chore/vue-vite-tooling
Oct 27, 2026
Merged

brandyscarney merged 2 commits into
mainfrom
chore/vue-vite-tooling

Conversation

@brandyscarney

@brandyscarney brandyscarney commented Oct 23, 2026 •

Copy link
Copy Markdown
Member

What This Does

Brings the vue-vite starters in line with the Ionic tutorial app (tutorial-photo-gallery-vue), so an app created with ionic start has the same lint, formatting, and test setup the tutorials teach against.

New Behavior

Apps generated from the Vue starters now:

  • Lint with ESLint 10 flat config and @ionic/eslint-config, alongside eslint-plugin-vue and @vue/eslint-config-typescript. They format with Prettier and @ionic/prettier-config. npm run lint checks both and npm run lint:fix fixes both.
  • Run unit tests with Vitest 5 and jsdom 30.
  • Run end-to-end tests with Playwright instead of Cypress. Playwright starts the dev server itself.
  • Use the scripts lint, lint:fix, test, test:unit, test:unit:watch, and test:e2e.
  • npm run lint also type-checks the Playwright tests and playwright.config.ts, which Playwright and ESLint don't do on their own.

Changes

  • base:
    • Replaced .eslintrc.cjs and .eslintignore with eslint.config.js.
    • Added Prettier config and .prettierignore (skips android/ and ios/).
    • Added .editorconfig.
    • Recommends the ESLint, Prettier, and Vue VS Code extensions.
    • Added playwright.config.ts.
    • Added Playwright output to .gitignore.
    • Removed the Cypress config, support files, and fixtures.
    • Added tsconfig.e2e.json and a typecheck:e2e script, run from lint, plus @types/node for playwright.config.ts.
  • Dependencies:
    • Added @eslint/js, @ionic/eslint-config, @ionic/prettier-config, @playwright/test, globals, and prettier.
    • Upgraded ESLint 10, eslint-plugin-vue 10, @vue/eslint-config-typescript 14, Vitest 5, jsdom 30, and vue-tsc 3.
    • Removed cypress.
  • vite.config.ts only collects unit tests from tests/unit (*.spec.ts or *.spec.js, so the docs' "Build with JavaScript" steps keep working).
  • Templates:
    • Each tests/e2e/specs/test.cy.ts is now an equivalent tests/e2e/app.spec.ts.
    • Code is formatted by Prettier, with imports grouped and ordered.
    • Return types added to exported functions in the list template.
  • Each ionic.starter.json test script now runs lint, build, unit tests, then Playwright e2e, without concurrently.

Notes

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀

@brandyscarney
brandyscarney force-pushed the chore/vue-vite-tooling branch from e07a5a4 to 7a635e4 Compare October 27, 2026 15:25
@brandyscarney
brandyscarney force-pushed the chore/vue-vite-tooling branch from 7a635e4 to cf39b80 Compare October 27, 2026 19:27
@brandyscarney
brandyscarney enabled auto-merge (squash) October 27, 2026 19:59
@brandyscarney
brandyscarney merged commit 89300f8 into main Oct 27, 2026
30 checks passed
@brandyscarney
brandyscarney deleted the chore/vue-vite-tooling branch October 27, 2026 20:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants