宝塔设置加速wordpress站点,搜索引擎营销方法,仿wordpress站,南昌vi设计公司因为我的项目是基于 Electron 平台的 Web 应用#xff0c;使用 Vue 3 实现#xff0c;而且用了 TypeScript#xff0c;所以#xff0c;在引入 ESLint 的时候#xff0c;要考虑好几种规范的问题。 文章目录 零、简介1. 规则2. 配置文件3. 共享配置4. 插件5. 解析器6. 自定义…
因为我的项目是基于 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/parser 是 typescript-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 是报错的级别可选的值还有 warn 和 off 分别是警告和关闭。后面的 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。
