踩坑笔记(一) vscode配置eslint

本教程适用于eslint2.0+的版本 请注意自己vscode上eslint的版本

最近配置eslint踩了不少坑，最后发现是由于eslint版本的更新导致了配置的改变

1. 以管理员身份运行shell并 运行npm install eslint -g全局下载ESLint

2. 打开vs code，下载eslint插件，并重启vs code使插件生效

3. 在shell中进入工程目录(目录随意都可以 只要你可以找到)
输入eslint --init进行初始化 根据自己的需求进行选择 附上我的选择 结果以便大家参考 初始化后会在当前目录下生成名为.eslintrc.js的文件

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

4. 打开vscode File->Preferences->Setting（文件->首选项->设置） 在左侧列表中选中ESLint

5.在编辑框中插入

切记不要在可视化的界面输入地址 这两个不一样 在编辑栏内输入一下代码 配置文件才可生效

"eslint.options": 
{
	"configFile":{.eslintrc.js所在路径(去掉大括号)}
}

下面添加可实现自动修复的代码

这里可能和大家在网上看到的其他配置代码不一致 后边解释

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

下边的代码可以选择性的填入

    "eslint.run": "onSave",
    "eslint.debug": true,
    "eslint.format.enable": true,

解释

vscode上的esclint 2.0+ 版本有一定的修改 官方的解释如下

网上自动修复的代码 在2.0+的esclint 已经弃用了

网上一般还有一段eslint.validate的设置代码 在2.0+的版本也可以不用设置

这里附上官方文档的网址
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint