代码检查与格式化 | Quasar Framework

Quasar CLI with Vite - @quasar/app-vite

代码检查与格式化

Oxlint + Oxfmt

Oxlint 和 Oxfmt 是来自 Oxc（JavaScript Oxidation Compiler）生态的下一代 Rust 工具，旨在以极致的速度和开发体验取代传统的 JavaScript/TypeScript 代码检查器和格式化工具。

安装

Yarn

NPM

PNPM

Bun

$ yarn add --dev oxlint oxfmt

对于 TypeScript 项目，你需要使用 TypeScript 7 并安装额外的依赖：

{
  "devDependencies": {
    "oxlint-tsgolint": "^0.x",
    "typescript": "npm:@typescript/typescript6@^6.0.0"
  }
}

Package.json 脚本

"scripts": {
  "lint": "oxfmt && oxlint --fix",
  "lint:check": "oxfmt --check && oxlint",
}

配置文件

创建以下文件：

JS 项目: /.oxlintrc.json

Typescript 项目: /oxlint.config.ts

{
  "$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
  }
}

JS 项目: /.oxfmtrc.json

Typescript 项目: /oxfmt.config.ts

{
  "$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
}

VSCode 配置

Javascript

Typescript

{
  "editor.codeActionsOnSave": {
    "source.fixAll.oxc": "always"
  },
  "oxc.fmt.configPath": ".oxfmtrc.json",
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.formatOnSave": true
}

别忘了推荐团队成员安装相应的扩展，当然你自己也要装：

{
  "recommendations": ["oxc.oxc-vscode"]
}

ESLint + Prettier

强烈建议使用代码检查工具（如 ESLint v9+）来确保代码的可读性，同时帮助你在运行代码之前就捕获一些错误。

在创建 Quasar 项目时，脚手架会询问你是否需要 ESLint（以及 prettier 作为代码格式化工具）。

Javascript 项目

所需依赖

Yarn

NPM

PNPM

Bun

$ yarn add --dev @eslint/js eslint@9 eslint-plugin-vue vue-eslint-parser globals vite-plugin-checker

如果你还想用 prettier 作为代码格式化工具，还需要安装：

Yarn

NPM

PNPM

Bun

$ yarn add --dev prettier@3 @vue/eslint-config-prettier

quasar.config 文件配置

build: {
  vitePlugins: [
    ['vite-plugin-checker', {
      eslint: {
        lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"',
        useFlatConfig: true
      }
    }, { server: false }]
  ]
}

ESLint 配置

import js from '@eslint/js'
import globals from 'globals'
import pluginVue from 'eslint-plugin-vue'
import pluginQuasar from '@quasar/app-vite/eslint'

// 以下是可选的，如果你想使用 prettier：
import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default [
  {
    /**
     * 忽略以下文件。
     * 请注意 pluginQuasar.configs.recommended() 已经为你忽略了
     * "node_modules" 目录（以及所有其他 Quasar 项目相关的目录和文件）。
     *
     * ESLint 要求 "ignores" 键是此对象中唯一的键
     */
    // ignores: []
  },

  ...pluginQuasar.configs.recommended(),
  js.configs.recommended,

  /**
   * https://eslint.vuejs.org
   *
   * pluginVue.configs.base
   *   -> 启用正确 ESLint 解析的设置和规则。
   * pluginVue.configs['flat/essential']
   *   -> base + 防止错误或意外行为的规则。
   * pluginVue.configs["flat/strongly-recommended"]
   *   -> 以上 + 显著提升代码可读性和开发体验的规则。
   * pluginVue.configs["flat/recommended"]
   *   -> 以上 + 强制执行社区主观默认值以确保一致性的规则。
   */
  ...pluginVue.configs['flat/essential'],

  {
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',

      globals: {
        ...globals.browser,
        ...globals.node, // SSR, Electron, 配置文件
        ga: 'readonly', // Google Analytics
        cordova: 'readonly',
        Capacitor: 'readonly',
        chrome: 'readonly', // BEX 相关
        browser: 'readonly' // BEX 相关
      }
    },

    // 在这里添加你的自定义规则
    rules: {
      'prefer-promise-reject-errors': 'off',

      // 仅在生产环境禁止 debugger
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }
  },

  {
    files: ['src-pwa/custom-sw.js'],
    languageOptions: {
      globals: {
        ...globals.serviceworker
      }
    }
  },

  prettierSkipFormatting // 可选，如果你想使用 prettier
]

