vscode中配置eslint在react项目中使用

通过create-react-app创建react项目，亲测.eslintrc.js文件中的配置可以生效，可以使用

1、安装eslint：

yarn add eslint；方式1、项目目录下安装
npm install -g eslint ；方式2、全局安装
npm install eslint --save-dev ；方式3、本地安装

我在电脑上使用yarn add eslint，安装到了我的项目目录下

2、初始化配置文件和在package.json中添加依赖，这些问题答案视自己的项目情况而定，中间会有很多警告，对这个没有什么影响。

eslint --init

此时项目中出现了.eslintrc.js文件，在package.json中查看可以发现多了新的依赖项：

3、在vscode中添加插件eslint

4、修改文件->首选项->设置->settings.json的配置

setting.json配置：

{
  "editor.fontSize": 16,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "files.autoSave": "off",
  "editor.formatOnType": true,
  "editor.formatOnSave": true,
  "files.associations": {
    "*.js": "javascriptreact"
  },
  "workbench.colorTheme": "Default Dark+",
  "emmet.triggerExpansionOnTab": true,
  "vsicons.projectDetection.disableDetect": true,
  "workbench.iconTheme": "vscode-icons",
  "editor.tabSize": 2,
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}

此时，在项目目录ctrl+shift+p输入eslint，确保eslint已经启用了，此时保存时eslint就可以自动检测代码了，像双引号还可以自动修复为单引号。

注意：配置    "eslint.validate":[
        "javascript",
        "javascriptreact",
        "jsx",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ]

如果为这样的话将会出现黄色波浪线，导致eslint不起作用

5、如果完成以上步骤后，遇到yarn start项目无法启动报错的问题，这个问题的原因是安装的eslint包是7.5而通过create-react-app脚手架工具创建的项目中自带的eslint包为6.6.0，版本冲突。

解决方法：

npm un eslint --save[会删除dependencies中的依赖]

npm install [email protected] -D 重新安装

 

问题详情：