rome是facebook开发的专用于前端工程化的工具，目标在于取代babel，eslint，webpack，prettier和jest。
目前fommater和linter的功能已经可用，也就是可以代替prettier和eslint。
rome的优势在于，集成了这些前端的工具链，这样新手学习配置起来会更容易。
很多前端工具链都会解析AST，rome把这些工具统一，减少不必要的解析过程，提升性能。同时rome是用rust编写的，性能也会比js编写的工具链高。
在项目文件很多的时候，这个性能会带来优势。不过如果不是非常大的项目影响不大，我觉得eslint和prettier已经挺快了（而且还有cache和lint-stage，不需要对所有文件执行）。执行时间更多的还是打包环节。
真正的优势在于，有vscode插件，这下关掉eslint和prettier这两个插件，vscode内存占用就能降下来了。应该也会更流畅。。。
安装
pnpm add --save-dev rome
yarn add rome --save-dev
npm install --save-dev rome
然后我们执行init，生成配置文件
pnpm rome init
yarn rome init
npx rome init
{
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
配置文件只支持了json比较简单，不像prettier和eslint支持一堆的格式。
Formatter配置
rome的Formatter采用和prettier类似的理念，配置项精简。
但是配置项命名和prettier不一样，所以我直接搬过来还要查一下。
直接查看命令行帮助就能看到有那些配置项
只要把这些短杠连接的参数改成驼峰在json里配置就可以了
pnpm rome format --help
Rome Formatter
USAGE:
rome format [OPTIONS] <INPUTS...>
INPUTS can be one or more filesystem path, each pointing to a single file or an entire directory to be searched recursively for supported files
OPTIONS:
--write 原地重写文件，而不是输出不同到控制台
--skip-errors 跳过有语法错误的文件
--max-diagnostics 限制诊断信息的条数(default: 50)
--verbose Print additional verbose advices on diagnostics
--indent-style <tabs|space> 缩进样式 (default: tabs)
--indent-size <number> 缩进大小 (default: 2)
--line-width <number> 行宽度(default: 80)
--quote-style <single|double> 引号样式(default: double)
--quote-properties <as-needed|preserve> 对象中的属性是否加引号 (default: as-needed)
--trailing-comma <all|es5|none> 尾逗号 (default: all)
--semicolons <always|as-needed> 结尾分号 (default: always)
--stdin-file-path <string> A file name with its extension to pass when reading from standard in, e.g. echo 'let a;' | rome format --stdin-file-path file.js
目前支持的语言，还只有js，ts还有json，所以html之类的我们还是用prettier格式化
| Language | Parsing | Formatting | Linting |
|---|---|---|---|
| JavaScript | ✅ | ✅ | ✅ |
| TypeScript | ✅ | ✅ | ✅ |
| JSX | ✅ | ✅ | ✅ |
| JSON | ✅ | 💻 | 🚫 |
| HTML | 🚫 | 🚫 | 🚫 |
| CSS | 🚫 | 🚫 | 🚫 |
| Markdown | 🚫 | 🚫 | 🚫 |
默认配置和prettier的区别
indent-style //这个prettier里面默认是空格
trailing-comma //这个prettier默认值是es5，也就是兼容es5的情况有尾逗号（不过现在都用ts了，所以我认为都加尾逗号是更合适的，这样复制粘贴比较方便）
我的配置
不喜欢结尾加分号，单引号不需要按shift键更方便
{
"$schema": "./node_modules/rome/configuration_schema.json",
"javascript": {
"formatter": {
"semicolons": "asNeeded",
"quoteStyle": "single"
}
},
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"ignore": []
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
ignore注释
// rome-ignore format: <explanation>
举个例子
const expr =
// rome-ignore format: the array should not be formatted
[
(2 * n) / (r - l),
0,
(r + l) / (r - l),
0,
0,
(2 * n) / (t - b),
(t + b) / (t - b),
0,
0,
0,
-(f + n) / (f - n),
-(2 * f * n) / (f - n),
0,
0,
-1,
0,
];
Linter配置
lint目前还有很多规则没有实现，https://github.com/rome/tools/issues/3953，还在搬运中，
所以还需要等一段时间体验才比较好，我在项目里试了一下倒是没有用出和eslint的区别来，有一些新的错误提示。
pnpm rome check --help
Rome Check: Run the linter on a set of files
USAGE:
rome check <INPUTS...>
INPUTS can be one or more filesystem path, each pointing to a single file or an entire directory to be searched recursively for supported files
OPTIONS:
--apply Apply safe fixes
--apply-suggested Apply safe and suggested fixes
--max-diagnostics Cap the amount of diagnostics displayed (default: 20)
--verbose Print additional verbose advices on diagnostics
Safe fixes 不会改变代码的语义，可以在没有review的时候使用
Suggested fixes 也许会影响代码的执行，需要手动review
ignore注释
// rome-ignore lint: <explanation>
// rome-ignore lint/correctness/noDebugger: <explanation>
解释一下
-
rome-ignore是注释的开头 -
lint:抑制lint -
(correctness/noDebugger): 可选，想要抑制的规则 -
<explanation>解释原因
配置示例
下面就是我浏览一遍文档后在项目中的配置了
其中noExplicitAny规则，我看vitejs的eslint配置里面也是关了这个，ts中完全不用any，有时候业务代码里面就很费事。然后每次不好定义类型的时候加注释，也很麻烦。不如直接关了省事。
useSelfClosingElements是没有子节点的父节点用那种自闭型的。这个其实是可以apply-suggested 一键修复的，不过改的文件比较多。因为vscode每次会自动帮你补上tag，所以这个样式要遵守的话，平时就要麻烦一些
a11y是可访问性有关的内容，其中useKeyWithClickEvents要求一个jsx加了点击事件以后，还必须加上onKey事件，所以我也给关了。
{
"$schema": "./node_modules/rome/configuration_schema.json",
"javascript": {
"formatter": {
"semicolons": "asNeeded",
"quoteStyle": "single"
}
},
"files": {
"ignore": ["./dist/*"]
},
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space"
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"suspicious": {
"noExplicitAny": "off"
},
"style": { "useSelfClosingElements": "off" },
"a11y": {
"useKeyWithClickEvents": "off"
}
}
}
}
