全局安装 ESLint 在 VSCode 中配置（解决 eslint.options 中 configFile 路径失效）

初心

既然已经在一些项目中用到了 eslint 来保证自己的代码规范，那当然是希望自己以后写的代码都遵从 eslint 的规范。

但是，作为一个程序员，肯定懒得去在每一个项目中都配置一次自己想要的规范，那么，ESLint 的全局安装，是必不可少的。

全局安装 ESLint

npm install eslint -g

按照 ESLint 官网以及翻遍的各个博客，在全局安装之后都需要通过 eslint --init 来生成一个目录文件

并且都是直接就成功了

eslint --init

可是，当我输入 eslint --init 后敲下回车，呈现在我眼前的却不是成功，而是失败

虽然跟博客中的教程有点不一样，但是并不是没有解决办法嘛

不就是缺少一个 package.json 文件嘛

本着贯彻不什么东西都丢 C 盘的思想方针，我去 E 盘 npm init 就好了

虽然好像报了个错，不过不要紧，.eslintrc.js 文件还是创建了

嗯，终点就在眼前了！

在 VSCode 中下载 ESLint 插件

根据插件的说明，再去 settings.json 中配置一下 configFile 就好了

这里我填写了我刚刚的 E 盘的位置

接下来就是验证结果的时候了！

新建一个空目录，新建一个 js 文件，随意的写几行代码，看看 eslint 会不会进行检测

大问题！

但是，我的 js 文件们确一点动静没有，不管写的多么不符合规范，eslint 就是不报错！！

可我在其他有在项目本地安装 eslint 的项目中，eslint 确乖乖的按照 .eslintrc 来给我检查代码呀

解决

在 eslint 插件中的第一句描述…

该插件会在当前打开的目录中寻找 ESLint ，如果没有找到，就会使用全局的 ESLint

这就解释了为什么我新建目录中的 js 文件为什么不会被检测了。。

原因

• 插件用的是我全局安装的 ESLint
• 但是我插件引入的 .eslintrc 确是另一个文件夹中的
• ESLint 除了要 .eslintrc 文件是还需要有依赖的
• 全局的 ESLint 当然找不到局部的依赖，于是就失效了

于是，找到全局下的 ESLint 所在的文件夹

在这个 node_modules 所在的文件夹下进行

npm init

再

eslint --init

创建 .eslintrc.js 文件

这样我寻找的依赖也是全局的了

在 vscode 中配置

这样我所有的 js 文件都会被检查到了

需要检查 html 中的 js 下载好插件配置一下就好

下面贴下我全局的 .eslintrc.js

module.exports = {
    'env': {
        'browser': true,
        'es6': true,
        'node': true
    },
    'extends': [
        'eslint:recommended',
        'plugin:vue/essential'
    ],
    'globals': {
        'Atomics': 'readonly',
        'SharedArrayBuffer': 'readonly'
    },
    'parserOptions': {
        'ecmaVersion': 2018,
        'sourceType': 'module'
    },
    'plugins': [
        'vue',
        'html', //检查html当中script标签
        'import',
        'promise'
    ],
    "settings": {
        'html/html-extensions': ['.html'] // 除js文件外，会去检查文件中script标签配置
    },
    'rules': {
        'indent': [
            'error',
            2
        ],
        'linebreak-style': [
            'error',
            'windows'
        ],
        'quotes': [
            'error',
            'single'
        ],
        'semi': [
            'error',
            'never'
        ],
        "space-before-function-paren": [
            "error",
            "always"
        ],
        "no-console": process.env.NODE_ENV === "production" ? "error" : "off"
    }
}

反思

后来发现，原来一切在 eslint 官网(起步) 中就有说到，如果全局安装 ESLint ，那么使用时所用的插件以及配置就必须也是全局的

还有插件中的第一句，如果当前打开的目录中没有 ESLint ，就会去找全局的

在此反思，下次一定好好看文档！

在这贴一下参考的博客
小火柴的蓝色理想
使用 VSCode + ESLint 实践前端编码规范
VSCode安装eslint代码检测