当前位置: 首页 > news >正文

react项目初始化配置步骤

1.npx create-react-app 项目名称 vue项目同理

2.去编辑器市场安装所需插件,例如ESlint以及Prettier-Code formatter formatiing-toggle

3.在项目中安装 ESLint 和 Prettier 及相关插件:

3.1: npm install --save-dev eslint prettier
3.2: npm install --save-dev eslint-config-prettier eslint-plugin-prettier
3.3: npm install --save-dev eslint-plugin-react 这个需不需要安装取决你的项目是否是react,如果是vue则安装vue

4.编辑 .eslintrc.json 或 .eslintrc.js 文件,配置 ESLint 和 Prettier 的规则:

{"env": {"browser": true,"es2021": true},"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],"parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": "latest","sourceType": "module"},"plugins": ["react", "prettier"],"rules": {"react/react-in-jsx-scope": "off", // 禁用规则"prettier/prettier": "error","no-unused-vars": "warn","react/prop-types": "off","indent": ["error", 2, { "SwitchCase": 1 }]}
}

5. 配置 Prettier:在项目根目录下创建 .prettierrc 文件,定义 Prettier 的格式化规则。

{"semi": true,"singleQuote": true,"trailingComma": "es5","tabWidth": 2,"printWidth": 80,"endOfLine": "auto" //在 Prettier 配置中设置 "endOfLine": "auto",让换行符适配操作系统。通过这个配置可以避免 Delete '␍' prettier/prettier 的报错。
}

6.配置:.editorconfig

# 顶层配置文件
root = true# 默认配置,适用于所有文件
[*]
charset = utf-8          # 字符编码:utf-8
end_of_line = lf         # 换行符:lf (Linux/Unix)
indent_style = space     # 缩进风格:空格
indent_size = 2          # 缩进大小:2 个空格
insert_final_newline = true # 文件末尾添加一个空行
trim_trailing_whitespace = true # 移除行尾多余的空格

7.使用 VS Code 等编辑器时,可以设置 ESLint 和 Prettier 插件,并启用保存时自动格式化功能。即配置setting.json文件

{"files.autoSaveWhenNoErrors": true,"files.autoSaveWorkspaceFilesOnly": true,"files.autoSave": "onWindowChange","editor.minimap.enabled": false,"explorer.confirmDelete": false,"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.formatOnType": true,"[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"security.workspace.trust.untrustedFiles": "open","eslint.validate": ["javascript","javascriptreact","typescript","typescriptreact","vue"],// 启用 ESLint 校验的文件类型"editor.formatOnSave": true, // 启用保存时格式化"editor.codeActionsOnSave": {"source.fixAll.eslint": true // 保存时使用 ESLint 修复},"prettier.requireConfig": true, // 确保 Prettier 仅在配置文件中启用,"editor.formatOnPaste": true, // 始终显示 ESLint 状态
}

相关文章:

react项目初始化配置步骤

1.npx create-react-app 项目名称 vue项目同理 2.去编辑器市场安装所需插件,例如ESlint以及Prettier-Code formatter formatiing-toggle 3.在项目中安装 ESLint 和 Prettier 及相关插件: 3.1: npm install --save-dev eslint prettier 3.2…...

vue使用百度富文本编辑器

1、安装 npm add vue-ueditor-wrap 或者 pnpm add vue-ueditor-wrap 进行安装 2、下载UEditor 官网:ueditor:rich text 富文本编辑器 - GitCode 整理好的:vue-ueditor: 百度编辑器JSP版 因为官方的我没用来,所以我自己找的另外的包 …...

异常处理(6)自定义异常

异常处理(6)自定义异常类 1、自定义异常要求: (1)要继承一个异常类型 自定义一个编译时异常类型:自定义类继承java.lang.Exception。 自定义一个运行时异常类型:自定义类继承java.lang.Runtim…...

微软正在测试 Windows 11 对第三方密钥的支持

微软目前正在测试 WebAuthn API 更新,该更新增加了对使用第三方密钥提供商进行 Windows 11 无密码身份验证的支持。 密钥使用生物特征认证,例如指纹和面部识别,提供比传统密码更安全、更方便的替代方案,从而显著降低数据泄露风险…...

时间的礼物:如何珍视每一刻

《时间的礼物:如何珍视每一刻》 夫时间者,宇宙之精髓,生命之经纬,悄无声息而流转不息,如织锦之细线,串联古今,贯穿万物。 人生短暂,犹如白驹过隙,倏忽而逝,…...

初级 Python 数据脱敏技术及应用

文章目录 引言:为什么需要数据脱敏?常见的数据脱敏技术字符替换加密脱敏数据伪造组合策略 数据脱敏的合规性和伦理脱敏方案选择脱敏操作的性能优化结论 引言:为什么需要数据脱敏? 随着数据隐私问题越来越受到重视,数据…...

