代码检查器 | Quasar 框架

Quasar CLI with Vite - @quasar/app-vite

代码风格检查器

强烈建议使用代码风格检查器（例如 ESLint），它可以确保你的代码看起来清晰易读。它还有助你在运行代码之前捕获一些错误。

当你搭建 Quasar 项目文件夹时，它会询问你是否要使用代码风格检查器，以及你想要使用哪种 ESLint 设置

Prettier
Standard
Airbnb
… 或者你可以自己配置一个

将创建两个点文件

.eslintrc.cjs – ESLint 配置，包括规则
.eslintignore – ESLint 在代码风格检查时应该忽略什么

可以进一步扩展上述 ESLint 设置之一。默认情况下，你的项目将使用 eslint-plugin-vue 来处理你的 Vue 文件。快速浏览一下 /.eslintrc.cjs，你会注意到它

extends: [
  // https://eslint.vuejs.ac.cn/rules/#priority-a-essential-error-prevention-for-vue-js-3-x
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  'plugin:vue/strongly-recommended'
]

还要注意，你需要以下文件

/dist
/src-capacitor
/src-cordova
/.quasar
/node_modules
.eslintrc.cjs
/quasar.config.*.temporary.compiled*

代码风格检查规则

代码风格检查规则可以删除、更改或添加。注意一些事情

一些规则是针对 Standard、Airbnb 或 Prettier 标准（你在创建项目时选择的标准）。例如：‘brace-style’。
一些规则是针对 eslint-plugin-vue 的。例如：‘vue/max-attributes-per-line’。

你可以通过首先访问 https://eslint.org.cn/docs/rules/ 或 https://eslint.vuejs.ac.cn/rules 来添加/删除/更改规则。

以下示例是 ESLint 规则

'rules': {
  'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }],

  'vue/max-attributes-per-line': 0,
  'vue/valid-v-for': 0,

  // allow async-await
  'generator-star-spacing': 'off',

  // allow paren-less arrow functions
  'arrow-parens': 0,
  'one-var': 0,

  'import/first': 0,
  'import/named': 2,
  'import/namespace': 2,
  'import/default': 2,
  'import/export': 2,
  'import/extensions': 0,
  'import/no-unresolved': 0,
  'import/no-extraneous-dependencies': 0,

  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}

Typescript 项目代码风格检查

TS 项目的代码风格检查基于 vite-plugin-checker + ESLint + vue-tsc

Yarn

NPM

PNPM

Bun

$ yarn add --dev vite-plugin-checker vue-tsc@2 typescript

在项目文件夹的根目录中创建一个名为 tsconfig.vue-tsc.json 的文件

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "skipLibCheck": true
  }
}

build: {
  vitePlugins: [
    ['vite-plugin-checker', {
      vueTsc: {
        tsconfigPath: 'tsconfig.vue-tsc.json'
      },
      eslint: {
        lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"'
      }
    }, { server: false }]
  ]
}

Javascript 项目代码风格检查

JS 项目的代码风格检查基于 vite-plugin-checker + ESLint

Yarn

NPM

PNPM

Bun

$ yarn add --dev vite-plugin-checker

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

quasar.config 文件 > eslint
已弃用

警告

以下描述的属性已弃用，建议使用 vite-plugin-checker。

如果你在创建项目文件夹时选择了 ESLint，你还会注意到 eslint 键已添加到 /quasar.config 文件中

eslint: {
  // fix: true,
  // include: [],
  // exclude: [],
  // rawOptions: {},
  warnings: true,
  errors: true
},

/** Options with which Quasar CLI will use ESLint */
eslint?: QuasarEslintConfiguration;

interface QuasarEslintConfiguration {
  /**
   * Should it report warnings?
   * @default true
   */
  warnings?: boolean;

  /**
   * Should it report errors?
   * @default true
   */
  errors?: boolean;

  /**
   * Fix on save
   */
  fix?: boolean;

  /**
   * Raw options to send to ESLint
   */
  rawOptions?: object;

  /**
   * Files to include (can be in glob format)
   */
  include?: string[];

  /**
   * Files to exclude (can be in glob format).
   * Recommending to use .eslintignore file instead.
   */
  exclude?: string[];
}

为了让你以后禁用 ESLint，你只需要

注释掉（或删除）下面的键

eslint: { /* ... */ }

或者，将 warnings 和 errors 设置为 false

eslint: {
  warnings: false,
  errors: false
}

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

1. 简介

2. 代码风格检查规则

3. Typescript 项目代码风格检查

4. Javascript 项目代码风格检查

5. quasar.config 文件 > eslint

代码风格检查规则

Typescript 项目代码风格检查

Javascript 项目代码风格检查

quasar.config 文件 > eslint已弃用

quasar.config 文件 > eslint
已弃用