基于ESlint在项目中扩展自己的ESlint规则

最新推荐文章于 2025-05-06 23:05:59 发布
原创 最新推荐文章于 2025-05-06 23:05:59 发布 · 300 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ESLint #自定义ESlint规则 #ESLint rules

为解决团队开发中重复造轮子的问题，本文介绍如何基于ESLint在项目中扩展自定义规则，实现自动化检测，确保代码规范一致性。

目录

在团队开发中，经常会碰到这样的场景：

  1. 来一个新人，碰到需求需要处理日期，但不知道项目中已经有封装好的日期库，就自己做了一个轮子
  2. 又来一个新人，碰到弹层用官方的是Modal，但他不知道项目中已经根据项目特色做了一个Modal??

上诉的场景有两种解决方式

  1. 入库前认真Review代码
  2. 自动化检测

相对于人，我更相信机器，所以我选择第二种方式，具体实现是：基于ESlint在项目中扩展自己的ESlint规则。

效果展示

在这里插入图片描述

源码分析

没有什么可分析的，本身就是使用ESLint提供的一个功能而已，想要自定义更多规则查看ESLint官网即可。点击查看我的源码

ESLint在Node.js项目中的配置指南
小白菜的博客
06-28 833
我们的目的是教会大家如何在Node.js项目中正确配置ESLint。范围涵盖了ESLint的基本概念、核心配置选项、与Node.js项目的集成方法，以及实际应用中的一些注意事项。通过学习本文，大家能够独立完成Node.js项目中ESLint的配置，并利用它来检查和规范代码。本文将首先介绍ESLint和Node.js的相关术语和概念，然后通过故事引入的方式讲解ESLint的核心概念和与Node.js的关系。
如何自定义Eslint插件
Zong_0915的博客
10-21 1512
如何自定义Eslint插件一. 准备工作二. 编写自定义组件三. 开启本地调试 一. 准备工作 我们需要基于generator-eslint来进行快速开发Eslint自定义插件。 1.下载Yeoman generator： npm i -g yo 2.然后： npm i -g generator-eslint 3.我们准备一个文件夹，可以取名为My-Eslint，在该文件夹的路径下通过命令生成创建一个插件Plugin，然后根据提示来输入对应的内容。 yo eslint:plugin 案例如下：ID也就
JavaScript中使用ESLint 说明规则
潜行者
04-20 5883
如何使用 安装 npm install -g eslint 如果你第一次使用 ESLint，你必须使用 –init 命令新建一个配置文件： eslint --init 使用 ESLint 检测任何 JavaScript 文件： eslint test.js test2.js ESLint 中一些规则运行命令它可以帮你自动修复 eslint test.js
React入门② -- 扩展 - 配置Eslint
麦呢头冷的博客
11-23 770
前言 一千个人写代码有一千种风格，每次合并同事的代码，拉出来一跑直接崩溃，所以我们最好统一一下代码风格,配置一下 eslint 步骤 npm i eslint typescript -D 在项目根目录，运行npx eslint --init 按交互提示安装相关插件 它会自动生成eslint的配置文件 3. 设置vscode的自动保存格式化 把eslint 安装包启用 代码 在项目根目录下，补充配置文件：.vscode\settings.jso...
漂亮的ESLintHTML格式化程序从ESLint的官方HTML格式化程序扩展而来
08-11
漂亮的ESLintHTML格式化程序从ESLint的官方HTML格式化程序扩展而来
推荐一款必备的VS Code插件：ESLint扩展
gitblog_00087的博客
05-13 717
在编程世界中，代码质量和一致性至关重要，这就是为什么我们需要高效的工具来帮助我们实现这一目标。[VS Code ESLint 扩展](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)就是这样一款利器，它无缝地将ESLint集成到Visual Studio Code中，让你的编码体验更上一层楼。 ...
vscode配置扩展之Vue配置ESlint
刘洪瑞的博客
06-07 343
这是很不错的文章。 https://www.clarencep.com/2017/03/18/edit-vue-file-via-vscode/ https://www.cnblogs.com/axl234/p/9148949.html
如何在Vue项目中使用ESLint强制.vue文件扩展名
- 提供的文件压缩包名称为`demo-vue-eslint-force-dot-vue-extension-in-imports-master`，这可能是一个示例项目的压缩包，其中包含了配置好的ESLint规则和相关的代码示例，旨在演示如何强制使用.vue扩展名。...
eslint-config-blogfoster:包含Blogfoster特定的陪同规则。 基于eslint-config-airbnb
04-30
我们的默认导出包含我们所有的ESLint规则。 npm install --save-dev eslint-config-blogfoster 在您的.eslintrc中添加"extends": "blogfoster" eslint-config-blogfoster /React 包含eslint-config-blogfoster...
个人ESLint配置扩展：基于半标准的规则强化
eslint-config包是一系列预定义的ESLint规则集合，可以被多个项目复用。它们为开发者提供了一个方便的途径，通过简单的配置就能在项目中实现一致的代码风格。本文提到的eslint-config-main包，是作者根据个人需求...
Blogfoster ESLint规则集：扩展Airbnb配置
如果项目中使用了React，还可以使用eslint-config-blogfoster的React特定扩展，只需要在.eslintrc中添加"extends": "blogfoster/react"。这样，开发者在编码时，ESLint会根据配置文件中指定的规则集来检查代码，并...
vscode配置eslint,实现文件保存使用eslint格式化，问题1.扩展名‘eslint‘被配置为格式化程序，但它无法格式化’JavaScript‘文件。2.eslint命令无法执行
lingliu0824的博客
04-11 2万+
当项目中使用了eslint时，如果保存时不使用eslint格式化，运行时可能会由于个人编码习惯出现很多问题，所以期望在保存时能够自动根据eslint配置格式化文档。 eslint 配置完成后始终不生效问题 首先说一下eslint配置完后，始终不生效的问题，我之前使用的多模块项目，每个模块独立，但是始终有一个模块的eslint不生效，把模块内容复制到其他模块或新建模块都ok。最终解决：重启eslint。具体操作如下： 1.在vscode中使用快捷键ctrl+shift+p打开命令输入框 2.输入eslint
提升代码质量：VS Code ESLint 扩展全面解析
gitblog_00784的博客
08-09 583
VS Code ESLint 扩展是一款将 [ESLint](http://eslint.org/) 集成到 Visual Studio Code 中的强大工具。ESLint 是一个广泛使用的 JavaScript 和 JSX 代码检查工具，旨在帮助开发者发现并修复代码中的潜在问题。通过此扩展，用户可以在编写代码的同时，实时获得 ESLint 的检查反馈，从而提高代码质量和一致性。 ## 项目技...
eslint规则插件开发-自定义
欠踹的背影
04-03 3010
eslint我们常应用在代码静态扫描中，通过设定的eslint的语法规则，来对代码进行检查，通过规则来约束代码的风格，以此来提高代码的健壮性，避免因为代码不规范导致应用出现bug的可能。而规则是自由的，可以设定内部自己团队适用的规则，也可以直接使用开源社区比较热门的规则集合, 比如airbnb、eslint-plugin-vue等。当完成上面一系列操作之后，eslint插件模版初步完成，接下来我们找到目录中lib/rules中对刚刚创建的rule进行开发/**meta : {} , };
ESLint配置（一）：eslint默认及自定义规则介绍，上传自己的eslint-config-*风格文件
热门推荐
猿始森林
05-21 6万+
eslint安装 1、全局安装 2、项目安装 eslint 定义规则 eslint 代码检测和修复 .eslintignore 忽略文件 创建自己的规则风格文件 使用编辑器插件标识错误以及自动修复代码
eslint规则简介
dchenge的博客
12-11 1277
【代码】eslint规则简介。
ESLint配置：eslint默认及自定义规则介绍
mrzhangdulin的博客
09-02 2万+
ESLint 配置 一、eslint 安装 1、全局安装 npm i -g eslint 全局安装的好处是，在任何项目我们都可以使用eslint的全局命令进行代码规则操作，但是这对我们的意义并不大，后续会详细介绍； 全局安装之后，要求相关的eslint插件页必须全局安装，这对多人开发项目来说会比项目安装更加繁琐。所以，我们这里采用在项目上安装eslint： 2、项目安装 npm i -D esli...
从零搭建前端开发环境（零）——扩展篇：4.eslint统一代码规范
04-02 1203
从零搭建前端开发环境（零）——基础篇：1.npm、git及项目初始化 从零搭建前端开发环境（零）——基础篇：2.webpack生产与开发环境配置 从零搭建前端开发环境（零）——扩展篇：3.jest单测 从零搭建前端开发环境（零）——扩展篇：4.eslint统一代码规范 从零搭建前端开发环境（零）——终极篇：5.构建自己的前端脚手架 注：扩展篇里的内容，并不是建立项目的必要条件，属于可选范围...
严苛代码守护者：ESLint VS Code 扩展的原理与实践
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
05-06 902
ESLint 扩展由微软员工 Dirk Baeumer 维护，托管在仓库，并同步发布到 Visual Studio Marketplace。扩展条目清楚标明：它会优先寻找工作区里的 ESLint 依赖，不存在时再退回全局安装；若两者皆无，用户需要或才能启动诊断功能。源码仓库的README与CHANGELOG描述了 LSP 服务器实现、配置项、以及每次发布对应的 VS Code 版本限制。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值