⚡Eslint项目实战中，容易混淆的一些小知识点

前言

面试中如果问到你知道什么是前端工程化吗？

不要只围绕着模块化、组件化、自动化去说啦，规范化也是其中的一个重要环节~~~

规范化通常在带团队的时候很有用，给自己的小队制定一个合适的规范，更有利于提高项目质量和团队产出。

俗话说：心往一处使，力往一处用嘛~~~，统一的规范在代码可读性、可维护性上也是加了大大的一分~~~

后面准备往管理方向转的小伙伴更得看一看啦，本篇主要围绕规范化中的代码规范展开的。

这篇文章是针对我自己之前遇到的痛点，一些新手应该很容易晕呼呼的一些小知识点。

我在网上参考很多大神的高赞文章把这些小知识点提炼了出来，学习过程中自己也收获了很多，这里分享给小伙伴们。

正文开始

首先，先把我的一个疑惑抛出来，都是为了代码编写能规范化，看起来更像正规军一点，那Prettier和Eslint有啥区别呢？

Prettier

• 对代码的格式进行统一规范

Eslint

• 对代码的质量进行统一规范

1, vscode的eslint插件和npm里的eslint包

在实际项目的开发中，这两个大家应该都遇到过~~~

小伙伴们有没有像我一样始终有一泡浓厚的疑问：这两到底有啥关联呢？

1.1，vscode里的eslint插件

因为是插件是vscode人家自己的，我们写代码也是在vscode里写的。

所以，这里我们如果在.eslintrc.js文件中设置开启console校验，校验等级为警告级别： 'no-console': 'warn'（不要慌~~~具体的eslint配置会有中文翻译，见下文eslintrc.js参数详解）

会实时在写代码的时候出现校验的结果，如下图：

1.2，npm里的eslint包

需开发者手动触发，得到校验结果， 比如：

检测依据是.eslintrc.js的配置~~~

.eslintrc.js文件中设置开启console校验，校验等级为警告级别： 'no-console': 'warn'（不要慌~~~见下文eslintrc.js参数详解）

之后，项目运行npm run lint后，控制台就会给你提示，如下图：

package.json中的lint命令，此篇文章小伙伴们不用过多关注这个，vue-cli帮你搞好了

1.3，.vscode里的eslint配置规则和上面又有啥关系呢?

哈哈哈，看到这里小伙伴是不是大脑袋又升起了一泡疑问？

我项目里记得有个.vscode文件夹也是用来设置eslint配置，这又是什么鬼啊？？？

直接上执行顺序：独立配置文件 > vscode工作区配置 > vscode用户配置

• 独立配置文件: .xxx文件，比如.eslintrc.js文件

• vscode工作区配置: 指的就是你项目中的那个.vscode，如下图：

• vscode用户配置: vscode在setting.json里的配置，如下图：

2，eslintrc.js参数详解

2.1，root

指定ESLint在查找配置文件时的起始位置。

白话：eslintrc.js放根目录，设置root: true，根目录以下所有文件都依据eslintrc.js进行规则校验

module.exports = { 
  root: true, 
  // ...
}

2.2，env

用来指定校验环境。它告诉 ESLint 代码运行在哪个环境中，从而帮助 ESLint 更好地理解您的代码并检测潜在的问题。

module.exports = { 
  env: {
      es6: true /** 启用除了modules以外的所有 ES6 特性,开启后会自动设置ecmaVersion为6 */,
      node: true /** Node.js 全局变量和 Node.js 作用域 */,
      browser: true /** 浏览器全局变量 */,
      commonjs: true /**  CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码) */,
      jest: false /** Jest 全局变量 */,
      jquery: false /** jQuery 全局变量 */,
      'shared-node-browser': false /** Node.js 和 Browser 通用全局变量 */,
      worker: false /** Web Workers 全局变量 */,
      amd: false /** 将 require() 和 define() 定义为像 amd 一样的全局变量 */,
      mocha: false /** 添加所有的 Mocha 测试全局变量 */,
      jasmine: false /** 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。 */,
      phantomjs: false /** phantomjs 全局变量 */,
      protractor: false /** protractor 全局变量 */,
      qunit: false /** QUnit 全局变量 */,
      prototypejs: false /** Prototype.js 全局变量 */,
      shelljs: false /** ShellJS 全局变量 */,
      meteor: false /** Meteor 全局变量 */,
      mongo: false /** MongoDB 全局变量 */,
      applescript: false /** AppleScript 全局变量 */,
      nashorn: false /** Java 8 Nashorn 全局变量 */,
      serviceworker: false /** Service Worker 全局变量 */,
      atomtest: false /** Atom 测试全局变量 */,
      embertest: false /** Ember 测试全局变量 */,
      webextensions: false /** WebExtensions 全局变量 */,
      greasemonkey: false /** GreaseMonkey 全局变量 */,
    }
}

不用全部都写，看项目场景，我们项目只用了（webpack打包的，运行在网页浏览器中）

module.exports = { 
env: {
    node: true,
    browser: true,
  },
}

2.3，parser

指定用于解析JavaScript代码的解析器。

