介绍

最近新React项目尝试用Yarn 3和Yarn PnP，在配置开发环境时碰到一些问题，想起记录一下配置过程。

Yarn 3 (Yarn Berry)：饱受争议的新版本yarn。

Eslint: ECMAScript/JavaScript代码检查工具。

Prettier：前端最流行的代码格式化工具。

步骤

1. 创建React项目

yarn create react-app my-app --template typescript

项目创建后用VS Code打开my-app项目。

2. 安装yarn sdk vscode

yarn dlx @yarnpkg/sdks vscode

3. 安装eslint

yarn add -D eslint

4. 更新yarn sdk eslint

yarn dlx @yarnpkg/sdks

注意：Yarn 3（Yarn Berry），不要忘了这一步。

5. 初始化eslint

eslint --int

初始化过程： Screen Shot 2022-01-16 at 18.33.03.png

初始化命令会生成.eslintrc.js。

注意：如果已经升级到React 17，可以把"plugin:react/jsx-runtime"加在"extends"。

Screen Shot 2022-01-16 at 21.47.44.png

6. 安装eslint需要的packages

yarn add -D eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser

7. 安装VS Code Eslint插件

Screen Shot 2022-01-16 at 18.37.13.png

查看结果，Eslint: Show Output Channel。可以看到ESLint server is running. OK 了。 Screen Shot 2022-01-16 at 22.11.10.png

8. 安装Prettier

yarn add -D prettier

9. 安装和配置eslint-config-prettier

安装

yarn add -D eslint-config-prettier

配置：在.eslintrc.js加上"prettier"。

Screen Shot 2022-01-16 at 22.22.32.png

10. 更新yarn sdk prettier

yarn dlx @yarnpkg/sdks

注意：Yarn 3（Berry），不要忘了这一步。

Screen Shot 2022-01-16 at 22.24.43.png

11. 项目根目录创建.prettierrc和.prettierignore

# .prettierrc文件，自定义格式化规则
{ 
    "trailingComma": "all", 
    "tabWidth": 4, 
    "semi": false, 
    "singleQuote": true,
    "useTabs": false
}

# .prettierignore文件
build
coverage
**/node_modules/**/*
package.json
tsconfig.json
.yarn/*
yarn.lock

12. 安装VSCode Prettier插件

Screen Shot 2022-01-16 at 22.28.29.png

13. 使用Prettier

Windows: ctrl + shift + p => Format document

MacOS: command + shift + p => Format document

这时候会让你选默认formatter，选择prettier就OK。

总结

其他大部分步骤跟Yarn 1一样，除了yarn sdk的安装和更新（步骤2,4,10）。

Yarn 3：VSCode配置Eslint和Prettier

介绍

步骤