前端代码格式化和lint工具rome的使用，替代eslint，prettier

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"
      }
    }
  }
}

前端代码格式化和lint工具rome的使用，替代eslint，prettier