常用的解析器如下：

• esprima：默认的解析器，用于解析ECMAScript 5到ECMAScript 2021之间的JavaScript代码。
• @babel/eslint-parser：由Babel项目提供的解析器，用于解析ES6+代码。
• @typescript-eslint/parser：由TypeScript团队提供的解析器，用于解析TypeScript代码。 eslint-plugin-html：用于解析HTML文件中的JavaScript代码。
• vue-eslint-parser：用于解析Vue单文件组件中的JavaScript代码。

我们项目只用了vue-eslint-parser

module.exports = { 
  parser: 'vue-eslint-parser',
}

2.4，parserOptions

和上面的parser有关联，给配置的解析器添加可选配置项。

module.exports = { 
  parserOptions: {
    ecmaVersion: 6, // 默认为 5 ，支持3、5、6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本
    sourceType: 'module', // 默认为 `script`。支持 `script` 和 `module` (ESM) 两种配置。
    ecmaFeatures: { // 一个对象，表示代码中可以使用的额外语言特性
      // 允许 js 代码中使用 jsx 
      jsx: true, 
      // 允许顶层return 
      globalReturn: true,
    },
  },
}

2.5，globals

指定全局变量的一个配置项。

如果一个变量没有经过声明就被使用，会导致该变量被当作全局变量处理，有些场景会有问题。

通过配置 globals可以告诉 ESLint 这些变量是全局变量，从而避免出现这种问题。

module.exports = { 
  "foo": "writable",  // 可以被写入
  "bar": "readonly",  // 只读的
  "baz": "off" // 关闭校验
}

2.6，rules

配置文件中最常用的配置项之一，用于设置 ESLint 的规则和规则的错误等级。

错误等级：

• off：关闭校验
• warn：警告级别
• error：报错级别

module.exports = { 
  rules:{
    'prettier/prettier': 'warn',
    "eqeqeq": "off", // 关闭 === 和 ==的校验
    "semi": ["error", "always"] // 要求在语句末尾使用分号，始终校验，校验等级为`报错`
    'no-undef': 'off',  // 关闭 不允许有未定义的变量
    'no-console': 'warn', // 开启console`校验，校验等级为`警告`
    'no-debugger': 'off', // 关闭debugger`校验
    'vue/no-v-html': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'any',
          normal: 'any',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
    'vue/multi-word-component-names': 'off',
    ..., // 还有很多
  }
}

2.7，overrides

对特定的文件指定解析器

module.exports = { 
  overrides: [
    {
      "files": ["**/*.{js}"]
      "parser": "@babel/eslint-parser", // 使用 babel 来解析 js 文件
      "parserOptions":{},
      "env": {
        jest: true,
      },
    },
  ],
}

2.8，plugins

eslint支持使用插件，插件通常是一个npm包，需要通过npm insta xxx安装。

配置时，插件名称可以省略 eslint-plugin-前缀，和下面的extends通常一起使用。

常用的插件（其实一般我也就用个eslint-plugin-vue~~~ 哈哈）：

• eslint-plugin-vue：用于检查 Vue.js 代码的规范性，包括模板、组件和指令等方面的检查。

• eslint-plugin-react：用于检查 React 代码的规范性，包括 JSX 语法、组件使用和生命周期等方面的检查。

• eslint-plugin-prettier：用于将 Prettier 代码格式化集成到 ESLint 中，可以通过配置来自动修复代码格式问题。

• eslint-plugin-node：用于检查 Node.js 代码的规范性，包括 API 使用、文件系统和子进程等方面的检查。

• eslint-plugin-jest：用于检查 Jest 测试代码的规范性，包括测试名称、匹配器和断言等方面的检查。

安装

npm install eslint-plugin-vue --save-dev

使用

module.exports = { 
 "plugins": ["vue"],
}

2.9，extends

用来继承和扩展 ESLint 规则集的配置项

和上面的plugins有点联系，对于安装的插件可以进行继承和配置

ESLint内置规则集：

• eslint:recommended

• plugin:@typescript-eslint/recommended

• plugin:vue/recommended

• plugin:react/recommended

module.exports = { 
 "plugins": ["vue"],
 "extends": ["plugin:vue/recommended"], // 对插件下的推荐规则集的引用
 rules: {
    // 上面引用并且继承了eslint-plugin-vue的推荐规则集，这里可以进行额外配置和覆盖
    ...
 }
}

支持继承多个规则集

...
"extends": ["plugin:vue/recommended", plugin:react/recommended],
...

支持继承自定义规则集

...
"extends": "./other-eslint-config.js"
...

多个规则集中有重复的规则

如果继承了多个规则集中有重复的规则，后面的覆盖前面的。

2.10，settings

用来自定义规则，供其他的规则使用（我们项目中没用）

这个我没实践过，官网大概意思是用于共享一些自定义的规则。下面代码定义的publicData在其他规则集加载前都能得到这个并且做逻辑。

module.exports = { 
 "settings": {
    publicData: {...一些配置}
 }
}

完结

这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。

欢迎转载，但请注明来源。 最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。