轻松玩转 Vite + Vue 3 + ESLint + Prettier

前言

在前端开发中，代码格式化和错误检查是至关重要的两个环节。它们可以帮助我们保持代码的可读性和可维护性，减少错误的发生。ESLint 是一个流行的 JavaScript 代码检查工具，可以帮助我们发现代码中的语法错误、风格问题和潜在的 bug。Prettier 是一个代码格式化工具，可以将我们的代码格式化为一致的风格，使其更易于阅读和理解。

在 Vite + Vue 3 项目中，我们可以使用 ESLint 和 Prettier 来提高我们的开发效率。接下来，我将介绍如何将这两个工具集成到项目中，并进行一些简单的配置。

1. 安装 ESLint 和 Prettier

首先，我们需要安装 ESLint 和 Prettier。我们可以使用 npm 或 yarn 来安装这两个工具。

npm install --save-dev eslint prettier

或者

yarn add --dev eslint prettier

安装完成后，我们可以在项目根目录下创建一个 .eslintrc.js 文件来配置 ESLint。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
    'no-console': 'off',
  },
};

在 .eslintrc.js 文件中，我们指定了 ESLint 的配置规则。其中，env 属性指定了 ESLint 的运行环境，extends 属性指定了 ESLint 的扩展规则集，parserOptions 属性指定了 ESLint 的解析器选项，plugins 属性指定了 ESLint 的插件，rules 属性指定了 ESLint 的规则。

接下来，我们需要在项目根目录下创建一个 .prettierrc.js 文件来配置 Prettier。

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
};

在 .prettierrc.js 文件中，我们指定了 Prettier 的配置规则。其中，printWidth 属性指定了代码行的最大宽度，tabWidth 属性指定了制表符的宽度，useTabs 属性指定了是否使用制表符，semi 属性指定了是否在语句末尾添加分号，singleQuote 属性指定了是否使用单引号，trailingComma 属性指定了在数组、对象和函数参数的末尾是否添加逗号，bracketSpacing 属性指定了在大括号内是否添加空格，jsxBracketSameLine 属性指定了 JSX 标签的大括号是否在同一行，arrowParens 属性指定了箭头函数的参数是否需要括号。

2. 使用 ESLint 和 Prettier

配置好 ESLint 和 Prettier 后，我们就可以在项目中使用它们了。我们可以使用 ESLint 来检查代码中的错误和警告，并使用 Prettier 来格式化代码。

我们可以使用以下命令来运行 ESLint：

npm run lint

或者

yarn lint

我们可以使用以下命令来运行 Prettier：

npm run format

或者

yarn format

运行 ESLint 和 Prettier 后，它们会自动检查和格式化我们的代码。如果代码中有错误或警告，ESLint 会在终端中输出错误或警告信息。如果代码的格式不正确，Prettier 会自动将代码格式化为正确的样子。

3. 集成到 Vite

在 Vite + Vue 3 项目中，我们可以将 ESLint 和 Prettier 集成到 Vite 中，以便在开发过程中自动检查和格式化代码。

首先，我们需要在项目的 vite.config.js 文件中添加以下代码：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin(),
    prettierPlugin(),
  ],
})

在 vite.config.js 文件中，我们导入了 defineConfig 函数，并使用了 vue、eslintPlugin 和 prettierPlugin 插件。

接下来，我们需要在项目的 package.json 文件中添加以下脚本：

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "format": "prettier --write src",
    "dev": "vite",
    "build": "vite build",
  }
}

在 package.json 文件中，我们添加了 lint 和 format 脚本。lint 脚本用于运行 ESLint，format 脚本用于运行 Prettier。

现在，我们就可以在项目中使用 ESLint 和 Prettier 了。我们可以使用 npm run lint 命令来运行 ESLint，可以使用 npm run format 命令来运行 Prettier。

总结

在本文中，我介绍了如何在 Vite + Vue 3 项目中使用 ESLint 和 Prettier。通过将这两个工具集成到项目中，我们可以提高我们的开发效率，减少错误的发生，并保持代码的可读性和可维护性。

我希望本文对你有帮助。如果你有任何问题，请随时留言。