TypeScript 项目

依赖

Yarn

NPM

PNPM

Bun

$ yarn add --dev vue-tsc @vue/eslint-config-typescript @eslint/js eslint@9 eslint-plugin-vue globals vite-plugin-checker

如果你还想用 prettier 作为代码格式化工具，还需要安装：

Yarn

NPM

PNPM

Bun

$ yarn add --dev prettier@3 @vue/eslint-config-prettier

quasar.config 配置

build: {
  vitePlugins: [
    ['vite-plugin-checker', {
      vueTsc: true,
      eslint: {
        lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{ts,js,mjs,cjs,vue}"',
        useFlatConfig: true
      }
    }, { server: false }]
  ]
}

ESLint 配置文件

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'

// 以下是可选的，如果你想使用 prettier：
import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default defineConfigWithVueTs(
  {
    /**
     * 忽略以下文件。
     * 请注意 pluginQuasar.configs.recommended() 已经为你忽略了
     * "node_modules" 目录（以及所有其他 Quasar 项目相关的目录和文件）。
     *
     * ESLint 要求 "ignores" 键是此对象中唯一的键
     */
    // 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, Electron, 配置文件
        process: 'readonly', // process.env.*
        ga: 'readonly', // Google Analytics
        cordova: 'readonly',
        Capacitor: 'readonly',
        chrome: 'readonly', // BEX 相关
        browser: 'readonly' // BEX 相关
      }
    },

    // 在这里添加你的自定义规则
    rules: {
      'prefer-promise-reject-errors': 'off',

      // 仅在生产环境禁止 debugger
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }
  },

  {
    files: ['src-pwa/custom-sw.ts'],
    languageOptions: {
      globals: {
        ...globals.serviceworker
      }
    }
  },

  prettierSkipFormatting // 可选，如果你想使用 prettier
)

性能与忽略文件

WARNING

请务必忽略不需要检查的文件以提升性能。如果检查了无用的文件/目录，开发体验会显著下降。

你可以通过编辑 /eslint.config.js 文件来忽略文件：

export default [
  {
    /**
     * 忽略以下文件。
     * 请注意 pluginQuasar.configs.recommended() 已经为你忽略了
     * "node_modules" 目录（以及所有其他 Quasar 项目相关的目录和文件）。
     *
     * ESLint 要求 "ignores" 键是此对象中唯一的键
     */
    ignores: [] // <<<---- 在这里！
  },

注意上面几节中的 pluginQuasar.configs.recommended() 会自动将以下内容添加到你的 ESLint ignores 设置中（无需重复添加）：

// 自动添加到 "ignores" 的部分列表
;[
  'dist/*',
  'src-capacitor/*',
  'src-cordova/*',
  '.quasar/*',
  'quasar.config.*.temporary.compiled*'
]

检查规则

检查规则可以移除、修改或添加。注意以下几点：

有些规则是标准的 ESLint 规则。例如：‘brace-style’。
有些规则来自 eslint-plugin-vue。例如：‘vue/max-attributes-per-line’。

你可以通过访问 https://eslint.org/docs/rules/ 或 https://eslint.vuejs.org/rules 来添加/移除/修改规则。

发现错误？在浏览器中编辑此页

1. Introduction

2. Oxlint + Oxfmt

2.1. 安装

2.2. Package.json 脚本

2.3. 配置文件

2.4. VSCode 配置

3. ESLint + Prettier

3.1. Javascript 项目

3.2. TypeScript 项目

3.3. 性能与忽略文件

3.4. 检查规则