在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），您可以直接使用。使用这样一个常见的配置可以确保编写的代码符合特定的编码标准。
网友评论