全局配置Eslint实现Standard标准，以遍在各个Vue项目通用

转载于我个人博客

至于为什么我这种接触前端没几天的新手要浅谈这个，说来话长。🤯
鏖战半天才出配置好全部的eslint设置。为了保持standard标准的js代码格式，并且可以在vue项目中检查(同时可以检查.vue文件)，不得不使用eslint进行代码检查。

本文将介绍全局eslint配置，实现standard标准，使得在之后用Vue-cil创建项目时可以不配置代码检查，减小项目体积

Eslint的配置

而在配置eslint的过程中，我希望把语法检查和项目分离，毕竟语法检查不应该是项目的内容，而是程序员自己的个人配置，所以我希望把eslint安装在全局环境，在我用vscode写代码时，所有js脚本，web项目，都可以自适应的进行检查。但是就这样简单的需求,实现的却非常坎坷😅

为了完成这个目标，需要一下几步：

• 安装eslint的vscod插件
• 全局安装eslint以及相关的组件
• 创建并填写.eslintrc.js文件
• 修改vscode-eslint插件的设置

安装eslint的vscod插件

在vscode中，eslint的提示通过下面这个插件显示，安装即可，这一步还算正常

全局安装eslint以及相关的组件

关于npm的配置和全局包的保存位置就不赘述，直接进行全局安装相关包，我是放在了C:/nodejs/node_global/node_modules的位置。
先全局安装全部需要的包：

npm install eslint  eslint-plugin-html eslint-plugin-vue eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-n -g

因为要使得代码符合standard的标准，知道需要依赖这些包能实现standard标准也是费了不少功夫，最后还是直接让vue-cil创建一个局部安装eslint的项目，通过看它的package.json来看依赖的包，真抽象。

如果无所谓是不是standard标准，只安装eslint和它的vue、html插件就好了：

npm install eslint  eslint-plugin-html eslint-plugin-vue -g

我的最终全局包截图

创建并填写.eslintrc.js文件

在刚才全局安装包的位置创建这个文件，其中写入配置，这将作为全局的eslint配置。

我的配置如下：

module.exports = {
  root: true,
  parserOptions: {
    parser: '@babel/eslint-parser',
    // 指定使用的 JavaScript 语言特性，通常与你的项目需求一致
    sourceType: 'module', // 或 'script'
    requireConfigFile: false// 禁用配置文件检查
  },
  env: {
    es6: true,
    browser: true,
    node: true
  },
  **// https://github.com/standard/standard/blob/master/docs/RULES-en.md**
  extends: [
    'standard',
    'plugin:vue/vue3-essential'
  ],
  // required to lint *.vue files
  plugins: [
    'html',
    'vue'
  ],
  /**
       * 每个规则有【3】个错误级别。
       * off或0: 关闭该规则；
       * warn或1: 开启规则，使用警告级别的错误，不会导致程序退出；
       * error或2: 开启规则，使用错误级别的错误，当被触发的时候，程序会退出。
       */
  rules: {
    // 关闭驼峰命名检查
    camelcase: 'off',
    // 允许单词组件名
    'vue/multi-word-component-names': 0
    /*
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    quotes: [0, "single"],
    // 要求操作符周围有空格
    "space-infix-ops": 0,
    // 要求或禁止使用分号代替 ASI
    semi: 0,
    // 强制函数中的变量要么一起声明要么分开声明
    "one-var": 0,
    // 强制在 function的左括号之前使用一致的空格
    "space-before-function-paren": 0,
    // 强制在逗号前后使用一致的空格
    "comma-spacing": 0,
    // 强制在注释中 // 或 /* 使用一致的空格
    "spaced-comment": 0,
    // 要求或禁止块内填充
    "padded-blocks": 0,
    // 强制在关键字前后使用一致的空格
    "keyword-spacing": 0,
    // 要求或禁止末尾逗号
    "comma-dangle": 1,
    // 要求使用 === 和 !==
    eqeqeq: 1
    */
  }
}

