基于 create-react-app 创建的项目模板进行 eslint 和 prettier 的配置，以及配置 VsCode 编辑器能够实现保存时使用相应规则。

eslint 配置

全局安装 eslint
```
npm i -g eslint
```
eslint --init 初始化配置文件，具体配置成什么规则可查询官方文档
```
 eslint --init
```

prettier 配置

新建 .prettierrc.json 文件

    {
      "tabWidth": 2,  // 首行空两格
      "semi": true, // 代码尾部分号
      "singleQuote": true, // 双引号变单引号
      "trailingComma": "none", // 是否允许函数的最后一个参数有尾逗号
      "arrowParens": "avoid" // 箭头函数参数只有一个时是否要有小括号
    }

VsCode设置

下载插件 eslint，prettier

图片.png

如果不想打开设置更改的话，可以直接根目录新建 .vscode 文件夹，再创建 settings.json 文件

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 使用下载的 prettier 工具进行格式化，如果没有自己的 .prettierrc.json 文件会有一套默认格式化方案
}

也可以直接打开设置根据上面的 json 文件搜索相应项目进行配置。

全局导入 React

全局导入 React 会有 eslint 警告，而大多数时候不需要使用其中的功能，就像下面这样

图片.png
解决办法是在 eslint 中加入如下的配置

图片.png

VsCode中配置eslint和prettier

eslint 配置

prettier 配置

VsCode设置

全局导入 React