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/Nt100%, 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文件的基本骨架,包括其核心标…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
