vscode中使用eslint开发react

1. 安装vscode的Eslint

   
   image.png
   

   eslint
   2.为react项目安装eslint依赖

npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

 "eslint": "4.15.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-friendly-formatter":"^3.0.0",
"eslint-plugin-html":"^1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",

若为vue项目则
"eslint-plugin-vue":"^4.1.0"
3.在根目录添加配置文件.eslintrc.js

{
  // Use the AirBnB JS styleguide - https://github.com/airbnb/javascript
  "extends": "airbnb",

  // We use 'babel-eslint' mainly for React Native Classes
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "classes": true,
  },

  // jsx相关插件
  "plugins": ["react", "jsx-a11y", "import"]

  // We can add/overwrite custom rules here
  "rules": {
    // React Native has JSX in JS files，项目名后缀是.js和.jsx
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

    // React Native includes images via require("../images/example.png")
    "global-require": 0
  }
}

4.配置prettier
目的是配置 Prettier 按照 ESLint 的规则保存文件时**自动格式化 **JSX 代码。
首先在项目中安装prettier-eslint

npm install prettier-eslint --save-dev

5.最后在首选项->设置->settings.json中的用户自定义设置添加

"editor.formatOnSave": true,
  
"javascript.format.enable": false,

"prettier.eslintIntegration": true,