用 Biome 替代 ESLint 和 Prettier

简介

ESLint 和 Prettier
ESLint:代码质量检查工具,确保代码风格一致与无错误
Prettier:代码格式化工具,自动美化代码布局
所以:ESLint + Prettier == 能自动美化代码、自动检查代码错误的工具

Biome
Biome:集代码检查、代码美化于一体的”高性能“的工具
所以:Biome > ESLint + Prettier

对比

ESLint 和 Prettier 配置复杂,但生态成熟、对应资料多
Biome 配置相对简单、性能好,但生态尚未成熟、对应资料少
截至2025年2月19日,Biome 最新版本为 1.9.4

官网

Biome 官网链接:https://biomejs.dev/

简单教程

注:这里只是简单演示,如果你的项目和下面不匹配,请前往官网查看详细的文档教程

  1. 在你的项目运行下面命令,安装 biome
npm install --save-dev --save-exact @biomejs/biome
  1. 安装 VS Code 插件
    Biome插件
  2. 在你的项目的根目录下,找到配置文件 biome.json,根据你的需求修改文件内容即可(怎么修改?建议去官网查看配置属性。而对于比较懒的朋友,可参考我的个人开发规范,基本上常用的配置都在这里了,复制粘贴到你项目修改即可。另外,下面配有它的注释版,有看不懂的朋友,可以看看其注释)

无注释版

{"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json","vcs": {"enabled": false,"clientKind": "git","useIgnoreFile": false},"files": {"ignore": ["dist/*", "node_modules/*", ".vscode/*"],"ignoreUnknown": true},"organizeImports": {"enabled": false},"formatter": {"enabled": true,"indentStyle": "space","indentWidth": 2,"lineWidth": 80,"lineEnding": "lf","bracketSpacing": true},"javascript": {"formatter": {"semicolons": "always","quoteStyle": "single","trailingCommas": "none","arrowParentheses": "always"}},"linter": {"enabled": true,"rules": {"style": {"noVar": "error","useBlockStatements": "error","useConst": "error","useFilenamingConvention": {"level": "error","options": {"strictCase": true,"requireAscii": true,"filenameCases": ["PascalCase"]}},"useNamingConvention": {"level": "error","options": {"strictCase": true,"requireAscii": true,"conventions": [{"selector": { "kind": "const", "scope": "global" },"formats": ["CONSTANT_CASE"]}]}}},"performance": {"noReExportAll": "warn"},"suspicious": {"noDoubleEquals": "error","noDuplicateAtImportRules": "error"},"complexity": {"noExcessiveCognitiveComplexity": "error"},"correctness": {"noUnusedImports": "warn"}}}
}

含注释版

{"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", // 指定 Biome 配置文件的 JSON Schema,用于验证配置文件的结构和内容"vcs": {"enabled": false, // 禁用版本控制系统(VCS)集成"clientKind": "git", // 设置 VCS 客户端类型为 Git"useIgnoreFile": false // 禁用使用 Git 忽略文件},"files": {"ignore": ["dist/*", "node_modules/*", ".vscode/*"], // 忽略指定的文件和文件夹"ignoreUnknown": true // 忽略未知文件类型},"organizeImports": {"enabled": false // 禁用自动导入排序功能},"formatter": {"enabled": true, // 启用代码格式化功能"indentStyle": "space", // 设置缩进样式为空格"indentWidth": 2, // 设置缩进宽度为 2 个空格"lineWidth": 80, // 设置每行最大宽度为 80 个字符"lineEnding": "lf", // 设置行结束符为 LF(换行符)"bracketSpacing": true // 在对象字面量的大括号之间添加空格},"javascript": {"formatter": {"semicolons": "always", // 始终在语句末尾添加分号"quoteStyle": "single", // 使用单引号表示字符串"trailingCommas": "none", // 不添加尾随逗号"arrowParentheses": "always" // 始终在箭头函数的参数周围添加括号}},"linter": {"enabled": true, // 启用代码检查功能"rules": {"style": {"noVar": "error", // 禁止使用 var 声明变量"useBlockStatements": "error", // 强制使用块级语句(即:不能省略花括号,比如if只有一句)"useConst": "error", // 强制使用 const 声明常量(针对代码中只用了一次的变量)"useFilenamingConvention": {"level": "error", // 设置文件命名约定规则的诊断级别为错误"options": {"strictCase": true, // 强制严格的大小写规则,true是禁止连续大写,反之"requireAscii": true, // 强制文件名使用 ASCII 字符,比如:无法使用中文命名"filenameCases": ["PascalCase"] // 强制文件名使用 PascalCase 命名风格}},"useNamingConvention": {"level": "error", // 设置命名约定规则的诊断级别为错误"options": {"strictCase": true, // 强制严格的大小写规则,true是禁止连续大写,反之"requireAscii": true, // 强制使用 ASCII 字符,比如:无法使用中文命名"conventions": [{"selector": { "kind": "const", "scope": "global" }, // 对于 const,在全局范围内(强制全局常量使用 CONSTANT_CASE 命名风格)"formats": ["CONSTANT_CASE"] // 强制全局常量使用 CONSTANT_CASE 命名风格}]}}},"performance": {"noReExportAll": "warn" // 禁止导出所有内容,降低资源消耗,比如 import *},"suspicious": {"noDoubleEquals": "error", // 禁止使用双等号(==)进行比较,只能用三等号 (===),null除外"noDuplicateAtImportRules": "error" // 禁止在导入规则中出现重复的 import 语句},"complexity": {"noExcessiveCognitiveComplexity": "error" // 禁止过高的认知复杂度,比如嵌套超过15个if-else语句},"correctness": {"noUnusedImports": "warn" // 禁止存在未使用的导入,即:不能导入后不用}}}
}

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

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

