React 项目中如何配置ESlint

直接上步骤

1. npm i eslint typescript -D

2.在项目根目录，运行  npx eslint --init

按下图来选择, 最后还有一项是安装插件选yes

 安装完插件后自动生成 eslinttrc.js 配置文件

3.设置底部状态栏

 4.引入prettier Now 插件

  因为eslint 不能 深入 jsx去格式化, 直接在vscode扩展商店中下载

  然后点击左下角设置,选工作区,右上角json设置-----如下图

 把下面这段全部复制过去就行

{
    "eslint.run": "onType",
    "eslint.options": {
      "extensions": [".js", ".vue", ".jsx", ".tsx"]
    },
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
  
    // 编辑器设置 - 保存时做格式化
    "editor.formatOnSave": true,
    // 编辑器设置 - 默认采用prettier-now做格式化
    // 如果使用的是prettier，这的设置应该是 esbenp.prettier-vscode
    "editor.defaultFormatter":"remimarsal.prettier-now",
  
    // 控制缩进
    "prettier.useTabs": false, // 缩进不使用tab，使用空格 
    "prettier.tabWidth": 2, // 缩进字节数
    
    // 函数声明时小括号前后要加空格
    // 如果你使用prettier这一项是不能做选择的，导致和eslint默认配置的冲突
    // 可以在百度中搜到很多的记录： https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
    "prettier.spaceBeforeFunctionParen": true,
  
    // react的jsx让>与结束标签同行
    "prettier.jsxBracketSameLine": true,
    "prettier.bracketSpacing": false, // 去掉数组内部前后的空格
    "prettier.semi": false, // 不要给语句加;
    "prettier.singleQuote": true, // 采用单引号
    "prettier.trailingComma": "none", // 不要尾随逗号,
    "prettier.printWidth": 80, // 每行超过80列就换行
  
    // 在.js中，写div按下tab就可以自动补全，而不需要写<div再补全
    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    },
    "eslint.alwaysShowStatus": true
  }

注: 1.无效的话,看看是不是与用户区的配置冲突了

      2.重启vscode