在你的 Vue + Electron 项目里,引入 ESLint

在这里插入图片描述

因为我的项目是基于 Electron 平台的 Web 应用,使用 Vue 3 实现,而且用了 TypeScript,所以,在引入 ESLint 的时候,要考虑好几种规范的问题。

文章目录

  • 零、简介
    • 1. 规则
    • 2. 配置文件
    • 3. 共享配置
    • 4. 插件
    • 5. 解析器
    • 6. 自定义处理器
  • 一、在项目引入 ESLint
  • 二、使用配置文件
    • 1. 指定环境
    • 2. 层级关系
    • 3. 扩展
    • 4. 忽略文件
  • 三、在 Vue + Electron 项目中引入
  • 总结

零、简介

ESLint 是一个可配置的 JavaScript 代码检查工具。它帮助你发现并修复 JavaScript 代码中的问题。这些问题可能包括潜在的运行时错误、未遵循最佳实践或风格问题等。

1. 规则

规则是 ESLint 的核心构建模块。规则用于验证你的代码是否符合某种特定的期望,以及如果不符合期望应该采取什么措施。规则还可以包含特定于该规则的额外配置选项。

例如,分号规则(semi)允许你指定 JavaScript 语句是否应该以分号(;)结束。你可以设置规则,始终要求使用分号,或者要求语句永远不要以分号结束。

ESLint 包含数百个内置规则供你使用。你也可以创建自定义规则,或者通过插件使用其他人创建的规则。

2. 配置文件

ESLint 配置文件是一个地方,你可以在这里为你的项目设置 ESLint 的配置。你可以在配置文件中包含内置规则、指定你希望如何执行这些规则、带有自定义规则的插件、可共享的配置,以及你希望规则应用到哪些文件等等。

3. 共享配置

可共享配置(Shareable Configurations)是通过 npm 分享的 ESLint 配置。

通常,可共享配置用于使用 ESLint 的内置规则来强制执行风格指南。例如,可共享配置 eslint-config-airbnb-base 实现了流行的 Airbnb JavaScript 风格指南。

4. 插件

ESLint 插件是一个 npm 模块,它可以包含一组 ESLint 规则、配置、处理器和环境。通常,插件会包含自定义规则。插件可以用来强制执行风格指南,并支持 JavaScript 扩展(如 TypeScript)、库(如 React)和框架(如 Angular)。

插件的一个流行用例是强制执行框架的最佳实践。例如,@angular-eslint/eslint-plugin 包含了使用 Angular 框架的最佳实践。

5. 解析器

ESLint 解析器的作用是将代码转换成抽象语法树(AST),这样 ESLint 就可以对其进行评估。默认情况下,ESLint 使用内置的 Espree 解析器,它与标准的 JavaScript 运行时和版本兼容。

自定义解析器允许 ESLint 解析非标准的 JavaScript 语法。通常,自定义解析器作为可共享配置或插件的一部分包含在内,因此你不需要直接使用它们。

例如,@typescript-eslint/parsertypescript-eslint 项目中包含的一个自定义解析器,它允许 ESLint 解析 TypeScript 代码。这种解析器使得 ESLint 能够处理 TypeScript 特有的语法结构,从而在 TypeScript 项目中提供有效的代码检查和风格指导。

6. 自定义处理器

处理器的作用是从其他类型的文件中提取 JavaScript 代码,然后让 ESLint 对这些提取出来的 JavaScript 代码进行语法检查。此外,处理器还可以在 ESLint 解析 JavaScript 代码之前对其进行操作,比如转换或者预处理。

例如,eslint-plugin-markdown 插件包含了一个自定义的处理器,它允许你在 Markdown 文件的代码块内对 JavaScript 代码进行 lint 检查。这意味着,即使 JavaScript 代码嵌入在 Markdown 文件中,你也可以使用 ESLint 来检查这些代码的质量和风格,确保它们遵循你设定的规则。

这种处理器的使用扩展了 ESLint 的应用范围,使其不仅能够检查传统的 .js文件,还能够处理其他格式文件中的 JavaScript 代码,从而为开发者提供了更全面的代码质量保障。

一、在项目引入 ESLint

假设你的项目已经有了 package.json 文件(一般都有),在项目里首次引入 ESLint 使用:

npm init @eslint/config

在项目的根目录里,有 ESLint 的配置文件,可以是三种格式的,jsymljson,我推荐使用 json,因为如果你使用 js 的话,可能有模块标准的问题,比如你是 CommonJS 还是 ES Module 呢?跟项目自身的标准是否兼容?不如用 yml 或者 json 这种纯数据的格式。

ESLint 规则大概是这样的:

{"rules": {"semi": ["error", "always"],"quotes": ["error", "double"]}
}

上面的配置里面,有两条规则,第一条是关于分号(;)的,error 是报错的级别,可选的值还有 warnoff 分别是警告和关闭。后面的 always 的意思是,总是使用分号的意思,就是这条规则的设定值。第二条规则是 quotes 关于引号的,后面写着 double 的意思是总是使用双引号。

二、使用配置文件

ESLint 配置文件是一个地方,你可以在这里为你的项目设置 ESLint 的配置。你可以在配置文件中包含内置规则、指定你希望如何执行这些规则、带有自定义规则的插件、可共享的配置,以及你希望规则应用到哪些文件等等。

1. 指定环境

一个环境,提供了预定义的全局变量。例如,咱们的项目里用到了 Electron 和 Vue,而且,原理上是有 Chromium 环境的,所以我们设置:

{"env": {"browser": true,"node": true,"es6": true}
}

环境并不是互斥的。所以,如果你的代码里用到了多种环境的话,都可以设上。

2. 层级关系

可以在配置文件里,加一个 root: true 告诉 ESLint,这已经是顶层配置文件了,让 ESLint 不要再向上级目录搜寻配置了。

如果我们的某个子目录使用另外一种规则,我们也可以在子目录里放置一个 .eslintrc.json 配置文件,并设定这个,这样就会阻断 ESLint 使用根目录的配置规则。

3. 扩展

我们确实可以使用 rules 键来指定大量的规则,不过,我们更多还是使用 extends 来扩展。比如:


"extends": ['eslint:recommended','plugin:vue/vue3-essential','@vue/eslint-config-typescript','@vue/eslint-config-prettier/skip-formatting','.eslintrc-auto-import.json',]

这里扩展了很多东西,一个是官方推荐的规则集,第二个是 Vue 3 的插件,第三、四个可能是“共享配置”,而最后一个则是根目录里的另一个配置文件,可以说,这个扩展是无所不能。

4. 忽略文件

有时候,我们会在目录里放一些别的文件,比如我在项目里放入了一个 blog 目录,这里使用 Hexo 的生成器维护的一个文档站点,并用 GitHub Actions 自动发布到 GitHub Pages。这里也引用了大量的 js 代码,但是这些代码本质上跟我的项目无关,所以,需要忽略掉这个目录,可以写成:

{"ignorePatterns" : [ "blog/"]
}

这样 ESLint 在扫描的时候,就会跳过这个目录,这个模式的配置,支持 blob 语法,如 src/**/__tests__/* 这种模式。

三、在 Vue + Electron 项目中引入

经过研究,我发现,在 Vue 的项目里,我们还是只能用 js 格式作为 eslint 的配置文件:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,env: {node: true,browser: true,es6: true,},extends: ['eslint:recommended','plugin:@typescript-eslint/eslint-recommended','plugin:vue/vue3-essential','@vue/eslint-config-typescript','@vue/eslint-config-prettier/skip-formatting','.eslintrc-auto-import.json',],parserOptions: {ecmaVersion: 'latest',},ignorePatterns: ['blog/'],
}

首先看第一行,这个配置文件的第一行 /* eslint-env node */ 是一个 ESLint 的环境指令。它告诉 ESLint 这个文件是在 Node.js 环境中运行的,因此 ESLint 应该预定义所有 Node.js 全局变量,例如 process__dirname 。这样,当你在代码中使用这些全局变量时,ESLint 不会报告 “未定义的变量” 错误。

第二行 require('@rushstack/eslint-patch/modern-module-resolution') 是在引入一个名为 @rushstack/eslint-patch/modern-module-resolution 的模块。这个模块是 Rushstack 的 ESLint 补丁,它改变了 ESLint 的模块解析机制,使其能够更好地支持现代的 JavaScript 模块解析规则,例如 Node.js 的 exports/imports 字段,或者 package.json 中的 exports 字段。这样可以帮助 ESLint 更准确地找到和解析项目中的模块。

也就是为了加载这个补丁,如果我们换成 json 格式的话,就没办法写 require 语句了。而且,看了官方的文档,下一代的配置文件格式,也是 js 格式的。

这里我们用的是官方创建项目的模板里带的一些推荐规则,都是以插件的形式提供的。我觉得这样的形式很好,其实编码规范的事情无所谓好坏,关键是每个人都去做。然后真的形成统一的风格,prettier 那个工具也是一样的,更加极端一点,直接内置很多规则在里面,就是为了节省团队的时间,大家省得去讨论哪种样式更好,而是用了这个工具后,就立刻接受了一整套规则,并且跟工具强制绑定。

我看有的项目还会配置 husky,在 git 的 commit 环节注入检查和格式化,使得代码强制风格一致。让协作变得更为简单。

总结

本文介绍了 ESLint 的一般性用法,以及其配置文件的组成部分,最后介绍了在 Vue + Electron 的项目里如何配置 ESLint。

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

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

相关文章

Vue开发实例(九)动态路由实现左侧菜单导航

之前在【Vue开发实例(六)实现左侧菜单导航】文中实现了菜单的导航,本篇是在那个基础上改造的。 动态路由实现左侧菜单导航 一、动态菜单创建二、根据菜单数据来创建路由三、添加路由已加载标记,省的每次点击菜单都要加载 一、动态…

【设计模式 01】单例模式

单例模式,是一种创建型设计模式,他的核心思想是保证一个类只有一个实例(即,在整个应用程序中,只存在该类的一个实例对象,而不是创建多个相同类型的对象),并提供一个全局访问点来访问…

java012 - Java集合基础

1、集合基础 1.1 集合概述 引用数据类型包括:类、接口、数组[] 1.2 ArrayList构造和添加方法 代码: 空集合对象:[] add() add(int index,E element): 1.3 ArrayList集合常用方法

Stable Diffusion 模型分享:Henmix_Real(人像、真实、写真、亚洲面孔)

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八下载地址模型介绍 作者述:这个模型试图改

Springboot教程(五)——单元测试

