工程化-vue3+ts:代码检测工具 ESLint

一、理解ESLint

ESLint是一个开源的JavaScript代码检查工具,用于帮助开发人员规范和统一编码风格。它可以检查代码中的潜在错误、不一致的编码习惯以及一些常见的代码问题。

ESLint使用基于规则的插件体系,可以根据项目的需求和个人的偏好配置不同的规则集。每个规则都有一个错误级别,可以设置为警告或错误,开发者可以根据自己的需求自定义配置。

ESLint可以在命令行工具中运行,也可以集成到开发环境中的编辑器或者构建工具中。通过在代码保存或者提交之前自动运行ESLint,可以确保代码的质量和一致性。

ESLint可以检查常见的错误,如未声明的变量、不必要的分号、重复的函数参数等。它还可以检查代码风格问题,如缩进、引号、空格等。此外,ESLint还支持一些特定的规则,如强制使用严格模式、禁止使用特定的语法等。

ESLint的灵活性和可扩展性使得它成为开发人员常用的代码检查工具之一。它可以帮助开发人员提高代码质量,减少潜在的bug,并且可以根据项目的需求轻松地定制规则集。

二、ESLint能做什么

ESLint 是一个功能强大的 JavaScript 代码检查工具,它可以帮助开发人员在编码过程中发现潜在的错误和不符合代码风格规范的问题。以下是 ESLint 能够做的一些主要事情:

静态代码分析:ESLint 能够在代码运行时之前进行静态分析,找出潜在的错误和不符合编码规范的地方。

代码风格检查:ESLint 可以根据配置的文件(如 .eslintrc.js)来检查代码是否符合团队或项目的编码风格规范。例如,它可以检查是否使用了分号结尾、是否使用了一致的引号风格、变量命名是否规范等。

插件支持:ESLint 提供了丰富的插件生态系统,可以通过安装插件来扩展 ESLint 的功能,比如支持新的 JavaScript 语法特性、集成其他语言(如 TypeScript、JSX 等)的检查、添加自定义规则等。

自动修复:ESLint 不仅可以指出问题,还可以尝试自动修复某些类型的错误。这可以大大节省开发人员的时间,提高编码效率。

与编辑器和 IDE 集成:ESLint 可以与许多流行的编辑器和集成开发环境(IDE)无缝集成,如 Visual Studio Code、WebStorm、Atom 等。这些集成通常会在你编写代码时实时显示警告和错误,甚至提供快速修复建议。

自定义规则:除了使用现有的规则外,你还可以根据自己的需求创建自定义规则。这对于满足特定项目或团队的编码约定非常有用。

与持续集成/持续部署(CI/CD)集成:ESLint 可以集成到 CI/CD 流程中,作为代码提交或合并到主分支之前的检查步骤。这可以确保代码库始终保持一致的代码风格和质量。

配置灵活:ESLint 的配置非常灵活,可以根据项目的需求进行微调。你可以在项目中包含 .eslintrc.js 文件来定义规则、插件、环境等配置信息。

通过使用 ESLint,开发团队可以确保代码质量的一致性,减少因编码风格不一致而导致的合并冲突和审查延迟,同时提高代码的可读性和可维护性。

三、ESLint安装使用

3.1、实现目标 vue3 + ts + pnpm 项目,配合git husky + gitHooks 使用ESLint

vue3+ts:约定式提交(git husky + gitHooks)_error invalid commit message format. proper commit-CSDN博客

3.2、安装ESLint

pnpm install -D @eslint/create-config

3.3、初始化ESLint配置

npx eslint --init

3.4、eslint.config.js

3.5、查看不规范的文件

npx eslint src

3.6、package.json

"scripts": {"eslint:fix": "eslint --fix"
}

3.7、pnpm run eslint:fix测试

四、过程记录

记录一、NUXT2项目Expected to return a value at the end of arrow function eslint

我们不希望“箭头函数没有返回语句”的检查,希望 ESLint 不对箭头函数末尾缺少返回值发出警告或错误,您可以在 .eslintrc.js 文件的 rules 部分为相应的规则设置 'off' 值。通常,这个规则是 'consistent-return' 规则,该规则要求函数始终返回相同的值类型。但是,如果您只是希望箭头函数在不需要返回值的情况下不返回任何东西而不引发警告,您应该确保没有配置任何规则强制要求函数必须有返回值。

如果您已经确定是哪个规则导致了这个错误或警告,您可以在 .eslintrc.js 中这样关闭它:

module.exports = {// ... 其他的 ESLint 配置 ...rules: {// ... 其他的规则配置 ...// 关闭 'consistent-return' 规则'consistent-return': 'off',// 如果是因为 'no-unused-expressions' 规则导致(例如,因为箭头函数没有返回语句),则关闭它'no-unused-expressions': 'off',// 如果您使用的是自定义规则或插件提供的规则,请确保您知道规则的准确名称,并将其设置为 'off''your-custom-or-plugin-rule': 'off',},
};

