Quasar App (Vite) 代码检查与格式化完整指南Oxlint Oxfmt 与 ESLint Prettier 双方案实战【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址: https://gitcode.com/gh_mirrors/qu/quasarQuasar 应用脚手架quasar/app-vite在创建项目时即可选择内置 ESLint可搭配 Prettier 格式化器同时新一代基于 Rust 的 Oxc 生态工具Oxlint 与 Oxfmt也已作为官方推荐的极速方案被写入脚手架模板。本指南基于quasar/app-vite仓库的官方文档、脚手架模板与quasar/app-vite/eslint导出实现完整讲解两套方案从依赖安装、配置文件编写、VSCode 集成到 lint 规则定制的全部细节读完即可为你的 Quasar 项目落地一套可复制、可运行的代码质量工作流。Oxlint OxfmtRust 极速方案的完整落地Oxlint 与 TS 版oxlint.config.ts即与该章节给出的配置一一对应。依赖安装JS 与 TS 项目差异JS 项目只需安装两个包# PNPM pnpm add -D oxlint oxfmt # Yarn yarn add -D oxlint oxfmt # NPM npm install -D oxlint oxfmt # Bun bun add -D oxlint oxfmtTypeScript 项目需要额外补充类型检查与类型感知规则所需的能力共五个包# PNPM pnpm add -D oxlint oxfmt oxlint-tsgolint typescript vue-tsc # Yarn yarn add -D oxlint oxfmt oxlint-tsgolint typescript vue-tsc # NPM npm install -D oxlint oxfmt oxlint-tsgolint typescript vue-tsc # Bun bun add -D oxlint oxfmt oxlint-tsgolint typescript vue-tsc其中oxlint-tsgolint用于在 lint 时接入 TypeScript 语义类型感知规则vue-tsc负责 Vue 单文件组件的类型检查见下文typecheck脚本typescript是前两者的基础依赖。package.json 脚本设计scripts: { lint: oxfmt oxlint --fix, lint:check: oxfmt --check oxlint, typecheck: vue-tsc --noEmit }lint先由oxfmt直接重写文件完成格式化再由oxlint --fix执行自动修复一次命令完成“格式化 修复 检查”全流程lint:check只做校验不做修改oxfmt --check会以非零退出码报告存在格式差异的文件适合接入 CItypecheckvue-tsc --noEmit对.vue与.ts做类型检查仅 TypeScript 项目需要。配置文件JS 用 JSONTS 用 defineConfigJS 项目创建/.oxlintrc.json{ $schema: ./node_modules/oxlint/configuration_schema.json, ignorePatterns: [ **/node_modules/, dist/, quasar.config.*.temporary.compiled*, .quasar/, src-cordova/, src-capacitor/ ], options: { maxWarnings: 10 }, plugins: [vue, import, eslint, promise, unicorn], categories: { correctness: error // style: error, // pedantic: warn, // suspicious: error, // perf: error, // restriction: error }, rules: {}, env: { builtin: true } }TS 项目创建/oxlint.config.ts使用defineConfig获得类型提示并在options中额外开启类型感知能力import { defineConfig } from oxlint export default defineConfig({ $schema: ./node_modules/oxlint/configuration_schema.json, ignorePatterns: [ **/node_modules/, dist/, quasar.config.*.temporary.compiled*, .quasar/, src-cordova/, src-capacitor/ ], options: { typeAware: true, typeCheck: true, maxWarnings: 10 }, plugins: [typescript, vue, import, eslint, promise, unicorn], categories: { correctness: error }, rules: {}, env: { builtin: true } })几点值得展开的配置含义ignorePatterns五个忽略项与 Quasar 项目结构强绑定——dist/是构建产物、.quasar/是 Quasar 运行时临时文件、quasar.config.*.temporary.compiled*是配置文件编译中间产物、src-cordova/与src-capacitor/是移动端原生工程目录。注意模板里的 TS 版还额外忽略了src/router/typed-router.d.ts路由类型自动生成文件见 TS 模板options.maxWarnings允许最多 10 个 warning超过则命令以失败退出给团队留出渐进治理的缓冲空间options.typeAware / typeCheckTS 专属开启后 oxlint 借助oxlint-tsgolint提供基于类型信息的规则如no-unnecessary-type-assertion一类代价是需要读取 tsconfigcategoriesoxlint 把规则按类别correctness / suspicious / style / pedantic / perf / restriction组织可整体开关。默认仅将correctness提升为 error其余按需取消注释启用示例中pedantic: warn适合想进一步收紧代码风格的团队env.builtin内置全局变量console、window等直接可用避免误报未定义。oxfmt 格式化配置oxfmt 的配置风格与 Prettier 高度相似便于老项目平滑迁移。JS 项目创建/.oxfmtrc.json{ $schema: ./node_modules/oxfmt/configuration_schema.json, ignorePatterns: [ **/node_modules/, dist/, quasar.config.*.temporary.compiled*, .quasar/, src-cordova/, src-capacitor/ ], printWidth: 80, arrowParens: avoid, bracketSpacing: true, bracketSameLine: false, htmlWhitespaceSensitivity: strict, semi: false, singleQuote: true, quoteProps: as-needed, trailingComma: none, useTabs: false, vueIndentScriptAndStyle: false }TS 项目创建/oxfmt.config.ts默认风格略有差异分号、引号风格与 JS 版相反体现两套模板的默认取向import { defineConfig } from oxfmt export default defineConfig({ $schema: ./node_modules/oxfmt/configuration_schema.json, ignorePatterns: [ **/node_modules/, dist/, quasar.config.*.temporary.compiled*, .quasar/, src-cordova/, src-capacitor/ ], printWidth: 80, arrowParens: avoid, bracketSpacing: true, bracketSameLine: false, htmlWhitespaceSensitivity: strict, semi: true, singleQuote: false, quoteProps: as-needed, trailingComma: none, useTabs: false, vueIndentScriptAndStyle: false })这些选项对应关系printWidth换行宽度80 是社区主流取值arrowParens: avoid单参数箭头函数省略括号semi是否加分号singleQuote是否用单引号trailingComma: none不添加尾逗号vueIndentScriptAndStyle控制script/style块内容是否随标签缩进。可按团队规范自行调整。VSCode 集成安装 Oxc 扩展并接管保存动作创建/.vscode/settings.json让编辑器在保存时自动格式化并执行 oxlint 自动修复。JS 项目{ editor.codeActionsOnSave: { source.fixAll.oxc: always }, oxc.fmt.configPath: .oxfmtrc.json, editor.defaultFormatter: oxc.oxc-vscode, editor.formatOnSave: true }TS 项目只需把oxc.fmt.configPath指向oxfmt.config.ts{ editor.codeActionsOnSave: { source.fixAll.oxc: always }, oxc.fmt.configPath: oxfmt.config.ts, editor.defaultFormatter: oxc.oxc-vscode, editor.formatOnSave: true }三个关键点editor.defaultFormatter设为oxc.oxc-vscode确保格式化器是 Oxc 而非 Prettier避免两套格式化规则互相覆盖source.fixAll.oxc对应 Oxc 扩展暴露的 code action保存时触发 oxlint 的自动修复等价于oxlint --fixoxc.fmt.configPath显式指向项目格式化配置文件防止扩展使用默认风格。同时在/.vscode/extensions.json中推荐团队成员安装扩展{ recommendations: [oxc.oxc-vscode] }这与 Quasar 脚手架模板的 extensions.json 结构一致脚手架在 oxlint 预设下同样推荐oxc.oxc-vscode在 eslint 预设下则推荐dbaeumer.vscode-eslint与esbenp.prettier-vscode。ESLint Prettier经典方案深度配置拥有一个代码检查器如 ESLint v9非常有必要它保证代码可读性还能在代码真正运行前就捕获一部分错误。当你用create-quasar脚手架创建项目时CLI 会询问是否启用 ESLint以及是否搭配 Prettier 作为格式化器选中的结果会直接写入模板见 JS ESLint 模板 与 TS ESLint 模板。JS 项目依赖、构建配置与规则文件第一步安装依赖# PNPM pnpm add -D eslint/js eslint10 eslint-plugin-vue vue-eslint-parser globals vite-plugin-checker # Yarn yarn add -D eslint/js eslint10 eslint-plugin-vue vue-eslint-parser globals vite-plugin-checker # NPM npm install -D eslint/js eslint10 eslint-plugin-vue vue-eslint-parser globals vite-plugin-checker # Bun bun add -D eslint/js eslint10 eslint-plugin-vue vue-eslint-parser globals vite-plugin-checker若同时需要 Prettier 格式化再安装pnpm add -D prettier3 vue/eslint-config-prettier各依赖职责eslint/js提供 JS 推荐规则集js.configs.recommendedeslint10是 flat config 时代的 ESLint 主程序eslint-plugin-vue提供 Vue 单文件组件规则flat/essential等预设vue-eslint-parser负责解析.vue的script块globals提供浏览器/Node/Service Worker 等环境的全局变量声明vite-plugin-checker把类型检查与 lint 结果以 overlay 形式注入 Vite 开发服务器vue/eslint-config-prettier的skip-formatting子路径用于关闭与 Prettier 冲突的格式类规则。第二步在quasar.config.js中接入 vite-plugin-checkerbuild: { vitePlugins: [ [ vite-plugin-checker, { eslint: { lintCommand: eslint -c ./eslint.config.js ./src*/**/*.{js,mjs,cjs,vue}, useFlatConfig: true } }, { server: false } ] ] }要点lintCommand指定检查的 glob覆盖src、src-pwa、src-ssr、src-ssg、src-bex等 Quasar 约定目录下的 JS/MJS/CJS/Vue 文件useFlatConfig: true声明使用 ESLint 9 的 flat config{ server: false }表示仅在构建阶段运行避免拖慢 dev server 启动该插件机制同quasar/app-vite的 vitePlugins 规范属于 Quasar 官方构建管线的一部分。第三步编写/eslint.config.jsimport js from eslint/js import globals from globals import pluginVue from eslint-plugin-vue import pluginQuasar from quasar/app-vite/eslint // the following is optional, if you want prettier too: import prettierSkipFormatting from vue/eslint-config-prettier/skip-formatting export default [ { /** * Ignore the following files. * Please note that pluginQuasar.configs.recommended() already ignores * the node_modules folder for you (and all other Quasar project * relevant folders and files). * * ESLint requires ignores key to be the only one in this object */ // ignores: [] }, ...pluginQuasar.configs.recommended(), js.configs.recommended, /** * pluginVue.configs.base * - Settings and rules to enable correct ESLint parsing. * pluginVue.configs[flat/essential] * - base, plus rules to prevent errors or unintended behavior. * pluginVue.configs[flat/strongly-recommended] * - Above, plus rules to considerably improve code readability and/or dev experience. * pluginVue.configs[flat/recommended] * - Above, plus rules to enforce subjective community defaults to ensure consistency. */ ...pluginVue.configs[flat/essential], { languageOptions: { ecmaVersion: latest, sourceType: module, globals: { ...globals.browser, ...globals.node, // SSR, SSG, Electron, config files ga: readonly, // Google Analytics cordova: readonly, Capacitor: readonly, chrome: readonly, // BEX related browser: readonly // BEX related } }, // add your custom rules here rules: { prefer-promise-reject-errors: off, // slots use the # shorthand everywhere, as in the Quasar docs vue/v-slot-style: [warn, shorthand], // allow debugger during development only no-debugger: process.env.NODE_ENV production ? error : off } }, { files: [src-pwa/sw/**/*.js], languageOptions: { globals: { ...globals.serviceworker } } }, prettierSkipFormatting // optional, if you want prettier ]这份配置中值得重点解释的部分pluginQuasar.configs.recommended()这是quasar/app-vite包导出的官方 ESLint 共享配置源码见 eslint.jsCJS 版见 eslint.cjs通过package.json的./eslint导出子路径暴露。其实现非常轻量——recommended()返回[{ ignores: ignoreList }]把dist/*、src-capacitor/*、src-cordova/*、.quasar/*、quasar.config.*.temporary.compiled*全部加入 ignores这正是后文“自动忽略清单”的代码出处因此你不必手动忽略这些目录全局变量合并了globals.browser与globals.node因为 Quasar 单代码库要同时面向 SPA浏览器、SSR/SSGNode、Electron主进程/预加载、BEXchrome/browser与移动端cordova/Capacitor运行未声明这些全局会导致误报no-undef内置规则prefer-promise-reject-errors: off是 Quasar 官方推荐关闭项vue/v-slot-style: [warn, shorthand]与 Quasar 文档一致强制#简写插槽no-debugger在生产构建中升级为 error、开发环境放行Service Worker 专项为src-pwa/sw/**/*.js单独注入globals.serviceworker否则 sw.js 里的self、caches等会报未定义。TS 项目类型感知规则与 vue-tsc 检查第一步安装依赖pnpm add -D vue-tsc vue/eslint-config-typescript eslint/js eslint10 eslint-plugin-vue globals vite-plugin-checkerPrettier 附加依赖同 JS 项目pnpm add -D prettier3 vue/eslint-config-prettier第二步quasar.config.js设置与 JS 版基本一致仅两处差异——启用vueTsc: true让 vite-plugin-checker 同时跑 Vue 类型检查且 lintCommand 的 glob 扩展为包含.tsbuild: { vitePlugins: [ [ vite-plugin-checker, { vueTsc: true, eslint: { lintCommand: eslint -c ./eslint.config.js ./src*/**/*.{ts,js,mjs,cjs,vue}, useFlatConfig: true } }, { server: false } ] ] }第三步/eslint.config.js用defineConfigWithVueTs包裹并叠加vueTsConfigs.recommendedTypeChecked启用基于类型信息的规则import js from eslint/js import globals from globals import pluginVue from eslint-plugin-vue import pluginQuasar from quasar/app-vite/eslint import { defineConfigWithVueTs, vueTsConfigs } from vue/eslint-config-typescript // the following is optional, if you want prettier too: import prettierSkipFormatting from vue/eslint-config-prettier/skip-formatting export default defineConfigWithVueTs( { // ignores: [] }, pluginQuasar.configs.recommended(), js.configs.recommended, pluginVue.configs[flat/essential], { files: [**/*.ts, **/*.vue], rules: { typescript-eslint/consistent-type-imports: [ error, { prefer: type-imports } ] } }, vueTsConfigs.recommendedTypeChecked, { languageOptions: { ecmaVersion: latest, sourceType: module, globals: { ...globals.browser, ...globals.node, // SSR, SSG, Electron, config files process: readonly, // process.env.* ga: readonly, // Google Analytics cordova: readonly, Capacitor: readonly, chrome: readonly, // BEX related browser: readonly // BEX related } }, rules: { prefer-promise-reject-errors: off, vue/v-slot-style: [warn, shorthand], no-debugger: process.env.NODE_ENV production ? error : off } }, { files: [src-pwa/sw/**/*.ts], languageOptions: { globals: { ...globals.serviceworker } } }, prettierSkipFormatting // optional, if you want prettier )TS 版与 JS 版的关键差异defineConfigWithVueTsvueTsConfigs.recommendedTypeChecked前者提供 Vue 单文件组件与 TS 类型系统协同的配置工厂后者开启recommended-type-checked级别规则如no-floating-promises、no-unsafe-argument等这些规则需要 parser 服务与项目类型信息也因此必须在全局变量中加入process: readonly否则process.env.NODE_ENV在使用类型检查规则时报未定义consistent-type-imports强制import type { Foo }风格的类型导入配合verbatimModuleSyntax类编译设置可彻底消除类型导入的运行时残留Service Worker 段按src-pwa/sw/**/*.ts匹配 TS 文件。性能优化务必忽略无关文件[!WARNING] 请务必忽略未使用的文件以提升性能。若对未使用的文件/文件夹执行 lint开发体验会显著下降。自定义忽略只需编辑/eslint.config.js中第一个对象的ignores数组export default [ { /** * Ignore the following files. * Please note that pluginQuasar.configs.recommended() already ignores * the node_modules folder for you (and all other Quasar project * relevant folders and files). * * ESLint requires ignores key to be the only one in this object */ ignores: [] // ---- here! },需要注意的是pluginQuasar.configs.recommended()会自动向 ESLint 的ignores注入以下清单无需重复添加// not an exhaustive list auto-added to ignores ;[ dist/*, src-capacitor/*, src-cordova/*, .quasar/*, quasar.config.*.temporary.compiled* ]这与我们前面读到的 eslint.js 中ignoreList常量完全一致dist构建产物、src-capacitor/src-cordova原生工程、.quasar运行时临时目录、quasar.config.*.temporary.compiled*配置编译中间文件都不应进入 lint 范围。另注意 flat config 的一个硬性约束含ignores键的配置对象中不能出现其他键注释中已强调“ESLint requires ignores key to be the only one in this object”因此忽略清单必须独占一个数组元素。自定义 lint 规则规则可以被删除、修改或新增。注意两点部分规则是标准 ESLint 规则例如brace-style部分规则来自 eslint-plugin-vue例如vue/max-attributes-per-line。调整规则的入口有两个标准规则查阅 ESLint 官方规则文档eslint.org/docs/rulesVue 专属规则查阅 eslint-plugin-vue 规则文档eslint.vuejs.org/rules然后将规则写入rules: {}块即可如本指南前面示例中的vue/v-slot-style、no-debugger与typescript-eslint/consistent-type-imports。两套方案如何选择结合文档与仓库实际模板可以给出如下参考维度Oxlint OxfmtESLint Prettier性能Rust 实现检查与格式化速度极快JS 生态传统方案功能成熟、生态最大配置形式JS 项目.oxlintrc.json/.oxfmtrc.jsonTS 项目oxlint.config.ts/oxfmt.config.ts统一/eslint.config.jsflat configTS 类型检查typeAwaretypeCheckvue-tscvueTsConfigs.recommendedTypeCheckedvue-tsc/vite-plugin-checkerQuasar 集成create-quasar提供 oxlint 预设模板脚手架默认询问并写入 ESLint 模板含官方pluginQuasar.configs.recommended()共享配置编辑器集成VSCode Oxc 扩展oxc.oxc-vscodesource.fixAll.oxcdbaeumer.vscode-eslintesbenp.prettier-vscode构建期检查需自行接入 Vite 插件官方文档给出vite-plugin-checker完整接入示例quasar/app-vite当前仓库版本 3.8.4同时支持两条路径脚手架 ESLint 模板 与 oxlint 模板 并存create-quasar创建项目时按你的选择生成对应文件官方 ESLint 共享忽略配置则由 app-vite/exports/eslint/ 统一维护保证所有 Quasar 项目忽略清单行为一致。实践建议追求极速反馈、新项目从零开始优先选 Oxlint Oxfmt配合 VSCode Oxc 扩展体验最佳需要最丰富的规则生态、团队已有大量 ESLint 规则沉淀或依赖第三方 ESLint 插件如安全、可访问性类则选 ESLint Prettier并按上文接入vite-plugin-checker获得构建期检查。无论哪套方案都请保持quasar.config.*.temporary.compiled*、.quasar/、dist/等 Quasar 专属目录始终处于忽略清单中这是保证检查速度与结果准确的前提。【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址: https://gitcode.com/gh_mirrors/qu/quasar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考