eslint 保持项目风格统一，实现提示警告、保存自动修复警告

使用eslint后，我们看一张效果图（直接提示这种写法不符合规范，并且保存时会自动修复）

1. 操作步骤

（1）. 在vscode中，安装eslint插件 ./node_modules/.bin/eslint --init 配置

（2）. 在vscode 设置中添加校验规则等(附一张个人的配置)

{
    "workbench.iconTheme": "vscode-icons",
    "[typescriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "window.zoomLevel": 0,
    "editor.fontSize": 13,
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "html",
        "vue"
    ],
    // Set the default
    "editor.formatOnSave": true,
    // Enable per-language
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "terminal.integrated.shell.osx": "/bin/zsh"
    // "eslint.autoFixOnSave": true,
}

（3）. 在项目根目录 新增 .eslintrc.js 文件

module.exports = {
    root: true,
    parser: 'babel-eslint',
    extends: 'airbnb-base',
    // add your custom rules here
    'rules': {
        "no-var": "warn",
        "max-len": ["error", { "code": 120 }],
        "react/prop-types": ["error"],
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "@typescript-eslint/consistent-type-definitions": ["error", "interface"]
    }
}

大功告成，快去体验一下吧