测试成功,没有提示了。

记录二、NUXT2项目Assignment to property of function parameter 'el'

module.exports = {env: {browser: true,es2021: true,node: true,},extends: ['plugin:vue/recommended', 'airbnb-base', 'prettier'],parserOptions: {ecmaVersion: 12,sourceType: 'module',},plugins: ['vue'],rules: {'vue/eqeqeq': 'error','import/no-unresolved': 0,'consistent-return': 'off','no-unused-expressions': 'off','no-param-reassign': 'off',},
};

不再提示

记录三、Vue3+TS项目使用ESLint还是使用TSLint

在Vue 3与TypeScript(TS)结合的项目中,推荐使用ESLint而非TSLint。这里有几个主要原因:

1、TSLint已被弃用:自2019年以来,TSLint的官方团队就宣布了TSLint的弃用计划,并建议所有用户迁移到ESLint。ESLint现在提供了对TypeScript的完整支持,这意呀着你可以使用一套工具来同时检查JavaScript和TypeScript代码。

2、社区和生态:由于ESLint现在支持TypeScript,并且ESLint社区非常活跃,因此你可以获得更多的插件、预设配置和更新支持。这对于保持代码质量和一致性至关重要。

3、集成和兼容性:许多现代开发工具和框架(如Vue CLI、Create React App等)都内置了对ESLint的支持。Vue CLI 3及以上版本默认使用ESLint进行代码质量检查,这使得在Vue 3+TS项目中集成ESLint变得非常容易。

4、性能:ESLint的TypeScript支持已经非常成熟,并且在性能上进行了优化。这意呀着你可以快速地对大型代码库进行静态代码分析,而不会遇到明显的性能瓶颈。

5、可配置性:ESLint提供了高度可配置性,允许你根据项目的具体需求定制规则集。你可以轻松地启用或禁用特定的规则,甚至编写自定义规则来满足特定的编码标准。

五、欢迎交流指正

六、参考链接

Vue3+TS项目,eslint、prettier安装配置_vue3 ts 安装eslint-CSDN博客

Command Line Interface Reference - ESLint - Pluggable JavaScript Linter

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/44693.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库数据恢复—SQL Server数据库由于存放空间不足报错的数据恢复案例

SQL Server数据库数据恢复环境: 某品牌服务器存储中有两组raid5磁盘阵列。操作系统层面跑着SQL Server数据库,SQL Server数据库存放在D盘分区中。 SQL Server数据库故障: 存放SQL Server数据库的D盘分区容量不足,管理员在E盘中生…

MacOS如何切换shell类型

切换 shell 类型 如果你想在不同的 shell 之间切换,以探索它们的不同之处,或者因为你知道自己需要其中的一个或另一个,可以使用如下命令: 切换到 bash chsh -s $(which bash)切换到 zsh chsh -s $(which zsh)$()语法的作用是运…

FastGPT:给 GPT 插上知识库的翅膀!0基础搭建本地私有知识库,有手就行

写在前面 上一篇,我们部署了接口管理和分发神器-OneAPI,将所有大模型一键封装成OpenAI协议。见:[OneAPI)。 基于此,本篇继续带领大家搭建一个基于本地知识库检索的问答系统。 有同学说 Coze 不也可以实现同样功能么&#xff1f…

51单片机:电脑通过串口控制LED亮灭(附溢出率和波特率详解)

一、功能实现 1.电脑通过串口发送数据:0F 2.点亮4个LED 二、注意事项 1.发送和接受数据的文本模式 2.串口要对应 3.注意串口的波特率要和程序中的波特率保持一致 4.有无校验位和停止位 三、如何使用串口波特率计算器 1.以本程序为例 2.生成代码如下 void Uar…

[论文笔记]涨点近5%! 以内容中心的检索增强生成可扩展的级联框架:Pistis-RAG

引言 今天带来一篇较新RAG的论文笔记:Pistis-RAG: A Scalable Cascading Framework Towards Content-Centric Retrieval-Augmented Generation。 在希腊神话中,Pistis象征着诚信、信任和可靠性。受到这些原则的启发,Pistis-RAG是一个可扩展…

windows远程桌面到 Linux系统(Ubuntu:22.04)—— 安装xrdp软件

1、在Linux系统上安装xrdp软件 sudo apt update sudo apt install xrdp2、安装完成后,需要开启xrdp服务 sudo systemctl start xrdp sudo systemctl enable xrdp打印返回 Synchronizing state of xrdp.service with SysV service script with /lib/systemd/system…

一键叫车|开发打车小程序,随时随地便利出行!

