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,安装到了我的项目目录下

vscode中配置eslint在react项目中使用_第1张图片

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

eslint --init

vscode中配置eslint在react项目中使用_第2张图片

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

vscode中配置eslint在react项目中使用_第3张图片

3、在vscode中添加插件eslint

vscode中配置eslint在react项目中使用_第4张图片

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

vscode中配置eslint在react项目中使用_第5张图片

vscode中配置eslint在react项目中使用_第6张图片

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 重新安装

 

问题详情:vscode中配置eslint在react项目中使用_第7张图片

你可能感兴趣的:(react,vscode插件)