在react项目中使用ESlint

​持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

背景

最近使用 create-react-app 创建了一个项目。但是众所周知的是，这个脚手架创建的项目并没有默认加入 Eslint 等 lint 插件来规范代码。

考虑到项目中很多项目没有使用类似的代码检查工具，为了规范开发。这次有必要记录一下流程。 eslint按指定的规则去检查我们的代码（也可以一定的程度修正代码）

最好的时间点是创建项目时使用

vue-cli集成了eslint的配置，可以让我们自己选择

cra没有集成eslint，需要我们自己配置

那如何配置呢？

1.在项目中安装eslint以及对应的规则包

npm i eslint

2.配置eslint的配置文件（可选的）。执行eslint的命令

npx eslint --init

        1、提供交互界面，用户去选择

        2、根据选择去自动下包

        3、自动生成配置文件

​编辑

3.配置开发工具【vscode】能ctrl+s自动修复格式错误

        1、在vscode中安装eslint插件

eslint.autoFixOnSave 用来进行保存时自动格式化，但是默认只支持 javascript .js 文件

eslint.validate 用来配置作用的文件类型。

然后我们在写完代码以后，点击保存，如果存在错误，代码下面就会直接出现红色的波浪线，完成配置！！！

        2、在vscode设置，让eslint插件显示在菜单栏上

"eslint.alwaysShowStatus": true

        3、配置 设置工作区设置 --> 自动创建.vscode/settings.json文件，内容如下(不要配置用户级别的配置！)：

{
    "eslint.run": "onType",
    "eslint.options": {
      "extensions": [".js", ".vue", ".jsx", ".tsx"]
    },
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}

        4、检查效果。

                ctrl+s格式化了

。