Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add eslint plugin guide in CRA migration #3383

Merged
merged 6 commits into from
Sep 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scripts/dictionary.txt
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ rslog
rspack
rspress
rstack
ruleset
selfsign
selfsigned
sirv
Expand Down
12 changes: 12 additions & 0 deletions website/docs/en/guide/migration/cra.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,18 @@ In the Rsbuild project, you can remove the dependency and code related to react-

You can read [Browser Compatibility](/guide/advanced/browser-compatibility) to understand how Rsbuild handles polyfills.

## Add ESLint plugin

CRA has the [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) enabled by default and includes a set of built-in ESLint rules.

In an Rsbuild project, if you need similar functionality, you can add [@rsbuild/plugin-eslint](https://github.com/rspack-contrib/rsbuild-plugin-eslint) and use [eslint-config-react-app](https://www.npmjs.com/package/eslint-config-react-app) as the ESLint ruleset.

```js title=".eslintrc.cjs"
module.exports = {
extends: 'react-app',
};
```

## Reading jsconfig.json

In non-TypeScript projects, CRA supports reading the `paths` field in jsconfig.json as the path alias.
Expand Down
12 changes: 12 additions & 0 deletions website/docs/zh/guide/migration/cra.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,18 @@ CRA 提供了 [react-app-polyfill](https://www.npmjs.com/package/react-app-polyf

你可以参考 [浏览器兼容性](/guide/advanced/browser-compatibility) 来了解 Rsbuild 是如何处理 polyfill 的。

## 添加 ESLint 插件

CRA 默认启用了 [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin),并内置了一套 ESLint 规则集。

在 Rsbuild 项目中,如果你需要保持类似的行为,可以添加 [@rsbuild/plugin-eslint](https://github.com/rspack-contrib/rsbuild-plugin-eslint),并使用 [eslint-config-react-app](https://www.npmjs.com/package/eslint-config-react-app) 作为 ESLint 规则集。

```js title=".eslintrc.cjs"
module.exports = {
extends: 'react-app',
};
```

## 读取 jsconfig.json

在非 TypeScript 项目中,CRA 支持读取 jsconfig.json 中的 `paths` 字段作为路径别名。
Expand Down
Loading