1063 Set Similarity (25)

Given two sets of integers, the similarity of the sets is defined to be Nc​/Nt​100%, where Nc​ is the number of distinct common numbers shared by the two sets, and Nt​ is the total number of distinct numbers in the two sets. Your job is to calculate th…...

Web登录页面设计

记录第一个前端界面,暑假期间写的,用了Lottie动画和canvas标签做动画,登录和注册也连接了数据库。 图片是从网上找的,如有侵权私信我删除,谢谢啦~...

【大数据学习 | Spark】Spark on hive与 hive on Spark的区别

1. Spark on hive Spark on hive指的是使用Hive的元数据(Metastore)和SQL解析器(HiveQL)。这种方式下,spark可以读取和写入hive表,利用hive的元数据信息来进行表结构的定义和管理。 具体特点为: 1.1 元数据共享 sp…...

软件测试丨Pytest 第三方插件与 Hook 函数

Pytest不仅是一个用于编写简单和复杂测试的框架,还有大量的第三方插件以及灵活的Hook函数供我们使用,这些功能大大增强了其在软件测试中的应用。通过使用Pytest,测试开发变得简便、安全、高效,同时也能帮助我们更快地修复Bug&…...

Python学习35天

# 定义父类 class Computer: CPUNone MemoryNone diskNone def __init__(self,CPU,Memory,disk): self.disk disk self.Memory Memory self.CPU CPU def get_details(self): return f"CPU:{self.CPU}\tdisk:{self.disk}\t…...

IO基础(字符集与字符流)

在字节流中,文件中的中文显示的是乱码。 在计算机存储体系中,以字节为最小存储单位,一个英文占一字节。 字符集类型 ASCII字符集,又叫编码表,编码表中有128个数据,其中大小写字母、符号、数字等。GB2312…...

LLM应用-prompt提示:RAG query重写、相似query生成 加强检索准确率

参考: https://zhuanlan.zhihu.com/p/719510286 1、query重写 你是一名AI助手,负责在RAG(知识库)系统中通过重构用户查询来提高检索效果。根据原始查询,将其重写得更具体、详细,以便更有可能检索到相关信…...

[python脚本处理文件入门]-17.Python如何操作Excel文件的读写

哈喽,大家好,我是木头左! 在Python中,处理Excel文件最常用的库之一是xlrd,它用于读取Excel文件。而当需要创建或写入Excel文件时,xlwt库则是一个不错的选择。这两个库虽然功能强大,但使用起来也非常简单直观。 安装与导入 确保你已经安装了这两个库。如果没有安装,可以…...

深度理解进程的概念(Linux)

目录 一、冯诺依曼体系 二、操作系统(OS) 设计操作系统的目的 核心功能 系统调用 三、进程的概念与基本操作 简介 查看进程 通过系统调用获取进程标识符 通过系统调用创建进程——fork() 四、进程的状态 操作系统中的运行、阻塞和挂起 理解linux内核链表 Linux的进…...

【C++】STL容器中的比较函数对象

目录 set、map容器 priority_queue容器 在STL中涉及到以某种规则排序的容器都需要比较函数对象,比如:set、map、priority_queue这些容器内部都是依赖比较函数对象以某种规则存储数据的。STL容器中的比较函数对象可以是:函数指针、仿函数(函…...

深度学习基础02_损失函数BP算法(上)

目录 一、损失函数 1、线性回归损失函数 1.MAE损失 2.MSE损失 3.SmoothL1Loss 2、多分类损失函数--CrossEntropyLoss 3、二分类损失函数--BCELoss 4、总结 二、BP算法 1、前向传播 1.输入层(Input Layer)到隐藏层(Hidden Layer) 2.隐藏层(Hidden Layer)到输出层(Ou…...

6.584-Lab4A

6.584-LabA HomeworkReference CodeReference Blog 通过作业提供的概览图可以看出整个系统的组成:用户 Clerk 会发出命令(Get、Put、Append)到每个 Service,每个 Service 接收到命令后向下传递到 RaftCode 层,由 RaftC…...

语义版本控制

注意: 本文内容于 2024-11-27 22:25:05 创建,可能不会在此平台上进行更新。如果您希望查看最新版本或更多相关内容,请访问原文地址:语义版本控制。感谢您的关注与支持! 由于自己平时喜欢写点小玩意,自然而…...

深入理解HTML基本结构:构建现代网页的基石

深入理解HTML基本结构:构建现代网页的基石 在数字时代,HTML(超文本标记语言)是构建和设计网页的基础。了解HTML的基本结构对于任何希望掌握网页开发的人来说至关重要。本文将详细介绍HTML文件的基本骨架,包括其核心标…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

【深度学习新浪潮】什么是credit assignment problem?

Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...