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

安装与配置 eslint

      • 1 安装 eslint @babel/eslint-parser
      • 2 初始化配置 eslint
      • 3 安装 vite-plugin-eslint
      • 4 配置 vite.config.js 文件
      • 5 修改 eslint 默认配置

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': ['.eslintrc.{js,cjs}'],'parserOptions': {'sourceType': 'script'}}],'parserOptions': {'ecmaVersion': 'latest','sourceType': 'module'},'plugins': ['react'],'rules': {'indent': [2,2,{'SwitchCase': 1,'ignoredNodes': ['TemplateLiteral']}], //缩进'no-unused-vars': [0], //未使用变量'quotes': [2, 'single'], //单引号'jsx-quotes': ['error', 'prefer-single'],'no-console': [0, { 'allow': ['warn', 'error'] }], //console'linebreak-style': [0, 'unix'], //强制执行统一的行结尾'semi': [2, 'always'], //分号结尾'curly': 2,'no-eval': 1, //禁止使用eval'no-caller': 2,'no-else-return': 2, //如果if语句里面有return,后面不能跟else语句'no-extend-native': 2, //禁止扩展native对象'no-extra-bind': 2, //禁止不必要的函数绑定'no-floating-decimal': 2, //禁止省略浮点数中的0'no-implied-eval': 2, //禁止使用隐式eval'no-labels': 2, //禁止标签声明'no-with': 2, //禁用with'no-loop-func': 0, //禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)'no-native-reassign': 2, //不能重写native对象'no-redeclare': [2], //禁止重复声明变量'no-unused-expressions': 0, //禁止无用的表达式'no-unneeded-ternary': 2, //禁止不必要的嵌套'no-use-before-define': 0, //未定义前不能使用'no-unreachable': 2, //不能有无法执行的代码'no-trailing-spaces': 1, //一行结束后面不要有空格'no-dupe-keys': 2, //在创建对象字面量时不允许键重复 {a:1,a:1}'no-dupe-args': 2, //函数参数不能重复'no-duplicate-case': 2, //switch中的case标签不能重复'array-bracket-spacing': [2, 'never'], //是否允许非空数组里面有多余的空格'arrow-body-style': [1],'no-undef-init': 0,'no-undefined': 0,'key-spacing': [//对象字面量中冒号的前后空格2,{'beforeColon': false,'afterColon': true}],'no-lonely-if': 2, //禁止else语句内只有if语句'no-inner-declarations': [2, 'functions'], //禁止在块语句中使用声明(变量或函数)'no-spaced-func': 2, //函数调用时 函数名与()之间不能有空格'no-case-declarations': [0],'no-multiple-empty-lines': [1, { 'max': 2 }], //空行最多不能超过2行'space-in-parens': [2, 'never'], //小括号里面要不要有空格'no-multi-spaces': [2], //不能用多余的空格'no-irregular-whitespace': 2,//不能有不规则的空格'react/prop-types': [0],'react/display-name': [0],'react/no-string-refs': [0],'react/jsx-no-comment-textnodes': [0],'react/no-unescaped-entities': [0]},
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/783208.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【python】常用函数汇总(持续更新……)

文章目录 【numpy.exp()】返回e的幂次方,e是一个常数为2.71828【np.dot()】矩阵相乘【np.linalg.inv()】矩阵求逆 【numpy.exp()】返回e的幂次方,e是一个常数为2.71828 举例:numpy.exp() 【np.dot()】矩阵相乘 【要点】 1、前者的列数后者…

强化基础-Java-泛型基础

什么是泛型? 泛型其实就参数化类型,也就是说这个类型类似一个变量是可变的。 为什么会有泛型? 在没有泛型之前,java中是通过Object来实现泛型的功能。但是这样做有下面两个缺陷: 1 获取值的时候必须进行强转 2 没有…

canvas画图,画矩形可拖拽移动,可拖拽更改尺寸大小

提示:canvas画图,画矩形,圆形,直线,曲线可拖拽移动 文章目录 前言一、画矩形,圆形,直线,曲线可拖拽移动总结 前言 一、画矩形,圆形,直线,曲线可拖…

两张图片相似度匹配算法学习路线

大纲:​​​​​​目标跟踪基础:两张图片相似度算法-腾讯云开发者社区-腾讯云 (tencent.com) 目标跟踪基础:两张图片相似度算法 (qq.com) 一、传统方法 1.欧式距离(用于判断是否完全相同) [三维重建] [机器学习] 图…

DC电源模块的设计与调试技巧

BOSHIDA DC电源模块的设计与调试技巧 DC电源模块的设计与调试是电子工程师在实际项目中常常需要面对的任务。一个稳定可靠的DC电源模块对于电路的正常运行起到至关重要的作用。以下是一些设计与调试的技巧,帮助工程师们更好地完成任务。 第一,正确选择…

如何简化多个 if 的判断结构

