在使用 WebStorm 配置 Vue 3 项目，特别是使用 Vue CLI 创建的项目时，确保你的项目支持 ESLint 和 Prettier 可以大大提高代码质量和团队协作的效率。以下是一些步骤和配置指南，帮助你在 Vue 3 项目中集成 ESLint 和 Prettier。

步骤 1: 初始化 Vue 项目

如果你还没有创建 Vue 项目，可以使用 Vue CLI 创建一个新的项目：

vue create my-vue-project
cd my-vue-project

步骤 2: 安装 ESLint 和 Prettier

在项目根目录下，安装 ESLint 和 Prettier：

npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier

步骤 3: 配置 ESLint

创建 ESLint 配置文件：

在项目根目录下创建一个 .eslintrc.js 文件（如果尚不存在）：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
    "parser": "@typescript-eslint/parser" // 使用 TypeScript 的 ESLint 解析器
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    //
    "prettier/prettier": ["error", {}, { "usePrettierrc": true }], // 使用项目中的 .prettierrc 配置文件
    "linebreak-style": "off", // 禁用 ESLint 的换行风格规则，让 Prettier 控制
    "quotes": "off", // 禁用 ESLint 的引号规则，让 Prettier 控制
    "max-len": "off" //禁用 ESLint 的 max-len 规则
  },
  plugins: [
    "vue", // ESLint Vue.js 插件的标识符，必须放在最后面使用 extends 引入规则集时才需要添加此项。否则可以省略。
    "prettier" // 使用 prettier 插件来关闭所有不必要的规则。确保它在 extends 数组的最后面。
  ],
};

安装 ESLint 的 Babel 解析器：

npm install --save-dev @babel/core @babel/eslint-parser

配置 ESLint忽略文件.eslintignore

# 忽略所有的测试文件
tests/
*.test.js

# 忽略构建目录
dist/
build/
public/

src/assets

# 忽略 node_modules 目录下的所有文件，因为它们通常不需要被检查
node_modules/

# 忽略 git 目录，通常也不需要被检查
.git/

.prettierrc
.eslintrc.js
*.config.js
*.d.ts

步骤 4: 配置 Prettier

创建 Prettier 配置文件：

在项目根目录下创建一个 .prettierrc 文件：

{
  "singleQuote": true,
  "semi": false,
  "printWidth": 120
}

步骤 5: 在 WebStorm 中配置 ESLint 和 Prettier

打开项目设置：在 WebStorm 中，选择 File > Settings (或使用快捷键 Ctrl+Alt+S)。

配置 ESLint：在 Languages & Frameworks > JavaScript > Code Quality Tools > ESLint 中，确保选中 Enable 并选择你的项目中的 .eslintrc.js 文件。

配置 Prettier：在 Languages & Frameworks > JavaScript > Code Style > Prettier 中，确保选中 On code reformat 和 On save。你也可以在这里调整 Prettier 的配置，使其与 .prettierrc 文件中的设置相匹配。

应用并关闭设置。

步骤 6: 使用 ESLint 和 Prettier 检查和格式化代码

现在，你可以通过 WebStorm 的代码检查功能来运行 ESLint，以及使用代码格式化功能来应用 Prettier。通常，保存文件时会自动格式化代码，或者在代码检查中手动运行 ESLint。

以上步骤应该可以帮助你在使用 WebStorm 的 Vue 3 项目中成功配置 ESLint 和 Prettier。这样，你的代码质量将得到显著提升，同时保持一致的编码风格。