VScode 对eslint 的配置

开发的时候经常出现eslint报错的问题，现在我们来配置一下。

步骤一：

在VScode中安装eslint插件

在VScode中setting中设置

步骤二：

在webpack.config.js配置

  module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                options: { fix: true },//保存时自动修复eslint的缩进、空格等问题
                exclude: /node_modules/,//对node_modules文件夹中的eslint进行检查
            },
         ]
   }

步骤三：

给你的项目文件根目录中创建一个.vscode文件夹，在这个文件夹里面创建一个setting.json文件。

{
    "eslint.validate": [//包含下方后缀的文件
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "editor.codeActionsOnSave": {//编辑器对代码保存时的操作
        "source.fixAll.eslint": true, //自动修复
    },
    "cSpell.words": [
        "zhangsan"
    ]
}

步骤四：

给你的项目文件根目录中创建一个.eslintrc.js文件，利用airbnb来补充相关的配置规则。

首先安装airbnb相关的插件

cnpm i eslint eslint-config-airbnb eslint-loader eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks and eslint-plugin-jsx-a11y -D

然后在.eslintrc.js文件中配置

module.exports = {
    "parser": "babel-eslint",
    "extends": "airbnb",//继承airbnb规则
    "rules": {//这个地方是对airbnb一些规则的重写
        "no-console": "off",//如果这个不配置的话，我们使用congsole.log时会报错的
        "linebreak-style": "off",//换行样式
        "semi": "error",
        "linebreak-style": "off",
        "eol-last": "off"
    },
    "env": {//使用环境
        "browser": true,//代码将会运行在浏览器中，如果为false的话就无法使用window变量上的相关信息
        "node": true
    }
}