随着移动互联网的普及,人们出行的方式也在不断发生变化。对于出行多样化和便捷化的需求,一款打车小程序可以方便人们的出行,提高出行效率和便捷性。打车小程序能够根据用户的出行需求为其打造个性化的出行方案,从而让用户的出行生…

【DevOps】在云原生时代的角色与重要性探索

🐇明明跟你说过:个人主页 🏅个人专栏:《未来已来:云原生之旅》🏅 🔖行路有良友,便是天堂🔖 目录 一、引言 1、什么是云原生 2、云原生的核心特性 3、什么是DevOps…

网络建设与运维python脚本应用

python 脚本 (1)在linux4 上编写/root/createfile.py 的 python3 脚 本,创建20 个 文 件 /root/python/file00 至 /root/python/file19,如果文件存在,则删除再创建;每个文 件的内容同文件名,如…

【高中数学/指数、对数】已知9^m=10,a=10^m-11,b=8^m-9,则ab两数和0的大小关系是?(2022年全国统考高考真题)

【问题】 已知9^m10,a10^m-11,b8^m-9,则() A.a>0>b B.a>b>0 C.b>a>0 D.b>0>a 【解答】 首先注意到10^log10_11-110,8^log8_9-90, 问题就转化为log8_9,log9_10,log10_11谁大谁小的问题, 再进一步…

Spring Data MongoDB 自定义转换器:写入和读取 LocalDateTime

Spring Data MongoDB 自定义转换器:写入和读取 LocalDateTime 引言 在使用 Spring Data MongoDB 时,有时需要将特定类型(如 LocalDateTime)与 MongoDB 文档中的特定格式(如时间戳)之间进行自定义转换。本…

C++ //练习 14.50 在初始化ex1和ex2的过程中,可能用到哪些类类型的转换序列呢?说明初始化是否正确并解释原因。

C Primer(第5版) 练习 14.50 练习 14.50 在初始化ex1和ex2的过程中,可能用到哪些类类型的转换序列呢?说明初始化是否正确并解释原因。 struct LongDouble{LongDouble(double 0.0);operator double();operator float(); }; Long…

在 C# .NET 中,首选静态 HashData 方法而不是 ComputeHash

在 .NET 中,哈希处理是一项常见任务,无论是用于数据完整性检查、密码哈希处理还是其他加密目的。传统上,开发人员使用各种哈希算法(例如 SHA256、MD5)提供的 ComputeHash 方法。但是,随着静态 HashData 方法…

Python面试题:如何在 Python 中解析 XML 文件?

在 Python 中解析 XML 文件可以使用内置的 xml.etree.ElementTree 模块。以下是一个示例,展示了如何使用这个模块解析 XML 文件: 读取 XML 文件: import xml.etree.ElementTree as ET# 读取 XML 文件 tree ET.parse(example.xml) root tr…

springboot+vue项目实战2024第四集修改文章信息

1.添加文章信息 PostMappingpublic Result add(RequestBody Validated Article article){articleService.add(article);return Result.success();}void add(Article article); Override public void add(Article article) {article.setCreateTime(LocalDateTime.now());article…

openssl等库降级到系统原生安装镜像版本

在安装开发库时,看到curl glib2 libcurl openssl库被更新了,这不是我想要的。如下所示: Verifying : curl-8.4.0-5.oe2403.x86_64 29/38 Verifying : curl-8.4.0-3.oe2403.x86_64 …

如何将Docker镜像源更改为阿里云的镜像加速地址

在使用Docker时,尤其是在国内环境下,由于网络原因,从Docker Hub拉取镜像可能会遇到速度较慢的问题。为了提高拉取速度,我们可以将Docker的镜像源更改为阿里云等国内镜像源。下面详细介绍如何获取并配置阿里云的Docker镜像加速地址…

MES系统在装备制造行业核心应用场景介绍

MES软件在企业中有着广泛的应用场景,主要包括生产计划排程、生产过程监控、质量管理、设备管理、库存管理、数据分析等领域。 通过实时监控生产过程、收集数据、进行分析,MES软件可以帮助企业实现生产过程可视化、透明化,提高生产效率&#…

同三维T80006EH2-4K30编码器视频使用操作说明书:高清HDMI编码器,高清SDI编码器,4K超清HDMI编码器,双路4K超高清编码器

同三维T80006EH2-4K30编码器视频使用操作说明书:高清HDMI编码器,高清SDI编码器,4K超清HDMI编码器,双路4K超高清编码器 T80006EH2-4K30编码器 同三维,十多年老品牌,我们一直专注:视频采集卡、视频…

一二三应用开发平台应用开发示例(7)——文档功能实现示例

概述 在完成文件夹配置工作后,接下来配置文档管理系统最核心的管理对象“文档”。 依旧是使用平台低代码配置工作来配置,配置流程跟文件夹的配置是相同的,以下简要说明,重点是新涉及到的功能或注意点。 创建实体 配置模型属性 …