ESLint、Prettier 和 Vue 3 的格式化指南

在开发过程中，代码格式化是一个重要的环节，它有助于保持代码风格的一致性，提高代码的可读性和可维护性。ESLint、Prettier 和 Vue 3 是三个常用的工具，可以帮助我们实现这一目标。下面我们将介绍如何配置和使用这些工具。
一、ESLint
ESLint 是一个可扩展的 JavaScript 代码检查工具，可以帮助我们发现代码中的错误和不一致之处。它支持多种插件，可以与 Prettier 配合使用，以实现代码格式化的自动化。

1. 安装 ESLint 和相关插件
   首先，我们需要安装 ESLint 和一些常用的插件，如 eslint-plugin-vue 和 eslint-plugin-prettier。可以使用 npm 或 yarn 进行安装：

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

   或者

   yarn add eslint eslint-plugin-vue eslint-plugin-prettier --dev

2. 配置 ESLint
   创建一个名为 .eslintrc.js 的文件，并在项目中根目录下添加以下内容：

   module.exports = {
   env: {
   browser: true,
   es2021: true,
   node: true,
   },
   extends: [
   'plugin:vue/essential',
   'eslint:recommended',
   ],
   parserOptions: {
   ecmaVersion: 12,
   sourceType: 'module',
   },
   plugins: ['vue', 'prettier'],
   rules: {
   // 在这里添加自定义规则
   },
   };

3. 配置 Prettier 插件
   在 .eslintrc.js 文件中添加以下内容：

   module.exports = {
   // ...之前的配置内容...
   plugins: ['vue', 'prettier'],
   rules: {
   // 在这里添加自定义规则...
   'prettier/prettier': 'error', // 使用 Prettier 进行代码格式化
   },
   };

   二、Prettier
   Prettier 是一个强大的代码格式化工具，它可以自动调整代码格式以符合指定的规范。它支持多种语言和编辑器，并且可以与 ESLint 集成。
4. 安装 Prettier 和相关插件（如果尚未安装）
   使用 npm 或 yarn 进行安装：

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

   或者

   yarn add --dev prettier prettier-plugin-vue eslint-plugin-prettier