【React】vite + react 项目，进行配置 eslint_vite react eslint(4)

最新推荐文章于 2024-05-26 09:42:55 发布

afagagagaa

最新推荐文章于 2024-05-26 09:42:55 发布

阅读量270

点赞数 4

分类专栏：程序员文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/afagagagaa/article/details/138505103

版权

程序员专栏收录该内容

169 篇文章 0 订阅

订阅专栏

本文介绍了如何安装和配置eslint以及vite-plugin-eslint，以实现代码规范的管理。对于IT学习者，无论新手还是资深开发者，本文提供了从基础到进阶的系统化学习资源，包括大厂经验分享和持续更新的内容。

摘要由CSDN通过智能技术生成

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

安装与配置 eslint

- - 1 安装 eslint @babel/eslint-parser

1 安装 eslint @babel/eslint-parser

npm i -D eslint @babel/eslint-parser

2 初始化配置 eslint

npx eslint --init

相关的配置设置根据实际情况选择即可
在这里插入图片描述
配置完成会自动安装相关依赖并生成 .eslintrc.cjs 文件

module.exports = {
  'env': {
    'browser': true,
    'es2021': true
  },
  'extends': [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  'overrides': [
    {
      'env': {
        'node': true
      },
      'files': [
        '.eslintrc.{js,cjs}'
      ],
      'parserOptions': {
        'sourceType': 'script'
      }
    }
  ],
  'parserOptions': {
    'ecmaVersion': 'latest',
    'sourceType': 'module'
  },
  'plugins': [
    'react'
  ],
  'rules': {
  },
};

3 安装 vite-plugin-eslint

npm i -D vite-plugin-eslint

4 配置 vite.config.js 文件

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

export default defineConfig({
  plugins: [
    react(),
    // 添加 eslint 插件配置
    eslintPlugin({
      include: ['src/\*\*/\*.js', 'src/\*\*/\*.jsx', 'src/\*.js', 'src/\*.jsx']
    })
  ],
  resolve: {
    alias: {
    },
  },
})

5 修改 eslint 默认配置

可根据实际情况进行配置。

module.exports = {
  'env': {
    'browser': true,
    'es2021': true
  },
  'extends': [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  'overrides': [
    {
      'env': {
        'node': true
      },
      'files': [


![img](https://img-blog.csdnimg.cn/img_convert/f420c859e60412d1d0812e27ada81dfe.png)
![img](https://img-blog.csdnimg.cn/img_convert/aa7e82f1a7a33abd10db21d40c51f3e3.png)
![img](https://img-blog.csdnimg.cn/img_convert/1b2f4429527ec757da5f30e1f73a4b3c.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**