相关文章

6.3 DBMS的功能和特征

文章目录 DBMS的6大功能DBMS的3个特征DBMS的分类 DBMS的6大功能 DBMS包含数据定义,数据库操作(检索、插入、修改、删除),数据库运行管理(保证多用户环境下正常运行),数据组织、存储、管理&…

力扣hot100——找到字符串中的所有字母异位词

给定两个字符串 s 和 p,找到 s 中所有 p 的 异位词 的子串,返回这些子串的起始索引。不考虑答案输出的顺序。 解法思路: 1. // 判断字符相等,其实就是给定一个定长的窗口去滑动查找子串,为了便于判断将p 与窗口中的子…

前端插件使用xlsx-populate,花样配置excel内容,根据坐添加标替换excel内容,修改颜色,合并单元格...。

需求要求:业务人员有个非常复杂得excel表格,各种表头等,但是模板是固定得。当然也可以实现在excel上搞出各种表格,但是不如直接用已有模板替换其中要动态得内容方便,这里我们用到CSDN得 xlsx-populate 插件。 实列中我…

未来AI方向落地场景:小语言模型,super_private_agent

未来AI方向落地场景:小语言模型,super_private_agent 目录 未来AI方向落地场景:小语言模型,super_private_agent小语言模型super - private - agent(注重隐私的智能代理)碳基生命和硅基生命交互界面面向agent的专用交互协议和数据接口从web平台经济到网络平台举例说明社交…

Coze扣子新功能详解

今晚(2025-01-24)扣子再次进行更新 主要更新内容: 搭建小程序和 H5 用户界面时,支持使用音频组件播放音频内容 数据库操作体验提升 界面优化:对数据库详情界面进行了重新设计,并将工作流运行数据库的测试数据位置从原工作流底…

汇能感知的光谱相机/模块产品有哪些?

CM020A 分辨率:1600H1200V 光谱范围:350~950nm 光谱分辨率:1nm 接口:USB2.0 帧率:16001200 (6帧) 输出格式:Raw 8bit FOV:D73.5H58.8V44.1 相机尺寸:505055mm VM02S10 分辨率…

Ollama 本地GUI客户端:为DeepSeek用户量身定制的智能模型管理与交互工具

Ollama 本地GUI客户端:为DeepSeek用户量身定制的智能模型管理与交互工具 相关资源文件已经打包成EXE文件,可双击直接运行程序,且文章末尾已附上相关源码,以供大家学习交流,博主主页还有更多Python相关程序案例&#xf…

OpenMv识别色块通过串口发给STM32

硬件连接 1、Openmv端 这里OpenMV端仅作为数据的发送端,所以只需要共地,以及OpenMV的TX(P4)与开发板的RX端连接即可。 2、STM32端 将开发板连接STM芯片RX端与转串口TX端的跳帽取下,再将OpenMV的TX端(P4)与STM的RX连接。如果使用USB转TTL则将TTL的RX端与STM的TX端连接…

