前端工程化2:从0-1的eslint插件开发教程

2024-09-08 02:12

本文主要是介绍前端工程化2:从0-1的eslint插件开发教程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

从0-1的eslint插件开发教程
开发eslint插件目的:根据项目需要,自定义满足项目特殊需要的校验规则是

参考eslint官方文档展开阐述

插件开发
自定义规则
单元测试

下面开始通过一个示例demo来介绍插件整个开发流程

代码中出现的方法及变量的详细解释与相关文档,会在文末给大家列举出来,大家可以先把代码拷贝到自己的demo中然后结合本文第3部分的变量|方法解释去理解代码

开发一个校验注释中是否包含指定关键词的插件(eslint-plugin-comments-key)

1. 环境准备

目录结构


├── README.md                   插件介绍文档
├── index.js                    对外暴露插件
├── lib                         
│   └── rules                   自定义规则
│       └── comments-key.js     
├── package.json
└── tests                       测试自定义规则└── lib└── rules└── comments-key.js

安装依赖

  • eslint
  • mocha
npm i eslint mocha -D

2. 开始编码

编写自定义规则
不包含自定义参数校验规则

/lib/rules/comments-key.js

module.exports = {meta: {type: "suggestion",docs: {description: "Not allowed comment words", // 规则的简述category: "Stylistic Issues", // 规则分类recommended: true //  配置文件中的 "extends": "eslint:recommended"属性是否启用该规则}},create: function (context) {// context对象包含与规则上下文相关的信息// 返回一个SourceCode对象,你可以使用该对象处理传递给 ESLint 的源代码const sourceCode = context.getSourceCode()// 定义不被允许出现在注释中的内容const notAllowWords = ['fixme', 'xxx']return {Program(node) {// 获取所有注释的节点const comments = sourceCode.getAllComments()// 遍历注释节点判断是否有不符合规范的comments.forEach(comment => {let { loc, value, type } = commentvalue = value.toLowerCase()let warnWord = ''// 判断注释内容是否包含不被允许的wordfor (const word of notAllowWords) {if (value.includes(word)) {warnWord = word}}if (warnWord) {context.report({node: comment, // 可选 与问题有关的 AST 节点message: `注释中含有不被允许的字符${warnWord}` // 有问题发出的消息})}})}};}
};

编写测试用例

/tests/lib/rules/comments-key.js

const { RuleTester } = require('eslint')// 获取自定义的规则
const rule = require('../../../lib/rules/comments-key')// TESTS
// 加入默认配置
const ruleTester = new RuleTester({parserOptions: { ecmaVersion: 2018 }
})const errMsg = warnWord => `注释中含有不被允许的字符${warnWord}`ruleTester.run('comments-key', rule, {valid: ['// sssss','// fixdddd',`/*** 容十三内水s是说*/`],invalid: [{code: "// fixme: DDL 2020-4-28 测试内容",errors: [{ message: errMsg('fixme') }]},{code: "// FIXME: DDL 2020-5-23 测试内容",errors: [{ message: errMsg('fixme') }]},{code: `/*** xxx* 内容*/`,errors: [{ message: errMsg('xxx') }]}]
})

修改package.json

加入

"scripts": {"test": "mocha tests/lib/rules"
}

运行脚本查看测试结果

npm run test

上面的示例中限定的关键词是在代码中写死了的

通常的场景中如:

rules:{"quotes": ["error", "double"], // 只允许双引号"no-warning-comments": [ // 不允许注释开头出现 todo|fixme等内容1,{"terms": ["todo","fixme"],"location": "start"}],
}

大多数eslint规则都拥有可配置的属性

我们可以通过context.options获取配置的属性

下面示例加入可配置属性,用于自定义关键词的检测(代码中只包含修改部分,其余部分跟前面相同)

module.exports = {meta: {// ...codeschema: [ // 指定该选项 这样的 ESLint 可以避免无效的规则配置// 遵循 json schema 后文会有介绍文档{"keyWords": {"type": "array","items": {"type": "string"}}}]},create: function (context) {// ...code// 定义不被允许出现在注释中的内容// 可以使用 context.options检索一个规则的可选项,它是个数组,包含该规则的所有配置的可选项// console.log(context.options);// 取得设置的keywordslet [argv0] = context.optionslet keyWords = argv0 ? argv0.keyWords ? argv0.keyWords.length > 0 ? argv0.keyWords : undefined : undefined : undefined// 没有设置则使用默认的let notAllowWords = keyWords || ['fixme', 'xxx']// 忽略大小写notAllowWords = notAllowWords.map(v => v.toLowerCase())// ...code}
};

完善我们的单元测试

// ...code
ruleTester.run('comments-key', rule, {valid: ['// sssss','// fixdddd',`/*** 容十三内水s是说*/`],invalid: [{code: "// fixme: DDL 2020-4-28 测试内容",errors: [{ message: errMsg('ddl') }],options: [{ // 通过options 配置自定义参数keyWords: ['ddl']}]},{code: '// FIXME: DDL 2020-5-23 测试内容 \n let a = "232"',errors: [{ message: errMsg('fixme') }],rules: { // 通过rules  配置eslint提供的一些规则"quotes": ["error", "double"],},options: [{keyWords: ['abc', 'efg', 'fixme']}]},{code: `/*** xxx* 内容*/`,errors: [{ message: errMsg('xxx') }]},{code: '// abds asa',errors: [{ message: errMsg('abd') }],options: [{keyWords: ['abc', 'abd']}]}]
})

3.文中一些变量|方法的解释及其文档

  • meta (object) 包含规则的元数据

  • schema 指定该选项 这样的 ESLint 可以避免无效的规则配置
    遵循 json schema 规范

  • create (function) 返回一个对象,其中包含了 ESLint 在遍历 JavaScript 代码的抽象语法树 AST (ESTree 定义的 AST) 时,用来访问节点的方法

  • context 包含与规则上下文相关的信息

  • options 检索一个规则的可选项,它是个数组,包含该规则的所有配置的可选项

  • getSourceCode() 返回一个SourceCode对象,你可以使用该对象处理传递给 ESLint 的源代码

  • getAllComments() 获取所有注释节点

每个注释节点的属性

  • loc 注释在文档中的位置

  • value 注释中的内容

  • type 注释的类型 Block|Line

  • report() 它用来发布警告或错误(取决于你所使用的配置)。该方法只接收一个参数,是个对象

  • message 有问题的消息提示

  • node (可选)与问题有关节点

  • loc (可选)用来指定问题位置的一个对象。如果同时指定的了 loc 和 node,那么位置将从loc获取而非node

  • data (可选) message的占位符

  • fix (可选) 一个用来解决问题的修复函数

  • RuleTester 单元测试示例介绍

tips:AST在开发插件时不必深入研究,不同地方AST的实现和结构都有所差异

4.导出

至此我们的插件算开发完成了,接下来编写对eslint暴露这个模块的代码

index.js

'use strict';
module.exports = {rules: {'diy': require('./lib/rules/comments-key') },rulesConfig: {'diy': 1}
};

5.发布npm

要在其它项目中使用的eslint-plugin插件的话,可以把整个插件的根目录拷贝到目标项目的node_modules中或者发布到npm中去,其它项目直接通过npm install 安装这个依赖

下面介绍发布到npm的步骤

  • 注册npm账号(有的话直接跳过这步骤)

  • 直接点击官网注册

  • 设置登陆的账号 登录之前修改registry为原来的,因为国内一般用的镜像源例如淘宝源:registry.npm.taobao.org

npm config set registry https://registry.npmjs.org/
npm login

按提示依次输入账号,密码
如果提示用户名密码方式已经失效,在github上生成token,把token作为密码输入

登录完成之后,查看当前npm用户,不报错说明登录成功

npm whoami

编写README.md方便指引他人使用

修改packgae.json

{"name": "eslint-plugin-comments-key","version": "1.0.0","description": "校验注释中是否包含指定关键词的插件","main": "index.js","directories": {"lib": "lib","test": "tests"},"scripts": {"test": "mocha tests/lib/rules"},"keywords": [],"author": "","license": "ISC","devDependencies": {"eslint": "^7.0.0","mocha": "^7.1.2"}
}

运行npm publish发布npm包

至此发布整个流程完毕

6.项目中引入

Installation
You’ll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-comments-key:

$ npm install eslint-plugin-comments-key --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-comments-key globally.

Usage
Add comments-key to the plugins section of your .eslintrc configuration file or package.json. You can omit the eslint-plugin- prefix:

package.json demo

"eslintConfig": {"plugins": ["comments-key"],"rules": {"comments-key/diy":[1,{"wordKeys":["fixme","xxx"]}]}
}

tips: 如果编辑器中安装了Eslint插件,在编码的时候就会给予警告⚠️

这篇关于前端工程化2:从0-1的eslint插件开发教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1146821

相关文章

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

基于Python开发一个图像水印批量添加工具

《基于Python开发一个图像水印批量添加工具》在当今数字化内容爆炸式增长的时代,图像版权保护已成为创作者和企业的核心需求,本方案将详细介绍一个基于PythonPIL库的工业级图像水印解决方案,有需要... 目录一、系统架构设计1.1 整体处理流程1.2 类结构设计(扩展版本)二、核心算法深入解析2.1 自

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址:Java Downloads

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)