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

前言

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

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

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

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

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

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

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

正文开始

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

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包

需开发者手动触发,得到校验结果, 比如:

  • 通过命令行对当前项目进行eslint检测,

  • 在代码提交(git commit -m'')的时候通过构子对项目进行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进行规则校验

js 复制代码
module.exports = { 
  root: true, 
  // ...
}

2.2,env

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

js 复制代码
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打包的,运行在网页浏览器中)

js 复制代码
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

js 复制代码
module.exports = { 
  parser: 'vue-eslint-parser',
}

2.4,parserOptions

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

js 复制代码
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 这些变量是全局变量,从而避免出现这种问题。

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

2.6,rules

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

错误等级:

  • off:关闭校验
  • warn:警告级别
  • error:报错级别
js 复制代码
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

对特定的文件指定解析器

js 复制代码
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 测试代码的规范性,包括测试名称、匹配器和断言等方面的检查。

安装

js 复制代码
npm install eslint-plugin-vue --save-dev

使用

js 复制代码
module.exports = { 
 "plugins": ["vue"],
}

2.9,extends

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

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

ESLint内置规则集:

  • eslint:recommended

  • plugin:@typescript-eslint/recommended

  • plugin:vue/recommended

  • plugin:react/recommended

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

支持继承多个规则集

js 复制代码
...
"extends": ["plugin:vue/recommended", plugin:react/recommended],
...

支持继承自定义规则集

erlang 复制代码
...
"extends": "./other-eslint-config.js"
...

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

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

2.10,settings

用来自定义规则,供其他的规则使用(我们项目中没用

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

js 复制代码
module.exports = { 
 "settings": {
    publicData: {...一些配置}
 }
}

完结

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

欢迎转载,但请注明来源。

最后,希望小伙伴们给我个免费的点赞,祝大家心想事成,平安喜乐。

相关推荐
前端风云志几秒前
TypeScript结构化类型初探
javascript
musk121217 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘1 小时前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端