以太网交换基础(涵盖二层转发原理和MAC表的学习)

在当今的网络世界中,以太网交换技术是局域网(LAN)的核心组成部分。无论是企业网络、学校网络还是家庭网络,以太网交换机都扮演着至关重要的角色。本文将详细介绍以太网交换的基础知识,包括以太网协议、帧格式、MAC地址…

菜鸟之路Day15一一IO流(一)

菜鸟之路Day15一一IO流(一) 作者:blue 时间:2025.2.8 文章目录 菜鸟之路Day15一一IO流(一)0.概述1.初识IO流1.1.什么是IO流?1.2.IO流的作用1.3.IO流的分类 2.IO流的体系结构3.字节输出流的基本…

汽车零部件开发应该具备哪些编程思维?

目录 1、功能安全思维 2、实时性与确定性思维 3、可靠性和冗余思维 4、硬件软件协同思维 5、CAN总线通信思维 6、故障诊断和自诊断思维 7、功耗优化思维 8、软件更新和版本管理思维 9、用户体验与安全性思维 汽车零部件开发中,嵌入式软件在车辆系统中的作用…

idea拉取合并后的分支

文章目录 远程拉取代码.更新本地库拉取后本地库就有了合并后的代码 远程拉取代码.更新本地库 拉取后本地库就有了合并后的代码

1-18 GIT设置公钥

1-1 GIT如何设置公钥 1.0 注册账号 这个应该都是会的,就不做介绍了 2.0 设置公钥 PWD的作用是查看文件的路径 ssh-keygen -t ed25519 -C "Gitee SSH Key" 读取公钥文件: cat ~/.ssh/id_ed25519.pub 3.0 测试 查看绑定的用户名和邮箱&#xff1…

【MySQL】 常见数据类型

MySQL常见数据类型 1.整数类型2.浮点数类型3.定点数类型4.bit类型5.字符串类型 5.1char和varchar类型5.2日期类型和时间类型5.3enum和set类型 1.整数类型 整数类型默认都是有符号整数 类型名称 字节数 类型说明 tinyint 1 带符号的范围-128127,无符号范围…

DeepSeek 部署中的常见问题及解决方案

DeepSeek 作为一款智能语义搜索框架,其本地化部署在实际操作中可能因环境配置、权限管理、硬件资源等因素遇到多种问题。本文结合当前市面上的实践经验,整合了部署中的常见问题及解决方案,帮助用户高效排查和优化部署流程。 一、权限不足问题…

《机器学习数学基础》补充资料:求解线性方程组的克拉默法则

《机器学习数学基础》中并没有将解线性方程组作为重点,只是在第2章2.4.2节做了比较完整的概述。这是因为,如果用程序求解线性方程组,相对于高等数学教材中强调的手工求解,要简单得多了。 本文是关于线性方程组的拓展,供…

Jenkins介绍

什么是Jenkins Jenkins 是一个开源的自动化服务器,主要用于持续集成和持续交付(CI/CD)。它帮助开发团队自动化构建、测试和部署软件,从而提高开发效率和软件质量。 如果一个系统是前后端分离的开发模式,在集成阶段会需…

module ‘cv2.dnn‘ has no attribute ‘DictValue‘解决办法

module ‘cv2.dnn‘ has no attribute ‘DictValue‘解决办法 pip install opencv-python4.7.0.72 -i https://pypi.tuna.tsinghua.edu.cn/simple 测试: python -c"import cv2"

【全栈】SprintBoot+vue3迷你商城-细节解析(2):分页

【全栈】SprintBootvue3迷你商城-细节解析(2):分页 往期的文章都在这里啦,大家有兴趣可以看一下 后端部分: 【全栈】SprintBootvue3迷你商城(1) 【全栈】SprintBootvue3迷你商城(…

kubeadm拉起的k8s集群证书过期的做法集群已奔溃也可以解决

kubeadm拉起的k8s集群证书过期的做法 这个是很久之前遇到的了,今天有空(心血来潮)就都回忆回忆写在这里为爱发光,部分内容来自arch先生(死党)的帮助。有时候有很多部门提了建k8s的需求,有些是临…