用 Biome 替代 ESLint 和 Prettier

news2025/2/22 13:51:34

简介

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.coloradmin.cn/o/2301292.html

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

相关文章

golang深度学习-基础篇

基础数据结构及类型 字符型-string string 是Go标准库 buildin 内置的一个基础数据类型。string是由8比特字节的集合,通常不一定是UTF-8编码的文本。string可以为空(长度为0),但不会是nil。 string is the set of all strings of 8-bit bytes, conventionally but not nec…

win11安装wsl报错:无法解析服务器的名称或地址(启用wsl2)

1. 启用wsl报错如下 # 查看可安装的 wsl --install wsl --list --online此原因是因为没有开启DNS的原因,所以需要我们手动开启DNS。 2. 按照如下配置即可 Google的DNS(8.8.8.8和8.8.4.4) 全国通用DNS地址 (114.114.114.114) 3. 运行以下命令来重启 WSL…

技术总结 | MySQL面试知识点

存储引擎 Mysql 中的存储引擎 查询存储引擎的命令 show engines; Archive 只支持 insert 与select操作, 不支持索引 不支持事务 适用于存储需要长期保存,但是很少访问的数据,例如 历史日志 BlackHole 不存储数据,但是会记录写入操作 适用于性能测试 语言验证等情况 MyISAM…

Linux下Ollama下载安装速度过慢的解决方法

问题描述:在Linux下使用默认安装指令安装Ollama,下载安装速度过慢,进度条进度缓慢,一直处于Downloading Linux amd64 bundle中,具体如下图所示: 其中,默认的Ollama Linux端安装指令如下&#xf…

关于redis的主从复制(下)

目录 全量复制 关于replid和runid 部分复制 补充问题 实时复制 psync可以从主节点获取全量数据,也可以获取一部分数据。主要就是看offset的进度,如果offset写作-1,就是获取全量数据。offset写具体的正整数,则是从当前偏移量位…

uniapp uni.request重复请求处理

类似这种切换tab时,如果操作很快并且网络不太好,就出现数据错乱,在网上查了一圈,有一个使用uview拦截处理的,但是原生uni.requse没有找到详细的解决办法,就查到使用 abort 方法,我自己封装了一个…

【大模型】DeepSeek:AI浪潮中的破局者

【大模型】DeepSeek:AI浪潮中的破局者 引言:AI 新时代的弄潮儿DeepSeek:横空出世展锋芒(一)诞生背景与发展历程(二)全球影响力初显 探秘 DeepSeek 的技术内核(一)独特的模…

SOME/IP--协议英文原文讲解8

前言 SOME/IP协议越来越多的用于汽车电子行业中,关于协议详细完全的中文资料却没有,所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块: 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 4.2 Speci…

用PyInstaller构建动态脚本执行器:嵌入式Python解释器与模块打包 - 简明教程

技术场景: 需分发的Python工具要求终端用户可动态修改执行逻辑将Python环境与指定库(如NumPy/Pandas)嵌入可执行文件实现"一次打包,动态扩展"的轻量化解决方案。 ▌ 架构设计原理 1. 双模运行时识别 # 核心判断逻辑…

在做题中学习(89):螺旋矩阵

解法:模拟 思路:创建ret数组,用变量标记原矩阵的行数和列数,遍历一个元素就push_back进ret数组,每次遍历完一行或一列,相应行/列数--,进行顺时针螺旋遍历到为0即可。 细节:要有边界…

从零搭建微服务项目Base(第5章——SpringBoot项目LogBack日志配置+Feign使用)

前言: 本章主要在原有项目上添加了日志配置,对SpringBoot默认的logback的配置进行了自定义修改,并详细阐述了xml文件配置要点(只对日志配置感兴趣的小伙伴可选择直接跳到第三节),并使用Feign代替原有RestT…

【数据分析】通过个体和遗址层面的遗传相关性网络分析

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍原理应用场景加载R包数据下载函数个体层面的遗传相关性网络分析导入数据数据预处理构建遗传相关性的个体网络对个体网络Nij进行可视化评估和选择最佳模型评估和选择最佳模型最佳模型…

在 macOS 的 ARM 架构上按住 Command (⌘) + Shift + .(点)。这将暂时显示隐藏文件和文件夹。

在 macOS 的 ARM 架构(如 M1/M2 系列的 Mac)上,设置 Finder(访达)来显示隐藏文件夹的步骤如下: 使用快捷键临时显示隐藏文件: 在Finder中按住 Command (⌘) Shift .(点&#xff…

【产品经理】需求分析方法论+实践

阐述了需求分析的基本认知,包括需求分析的定义、原则和内容。接着,文章详细介绍了需求分析的十个步骤,从收集需求到结果评审,为产品经理提供了清晰的操作指南。 作为产品经理,需求分析是一个最基本的工作,但…

Windows平台的小工具,功能实用!

今天给大家分享一款超实用的Windows平台监控工具,堪称“桌面小管家”,能帮你轻松掌握电脑的各种运行状态,比如网速、下载速度、内存和CPU占用率等常用参数,让你的电脑运行情况一目了然。 TrafficMonitor 网速监控悬浮窗软件 这款…

SAP-工单技术性关闭操作手册

文章目录 单个工单批量处理TECO和CLSD标识的区别 单个工单 事务代码CO02,输入工单号后回车 功能-》限制处理-》技术性完成 工单状态更改 撤销TECO操作 CO02输入工单号,功能-》限制处理-》撤销技术性完成 批量处理 事务代码COHV,点击生…

Aseprite绘画流程案例(1)——画相机图标

原图: 步骤一:打开需要参照的图标 步骤二:将参照的图片拖放到右边,作为参考 步骤三:新建24x24的画布,背景为白色的画布 步骤四:点击菜单栏——视图——显示——像素网格(如果画布已经…

安装海康威视相机SDK后,catkin_make其他项目时,出现“libusb_set_option”错误的解决方法

硬件:雷神MIX G139H047LD 工控机 系统:ubuntu20.04 之前运行某项目时,处于正常状态。后来由于要使用海康威视工业相机(型号:MV-CA013-21UC),便下载了并安装了该相机的SDK,之后运行…

云计算架构学习之Ansible-playbook实战、Ansible-流程控制、Ansible-字典循环-roles角色

一、Ansible-playbook实战 1.Ansible-playbook安装软件 bash #编写yml [rootansible ansible]# cat wget.yml - hosts: backup tasks: - name: Install wget yum: name: wget state: present #检查playbook的语法 [rootansible ansible]…

网络工程师 (47)QOS

一、概念与原理 QOS即服务质量(Quality of Service)是一种网络技术,用于管理和保证网络中不同类型的质量和性能。它通过设置优先级和带宽限制等策略,确保关键应用(如视频会议、语音通信)的数据包能够在网络…