quasar+vue3如何配置eslint+prettierquasar+vue3如何配置eslint+prettier

此处为quasar项目搭建，只需要看vue3+vite+eslint+prettier直接跳过

全局安装quasar脚手架 yarn global add @quasar/cli

用脚手架搭建项目 yarn create quasar

搭建是会询问你一些问题，按照实际需要选择即可

注意红线部分如果选择项目就无法启动，应该是vite-plugin-checker包那里不兼容，所以我选择自己添加eslint+prettier来作为语法检查和代码风格规范。

选择完成后会询问是否直接安装依赖包，直接安装即可，这样quasar脚手架就帮我们把项目搭建完成了

接下来我们在项目目录下安装eslint yarn add -D eslint

执行yarn eslint --init 这是eslint的脚手架命令，可以帮助我们安装依赖和生成配置文件，eslint脚手架同样会问我们安装要求，根据实际情况选择以上为我的选择，最后选择安装即可脚手架会帮我们安装eslint-plugin-vue和typescript-eslint以及其他依赖包

eslint-plugin-vue提供 Vue 相关的 ESLint 规则，帮助我们在 Vue 文件中保持一致的代码风格

typescript-eslint提供 TypeScript 相关的 ESLint 规则，用于增强 TypeScript 代码的质量和一致性。

接下来安装prettieryarn add -D prettier

安装eslint-plugin-prettier和eslint-config-prettier，目的为了解决eslint和prettier冲突 yarn add -D eslint-plugin-prettier eslint-config-prettier

安装@eslint/eslintrc yarn add -D @eslint/eslintrc

然后再eslint 配置文件中的 extends 中最后加上一个plugin:prettier/recommended 注意一定不要单独在eslint.config.mjs设置校验规则了，我们已经使用prettier的规则，不需要在设置了，否则可能会冲突

完整的eslint.config.mjs代码如下

import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';

import { FlatCompat } from '@eslint/eslintrc';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname
});

export default [
  { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  ...compat.extends('plugin:prettier/recommended'),
  {
    files: ['**/*.vue'],
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  }
];

完整的prettier.config.mjs配置如下

  printWidth: 80, // 一行最多80个字符
  tabWidth: 2, // 设置工具每一个水平缩进的空格数
  useTabs: false, //不使用缩进,而使用空格
  semi: true, // 句末是否加分号
  vueIndentScriptAndStyle: false, //Vue文件中＜script＞和＜style＞是否缩进
  singleQuote: true, // 用单引号
  trailingComma: 'none', // 最后一个对象元素符加逗号
  bracketSpacing: true, // 箭头函数,只有一个参数的时候,也需要括号
  arrowParens: 'always', // 不需要写文件开头的 @prettier
  insertPragma: false, // 不需要自动在文件开头加入 @prettier
  endOfLine: 'auto' // 换行符使用 auto 有些地方说的是推荐使用lf
};

最后我们需要修改下编辑器的配置，打开保存格式化配置

修改项目项目根目录下的.vscode/setting.json，完整代码如下

  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

一些其他问题

eslint提示某些全局变量未定义，将全局变量加入eslint.config.mjs文件的{ languageOptions: { globals: globals.browser } }中

eslint忽略文件，在eslint.config.mjs的export default[] 中添加ignores即可，例如

vite集成 在 Vite 项目中，我们可以使用 vite-plugin-eslint 插件，这样不仅可以在开发过程中进行代码检查，还可以在打包时进行验证。 vite.config.js配置如下

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
    plugins: [
        vue(),
        eslintPlugin({
            // 可以在这里传入自定义配置
            // 默认会读取项目中的 .eslintrc.js 文件
        })
    ]
});

node版本
在使用eslint时尤其要注意node版本是否匹配，官网已经提示

eslint脚本