代码检查工具（Linter）

Quasar CLI with Vite - @quasar/app-vite

代码检查工具（Linter）

强烈推荐您使用一个代码检查工具（例如 ESLint v9+）来保证代码的可读性。它也可以帮助您在运行代码之前就捕获一些潜在的错误。

当您使用 Quasar CLI 创建项目时，它会询问您是否需要 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, 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",

      // 仅在开发环境中允许使用 debugger
      "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    },
  },

  {
    files: ["src-pwa/custom-service-worker.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,

  /**
   * 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"],

  {
    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, 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",

      // 仅在开发环境中允许使用 debugger
      "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    },
  },

  {
    files: ["src-pwa/custom-service-worker.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. JavaScript 项目

2.1. 需要安装的依赖

2.2. quasar.config 文件配置

2.3. ESLint 配置

3. TypeScript 项目

3.1. 需要安装的依赖

3.2. quasar.config 文件配置

3.3. ESLint 配置文件

4. 性能优化与忽略文件

5. 代码检查规则