Vite 使用 ESLint

在Vite中设置ESLint的快速教程。我们将为以下Vite + React项目使用linting（作为一般编程概念）与ESLint（JavaScript linting工具），因为它可以及早捕获错误。然而，您可以为任何其他Vite模板执行此操作。

我们将从一个基本的App组件开始，其中包含一个未使用的变量称为title：

import * as React from 'react';

const title = 'React';

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

如果没有Linting/ESLint设置，您很可能不会在IDE或命令行中收到有关未使用的title变量的通知。然而，及早捕获此类问题是很好的，因为迟早您可能会在代码库中遇到大量未使用的变量（以及其他代码风格问题）。

现在，由于我们使用Vite创建了项目，我们可以依赖于Vite的插件来集成ESLint。在命令行中，安装相应的插件：

npm install vite-plugin-eslint --save-dev

接下来，我们需要将插件集成到项目配置中。基本上，Vite的配置文件名为vite.config.js，允许我们自定义基于Vite的项目的开发和构建过程。它为我们提供选项，例如设置公共路径、配置插件和修改构建输出。此外，配置文件还可用于指定环境变量、设置别名路径以及配置ESLint等linting工具。我们将通过使用先前安装的插件来进行下一步操作：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), eslint()],
});

现在，Vite找到了ESLint，但我们还没有安装实际的ESLint依赖项。接下来，在命令行中安装它：

npm install eslint --save-dev

最后但同样重要的是，在命令行上安装ESLint的许多标准化linting配置之一，用于React项目：

npm install eslint-config-react-app --save-dev

如果您再次在命令行上启动项目，您可能会看到出现以下错误：

[vite] Internal server error: No ESLint configuration found in

因此，我们将创建一个ESLint配置文件来定义我们的linting规则：

touch .eslintrc

虽然在这个文件中定义您自己的规则是可能的，但我们将告诉ESLint使用先前安装的eslint-config-react-app依赖项中的标准化规则集：

{
  "extends": [
    "react-app"
  ]
}

.eslintrc配置文件基本上指定了项目的linting规则和设置。它允许我们配置ESLint的行为，包括指定语言版本、设置规则和使用插件。配置文件还可以扩展（我们所做的）或覆盖来自扩展配置的规则。最后，在命令行上启动应用程序时，您将看到以下警告弹出：

3:7  warning  'title' is assigned a value but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)

在您的IDE（例如VSCode）中，您也可以安装ESLint扩展。然后，您将在文件中看到以下警告弹出：

const title: "React"
'title' is assigned a value but never used

如果在安装扩展后您的IDE中没有显示警告，则可能需要重新启动IDE。

总之，在React项目中使用ESLint强烈建议用于维护代码质量和一致性。React是一个广泛使用的JavaScript库，因此有各种配置可供选择，如eslint-config-react-app（请参阅ESLint配置文件中的react-app），您可以直接使用。使用这样一个常见的配置可以确保编写的代码符合特定的编码标准。