【React】vite + react 项目，进行配置 eslint

作者：System 时间：2024年08月24日分类：所有,elasticsearch 字数：1082

这篇文章距离上次修改已过222天，其中的内容可能已经有所变动。

在Vite + React项目中配置ESLint，你需要按照以下步骤操作：

安装ESLint及其必要的插件：

npm install eslint eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import --save-dev

初始化ESLint配置文件：

npx eslint --init

安装react插件：

npm install eslint-plugin-react --save-dev

在项目根目录下创建或编辑.eslintrc.js（或.eslintrc.json，.eslintrc.yml等）配置文件，添加对React的支持及其他规则：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'standard',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    // 在这里添加或覆盖规则
  },
};

在vite.config.js中配置ESLint插件（如果你使用的是Vite 2+）：

import eslintPlugin from 'vite-plugin-eslint';

// ...
export default {
  plugins: [
    eslintPlugin({
      cache: false, // 可以提高构建速度
      // 其他配置...
    }),
  ],
  // ...
};

确保你的编辑器或IDE支持ESLint插件，并在保存文件时运行ESLint检查。

以上步骤将在你的Vite + React项目中配置ESLint，并确保代码风格一致。

【React】vite + react 项目，进行配置 eslint

评论已关闭

推荐阅读