Allen's blog Allen's blog
首页
面经
算法 (opens new window)
分类

Allen

前端CV工程师
首页
面经
算法 (opens new window)
分类
  • Javascript

  • TypeScript

  • CSS

  • Vue

  • React

  • 框架和构建工具

  • 工具库

    • Dayjs使用笔记
    • Viewjs图片查看器
    • better-scroll无限滚动
    • ESLint笔记
    • fundlint代码规范工具开发
      • 各个工具配置的部分知识点
        • eslint 配置
        • stylelint 配置
        • extends
        • plugins
        • stylelint 报错
  • 常见业务场景

  • Bug

  • 项目实战

  • 前端
  • 工具库
Allen
2023-03-06
目录

fundlint代码规范工具开发

chalk版本大于等于 5 就是ES模块了,最新的CommonJS模块是版本4.1.2

包名 版本 简介
chalk 4.1.2 作用:给终端输出的字符添加颜色。
ora 5.4.1 作用:控制台进度条美化
inquirer 8.2.3 选项式交互工具
terminal-link 2.1.1 在终端创建可点击链接
is-docker 2.2.1 检测当前进程是否是在 docker 容器中
strip-ansi 6.0.1 去除 ansi escape code。
ansi 转义序列是一种用于控制终端输出的
色彩、样式、光标位置以及控制终端行为的特殊字节
execa 5.1.1 可以替代 Node.js 原生 child_process 模块,可以交互式 shell,并且跨平台兼容
fs-extra 11.1.1 可以替代 Node.js 的 fs 模块
glob 9.3.4 匹配带有通配符的文件路径名

fundlint 的入口是 cli.ts,从 cli.ts,接收并处理命令行参数

参数 作用
init 初始化配置 linter 等工具

其他的功能暂时不提供支持

文件代码规范检测交给 eslint 和 stylelint git 提交代码规范检测交给 lint-staged 工具处理,fundlint 不单独进行处理,仅仅进行 lint-staged 的配置 代码修复工作交给 eslint 和 stylelint,fundlint 仅配置代码修复命令,不参与检测工作

# 各个工具配置的部分知识点

项目一般文件很多,如果进行全局代码检测可能会出现大片检测不通过,尤其是在老项目上,这不利于业务开发的进行,本来我们使用 linter 工具是为了编写维护性好的代码,而这一切都是服务于业务开发的,如果开发效率降低得很多,那就有些本末倒置了。

对于代码规范执行严格的团队可以采用全局检测,这也便于后期维护,及时纠错也是比较好的选择。

在平时的工作实践中,采用命令行的方式进行局部代码规范检测和格式化往往有较高的性能,这依赖于代码编辑器 VSCode 等的插件支持。后面会详细介绍 VSCode 插件

# eslint 配置

目前 fundlint 支持 nuxt2+javascript 和 nuxt3+typescript,针对 stylelint 二者的配置完全一致,而 eslint,二者的解析器的辅助解析器不同。下面介绍一下 eslint 配置的差别:

首先 eslint 配置项 parser 用于解析文件,比如使用 eslint 命令行eslint . --ext .vue --fix,parser 解析器会解析后缀为.vue的所有文件,提取一种的 js 代码,然后交给 eslint 执行规则检测。

如果 vue 文件采用的是 ts 编写,需要在 parserOptions.parser 配置项中配置@typescript-eslint/parser,这个配置项是 eslint 解析器的辅助解析器,在解析器提取完代码后,辅助解析器会参与代码检测。默认的解析器是 espree,默认的辅助解析器也是 espree,在 js 项目中,我们一般使用的是@babel/eslint-parser辅助解析器,在 ts 项目中,我们一般使用的是@typescript-eslint/parser解析器。

parserOptions配置项除了parser之外,还有其他选项,需要参考主解析器的文档。比如vue-eslint-parser要支持 jsx,需要在 parserOptions 配置项中添加jsx: true

# stylelint 配置

stylelint 版本做了大的变动,不同版本的 stylelint 需要搭配不同版本的 VSCode 插件。

stylelint-config-recommended-vue要求 stylelint 版本>=14

# extends

stylelint 配置项 extends 捆绑了插件、自定义语法解析器、选项和规则配置。可以从其他的配置中扩展过来。extends 为一个数组,越往后的数组元素优先级越高。本文件的除了 extends 以外配置优先级最高。

extends 的值是 locater,最终会使用 require()方法导入。它可以有多种格式,但最后必须可以用 require.resolve()解析

  • node_modules 的一个模块 ming
  • 一个 js/json 文件的绝对路径
  • 一个 js/json 文件的相对路径,相对于当前的配置文件

# plugins

插件是自定义规则,或者特殊的方法、工具、非标 CSS 特性或者特殊使用情况的一套配置

# stylelint 报错

在 vue3 项目可以使用,功能也没有问题,同样的配置,在 vue2 项目上,一直报错,说

上次更新: 2023/12/16, 09:22:46
ESLint笔记
事件委托

← ESLint笔记 事件委托→

最近更新
01
rollup使用配置文件rollup.config.ts打包
12-08
02
package.json导出类型
12-08
03
关键问题方案
11-17
更多文章>
Theme by Vdoing | Copyright © 2023-2023 Allen | Github
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式