idea中一般使用JUnit进行单元测试 基本使用 我们可以在idea的test文件夹下的XXXXApplicationTests内进行单元测试: 可以在Test标注的方法上写测试代码: SpringBootTest class C0101ApplicationTests {Testfun contextLoads() {println("Hello …

基础二分学习笔记

模板 : 个人倾向第一种 ; 整数二分 : 最大化查找 : 可行区域在左侧 : 查找最后一个<q的数的下标 : int find(int q){// 查找最后一个 < q 的下标 int l 0 , r n 1 ;while(l 1 < r){int mid l r >> 1 ;if(a[mid]<q) l mid ;else r mid ;}return…

土壤类型数据

国家地球系统科学数据中心

AGM CPLD (AGRV2K )的时钟(外部时钟和片上内部振荡器)

AGM CPLD &#xff08;AGRV2K &#xff09;的时钟(外部时钟和片上内部振荡器) 外部晶振 与 内部振荡器&#xff1a; mcu 和 cpld 联合编程时&#xff0c; 整颗芯片需要一颗外部晶振。 &#xff08;芯片有内部振荡器&#xff0c; 但误差较大&#xff0c; 校准后 5%以内误差&…

Electron通过预加载脚本从渲染器访问Node.js

问题&#xff1a;如何实现输出Electron的版本号和它的依赖项到你的web页面上&#xff1f; 答案&#xff1a;在主进程通过Node的全局 process 对象访问这个信息是微不足道的。 然而&#xff0c;你不能直接在主进程中编辑DOM&#xff0c;因为它无法访问渲染器 文档 上下文。 它们…

【软考】数据库的三级模式

目录 一、概念1.1 说明1.2 数据库系统体系结构图 二、外模式三、概念模式四、内模式 一、概念 1.1 说明 1.数据的存储结构各不相同&#xff0c;但体系结构基本上具有相同的特征&#xff0c;采用三级模式和两级镜像 2.数据库系统设计员可以在视图层、逻辑层和物理层对数据进行抽…

matplotlib散点图

matplotlib散点图 假设通过爬虫你获取到了北京2016年3, 10月份每天白天的最高气温(分别位于列表a, b), 那么此时如何寻找出气温和随时间(天)变化的某种规律? from matplotlib import pyplot as pltx_3 range(1, 32) x_10 range(51, 82)y_3 [11,17,16,11,12,11,12,6,6,7,8…

试手一下CameraX(APP)

书接上回。 首先还是看谷歌的官方文档&#xff1a; https://developer.android.com/media/camera/camerax?hlzh-cn https://developer.android.com/codelabs/camerax-getting-started?hlzh-cn#1 注&#xff1a;这里大部分内容也来自谷歌文档。 官方文档用的是Kotlin&…

Day14:信息打点-主机架构蜜罐识别WAF识别端口扫描协议识别服务安全

目录 Web服务器&应用服务器差异性 WAF防火墙&安全防护&识别技术 蜜罐平台&安全防护&识别技术 思维导图 章节知识点 Web&#xff1a;语言/CMS/中间件/数据库/系统/WAF等 系统&#xff1a;操作系统/端口服务/网络环境/防火墙等 应用&#xff1a;APP对象/…

小程序图形:echarts-weixin 入门使用

去官网下载整个项目&#xff1a; https://github.com/ecomfe/echarts-for-weixin 拷贝ec-canvs文件夹到小程序里面 index.js里面的写法 import * as echarts from "../../components/ec-canvas/echarts" const app getApp(); function initChart(canvas, width, h…

Vscode 使用SSH远程连接树莓派的教程(解决卡在Downloading with wget)

配置Vscode Remote SSH 安装OpenSSH 打开Windows开始页面&#xff0c;直接进行搜索PowerShell&#xff0c;打开第一个Windows PowerShell&#xff0c;点击以管理员身份运行 输入指令 Get-WindowsCapability -Online | ? Name -like OpenSSH* 我是已经安装好了&#xff0c;…

学会玩游戏,智能究竟从何而来?

最近在读梅拉妮米歇尔《AI 3.0》第三部分第九章&#xff0c;谈到学会玩游戏&#xff0c;智能究竟从何而来&#xff1f; 作者: [美] 梅拉妮米歇尔 出版社: 四川科学技术出版社湛庐 原作名: Artificial Intelligence: A Guide for Thinking Humans 译者: 王飞跃 / 李玉珂 / 王晓…

基于springboot实现计算机类考研交流平台系统项目【项目源码+论文说明】

基于springboot实现计算机类考研交流平台系统演示 摘要 高校的大学生考研是继高校的高等教育更上一层的表现形式&#xff0c;教育的发展是我们社会的根本&#xff0c;那么信息技术的发展又是改变我们生活的重要因素&#xff0c;生活当中各种各样的场景都存在着信息技术的发展。…

Debezium发布历史163

原文地址&#xff1a; https://debezium.io/blog/2023/09/23/flink-spark-online-learning/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Online machine learning with the data streams from the database …

SpringBlade CVE-2022-27360 export-user SQL 注入漏洞分析

漏洞描述 SpringBlade是一个基于Spring Cloud和Spring Boot的开发框架&#xff0c;旨在简化和加速微服务架构的开发过程。它提供了一系列开箱即用的功能和组件&#xff0c;帮助开发人员快速构建高效可靠的微服务应用。该产品/api/blade-user/export-user接口存在SQL注入。 漏…

Java - List集合与Array数组的相互转换

一、List 转 Array 使用集合转数组的方法&#xff0c;必须使用集合的 toArray(T[] array)&#xff0c;传入的是类型完全一样的数组&#xff0c;大小就是 list.size() public static void main(String[] args) throws Exception {List<String> list new ArrayList<S…