Vite 2.0 + Vue 3.0：巧用 ESLint + Prettier，打造规范高效的开发环境

准备工作

在开始之前，请确保您已经安装了 Node.js 和 npm。您可以通过以下命令检查是否已安装：

node -v
npm -v

如果以上命令均输出版本号，则表示您已成功安装了 Node.js 和 npm。如果没有，请访问 Node.js 官方网站或使用您的系统包管理器进行安装。

安装 Vite

首先，我们需要安装 Vite。Vite 是一个用于构建前端应用程序的现代工具。它可以快速地构建和刷新应用程序，非常适合快速开发和原型设计。

npm install -g vite

创建 Vue 项目

接下来，让我们创建一个新的 Vue 项目。

vite create <project-name>

选择框架时，我们选择 Vue + TypeScript。

安装 ESLint 和 Prettier

现在，我们可以安装 ESLint 和 Prettier。ESLint 是一个静态代码分析工具，可以帮助我们检查代码中的错误和潜在问题。Prettier 是一个代码格式化工具，可以帮助我们保持代码风格的一致性。

npm install eslint prettier --save-dev

配置 ESLint 和 Prettier

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

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
    'vue/max-attributes-per-line': 'off',
  },
};

在项目根目录下，创建一个名为 .prettierrc.js 的文件，并添加以下内容：

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

集成 ESLint 和 Prettier 到 Vite

在项目根目录下的 vite.config.js 文件中，添加以下内容：

module.exports = {
  plugins: [
    require('vite-plugin-eslint')({
      cache: false,
    }),
    require('vite-plugin-prettier')(),
  ],
};

现在，当您运行 npm run dev 命令时，ESLint 和 Prettier 将自动运行，并检查和修复代码中的问题。

使用 ESLint 和 Prettier

ESLint 和 Prettier 可以通过多种方式使用。您可以通过以下命令手动运行它们：

npm run lint
npm run prettier

您也可以将它们集成到编辑器中，以便在您编辑代码时实时检查和修复问题。例如，如果您使用 Visual Studio Code，您可以安装 ESLint 和 Prettier 插件。

总结

在本文中，我们学习了如何在 Vite 2.0 和 Vue 3.0 项目中集成 ESLint 和 Prettier，以创建一个规范高效的开发环境。通过使用 ESLint 和 Prettier，我们可以确保代码质量和可维护性，从而提高开发效率。