简介
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/
简单教程
注:这里只是简单演示,如果你的项目和下面不匹配,请前往官网查看详细的文档教程
- 在你的项目运行下面命令,安装 biome
npm install --save-dev --save-exact @biomejs/biome
- 安装 VS Code 插件
- 在你的项目的根目录下,找到配置文件 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" // 禁止存在未使用的导入,即:不能导入后不用}}}
}