多少算太多? 有些人认为数字就是一,你应该总是用至少一个三元运算符来代替任何单个 if 语句。我并不这样认为,但我想强调一些摆脱常见的 if/else 意大利面条代码的方法。 我相信很多开发人员很容易陷入 if/else 陷阱,不是因为其…

git的使用日常习惯规范与一些特殊操作

git的使用日常习惯规范与一些特殊操作 操作习惯规范创建本地新分支,推送新分支到云端仓库1.创建一个本地的login分支2.创建新分支后切换到新分支3.推送新分支到云端 git的特殊操作撤回commit(取消提交到本地版本库的动作,本地工作区写的代码不…

鸿蒙开发(七)-UIAbility启动模式

鸿蒙开发(七)-启动模式 根据代码中定义,UIAbility的启动模式有以下几种: "launchType": {"description": "Indicates the boot mode of ability.","type": "string","enum": ["standard",…

springboot点餐平台网站

目 录 摘 要 1 前 言 2 第1章 概述 2 1.1 研究背景 3 1.2 研究目的 3 1.3 研究内容 4 第二章 开发技术介绍 5 2.1相关技术 5 2.2 Java技术 6 2.3 MySQL数据库 6 2.4 Tomcat介绍 7 2.5 Spring Boot框架 8 第三章 系统分析 9 3.1 可行性分析 9 3.1.1 技术可行性 9 3.1.2 经济可行…

容器和注解开发

1.创建容器的两种方式 //1.加载类路径下的配置文件//ApplicationContext ctx new ClassPathXmlApplicationContext("applicationContext.xml"); //2.从文件系统下加载配置文件(绝对路径) ApplicationContext ctx new FileSystemXmlApplicationContex…

嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记12:DAC数模转换

系列文章目录 嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记01:赛事介绍与硬件平台 嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记02:开发环境安装 嵌入式|蓝桥杯STM32G431(…

vue登录页获取随机验证码

vue2的写法&#xff0c;vue3项目改写成ts写法即可 首先验证码随机图片组件&#xff1b;放在适当的文件中&#xff0c;后面引入到主页面 <template><div class"s-canvas"><canvasid"s-canvas":width"contentWidth":height"c…

Django(二)-搭建第一个应用(1)

一、项目环境和结构 1、项目环境 2、项目结构 二、编写项目 1、创建模型 代码示例: import datetimefrom django.db import models from django.utils import timezone# Create your models here.class Question(models.Model):question_text models.CharField(max_length2…

golang grpc和protobuf的版本降级问题(version4 -> version3)

最后更新于2024年3月28日 10:57:52 简中没查到类似的文章。一点小事闹麻了&#xff0c;搞了一天&#xff0c;特意发出来造福大家。 所谓的版本就是下面这个东西proto.ProtoPackageIsVersion4或者proto.ProtoPackageIsVersion3&#xff1a; 目的 为了适配旧代码&#xff0c…

【Monero】Wallet RPC | Wallet CLI | 门罗币命令行查询余额、种子、地址等命令方法教程

ubuntu22.04 首先在运行daemon&#xff0c;详细安装运行教程可参考&#xff1a;The Monero daemon (monerod) ./monerodWallet CLI run ./monero-wallet-cli如果还没有钱包就根据提示创建钱包即可 输入密码 查询余额 balance查询种子 seed其他可执行命令操作&#xff1…

力扣-349两个数组的交集

两个数组的交集 已解答 简单 相关标签 相关企业 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的 交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出&#xff1a;[…

C 语言练习分享

c语言的一些小练习&#xff0c;可以多思考&#xff0c;多看看 1. 按下面对公式求sum的值&#xff1a;Sum1-23-45-6……99-100 #define _CRT_SECURE_NO_WARNINGS 1//要写到代码第一行 #include <stdio.h> #include <string.h> #include <math.h> void main()…

LVS(Layout versus schematic)比的是什么?

概述 LVS不是一个简单地将版图与电路原理图进行比较的过程&#xff0c;它需要分两步完成。第一步“抽取”&#xff0c;第二步“比较”。首先根据LVS提取规则&#xff0c;EDA 工具从版图中抽取出版图所确定的网表文件&#xff1b;然后将抽取出的网表文件与电路网表文件进行比较…

跳槽多次未成功,问题源自何处?

众所周知&#xff0c;2023年市场很难&#xff01;看着企业们纷纷裁员&#xff0c;甚至连内推这个后门都走不通&#xff01;哪怕有面试&#xff0c;都是屡屡碰壁&#xff0c;你想清楚问题出在哪了吗&#xff1f;&#x1f62d;“求职不得&#xff0c;夜不能寐&#xff1b;三更半夜…

GEE土地分类——基于遥感影像数据的不同作物的分类

简介 这里我们首先要更改原始代码的中的影像和研究区矢量的问题,这个为了防止我们计算的过程超限,建议先将我们的研究区影像和样本点先存在自己的assets中,然后导入到新的脚本中。然周本文就是对其进行影像进行归一化处理,然后进行样本点值提取至点,然后训练样本点,进行…