每次修改配置后需要重启vscode才生效。

这个配置是真的折磨，各种报错，但也在不断的报错中，知道了1.哪些依赖包要安装，2.插件拓展怎么添加，3.解释器的选择

1. 根据报错信息已经知道全部要的包了，虽然折磨
2. eslint-config-xxx这是拓展(extend)文件的包，在配置文件中只用写xxx即可，eslint-plugin-xxx是插件的包，在配置文件的插件(plugins)中也只用写xxx。所以要实现standard标准，需要的不是standard本身这个包而是eslint相关的包。
3. 可以看到，我添加了解释器选项，也可以不添加

parserOptions: {
parser: ‘@babel/eslint-parser’,
// 指定使用的 JavaScript 语言特性，通常与你的项目需求一致
sourceType: ‘module’, // 或 ‘script’
requireConfigFile: false// 禁用配置文件检查
}

我使用了babel的解释器，如果使用，就必要要额外全局安装一个包：@babel/eslint-parser，注意，这是2023年的要求，以前的各种帖子说安装babel-eslint的早过时了，安装了后也需要开启禁用配置文件检查，不然会检测你的babel的配置文件，这个自然是没有的，毕竟全局，不在项目里。

另一方面，在不断的查阅资料中发现，Standard官方已经不推荐使用eslint-config-standard等一系列包来进行实现standard标准了，它有自己的vscode插件，有自己的生态，作为代码检查工具，也更轻量，主打无配置文件，即拿即用。

配置文件中我写明了Standard的项目地址

// https://github.com/standard/standard/blob/master/docs/RULES-en.md

这个vscode也有相关插件，但是只能应用于JavaScript代码
StandardJS本身不直接支持Vue文件，因为它主要关注于纯JavaScript文件的规范。要在Vue.js项目中使用StandardJS规范，需要结合使用ESLint，因为ESLint可以与Vue文件一起使用，并且可以配置它来修改StandardJS规范。

如果只要写js代码，完全可以使用 StandardJS 而不使用 ESLint 或其他代码规范工具。StandardJS 提供了一种简单的、零配置的方式来规范 JavaScript 代码风格，它强调一种一致和简单的编码风格，不需要手动配置规则或插件。

修改vscode-eslint插件的设置

最后为了实现全局设置，需要将vscode的eslint插件的setting文件进行设置，将安装的eslint包的插件(eslint-plugin-xxx)默认指向全局包的安装文件夹，把配置文件默认指向刚才创建的文件。

同时也可以添加是否默认自动修复，可选。

    // ESLint 自动修复
    "editor.codeActionsOnSave":{
    "source.fixAll": true
    },
    //插件位置
    "eslint.nodePath": "C:/nodejs/node_global/node_modules",
    "eslint.options": {
        // 全局配置文件位置
        "overrideConfigFile": "C:/nodejs/node_global/node_modules/.eslintrc.js",  
    },

完成了以上操作，应该就配置成功了，接下来vue-cil创建项目时就可以不安装任何eslint相关的依赖了！虽然现在说明简单，过程还是折磨的，访问了各大论坛，看了好多官方文档。web时刻在发展，很可能别人说的方法，官方如今已经不支持了，需要最新信息。

关注Eslint的输出，这样才是正确的运行状态：

最后附上几个报错和解决：

Parsing error: AST is missing range information

你正在使用的解析器可能存在问题或不完全支持某些特定的语法结构，更换解释器即可。

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): “jsx”, “flow”, “typescript”.

在设置中把解释器的选择包含在其中，而不要写在外面
具体：
parserOptions: {
parser: ‘@babel/eslint-parser’
}

参考资料

实践：ESLint在Vue项目中的使用
vscode 中全局配置 eslint
Visual Studio Code 配置 ESLint 规范前端编码
eslint-plugin-standard的废除
Standard官方项目