Vue.js Prettier 配置指南

Vue.js Prettier 配置指南

本文将指导您了解并设置 eslint-config-prettier 和 Vue.js 项目的集成，以确保代码风格的一致性和整洁。

1. 项目目录结构及介绍

eslint-config-prettier 是一个流行的插件，用于关闭 ESLint 中可能与 Prettier 冲突的规则。其核心功能是提供一份预设配置，使您可以专注于 Prettier 的代码格式化，而无需担心两者的冲突。通常，项目结构可能如下：

my-vue-project/
├── package.json
├── .eslintrc.js 或 .eslintrc.yaml 或 .eslintrc.json
└── .prettierrc.js 或 .prettierrc.yaml 或 .prettierrc.json

• package.json: 项目依赖管理文件，其中应包括对 eslint-config-prettier 和 eslint-plugin-prettier 的依赖。
• .eslintrc.*: ESLint 配置文件，用于定义项目的代码规范。
• .prettierrc.*: Prettier 配置文件，用于指定代码格式化的规则。

2. 项目启动文件介绍

在 Vue.js 项目中，main.js 或 app.js 通常是应用的入口点。您不需要在这里引入或配置 eslint-config-prettier；它是在构建过程中通过 ESLint 自动处理的。但是，确保您的 npm 脚本（如 start 或 build）中包含了运行 ESLint 检查的步骤，例如：

{
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build --no-progress && npm run lint",
    "lint": "eslint --ext .js,.vue src"
  }
}

这里，lint 命令会在构建之前运行，检查源代码是否符合指定的 ESLint 规则。

3. 项目配置文件介绍

.eslintrc.*

要启用 eslint-config-prettier，您需要在 .eslintrc.* 文件中扩展它。从 v8.0.0 开始，您只需要扩展 "prettier"：

// .eslintrc.js 示例
module.exports = {
  extends: [
    'plugin:vue/recommended', // 如果您是 Vue.js 项目
    'prettier'
  ],
  plugins: ['vue'],
  rules: {
    // 在这里添加或覆盖特定的 ESLint 规则
  }
};

请注意，如果您正在使用其他 ESLint 预设配置（如 "airbnb" 或 "standard"），请确保 eslint-config-prettier 在列表中位于它们之后，以便它能够覆盖它们的相关规则。

.prettierrc.*

.prettierrc.* 文件用于设置 Prettier 的格式化规则。通常不需要任何特殊的配置，但您可以根据团队偏好自定义这些规则。以下是一个基本示例：

# .prettierrc.yaml 示例
printWidth: 120
tabWidth: 2
useTabs: false
singleQuote: true
trailingComma: 'all'
bracketSpacing: true
jsxBracketSameLine: false
semi: true
arrowParens: 'avoid'

最后，确保在开发流程中集成 Prettier 和 ESLint，这样每次保存文件时，编辑器都能自动应用格式化规则。这可以通过安装相应的 IDE 插件或配置构建工具来实现。

通过遵循以上步骤，您的 Vue.js 项目就能有效地利用 eslint-config-prettier 来协同 Prettier 工作，保持代码的整洁和一致性。