前端项目工程化搭建

ESLint

在开发过程中,需要遵循一些规范,可以使用下面的工具来配置不同项目需要遵循的规范,来帮助我们检查错误、约束开发过程。

ESLint 配置

使用 Taro CLI 创建的项目,会自动生成 .eslintrc 文件。只需要在这个文件的 rules 配置项中配置相应的规则,在开发过程中,编译器会自动检查所写的代码是否符合规范,不规范的代码编译器会自动提示。

一些常见的 ESLint 规则如下:

{
  // TODO:待补充
  "rules": {
    // 禁止出现未使用过的变量
    "no-unused-vars": "off",
    // 缩进风格
    "indent": ["error", 2],
    // 是否应该在行尾使用分号
    "semi": ["error", "always", { "omitLastInOneLineBlock": true }],
    // 强制使用一致的单引号
    "quotes": ["error", "single"],
    // 最后一行
    "eol-last": 1,
    // 强制在 JSX 属性中一致地使用双引号或单引号
    "jsx-quotes": ["error", "prefer-single"],
    // 未重新赋值的变量使用 const 而不是 let
    "prefer-const": "warn"
  }
}

使用 TypeScript 的项目,如若配置完 ESLint,对于不规范的代码编译器没有正常给出提示。有可能是 ESLint 跳过了对 ts 文件的检查,可以对全局 settings.json 文件加上如下配置:

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  "typescriptreact"
]

此时,尝试编写一些不规范的代码,可以看到编译器是会正常给出提示信息的:

当然,我们也可以在 package.json 文件中的 scripts 配置项新增一条 lint 命令,用命令来检查所有不规范的代码:

再在终端运行 npm run lint 命令,终端中也会给出相应的报错信息,以及报错信息所在的文件:

保存时自动修复 ESLint 错误

至此我们的编译器已经非常智能了。虽然编译器能自动识别不规范的代码,并给出提示。但是对于某些不规范的代码,仅仅只是因为多了或者少了一个分号、缩进不规范、单双引号使用不规范等等,编译器就要强制我们手动改正。这样还是对开发者不太友好。

能不能想个办法,让这些很明显的错误,可以一键自动修复呢?

答案是可以的。

  • 首先需要下载 ESLint 插件。

  • 下载完成之后,再在全局的 settings.json 文件中加入如下配置:
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

在刚刚不规范的文件中,按 Command+S 保存一下,发现一些格式错误确实被自动修复了。

至此,ESLint 一键修复错误就完成了。

提示:如果没有生效,可以重新打开窗口试试(>reload window)。

Git Hooks

提交时自动校验

因为提交代码是随意的,我们并没有给它设置校验,所以很有可能一不小心就会把不符合规范甚至有错误的代码提交至远程仓库。

为了让项目的代码符合规范,每次将代码提交至远程仓库前,都需要手动执行 npm run lint 来确保代码是符合规范的,这样还是不够智能。所以有了下面两种工具,在提交代码前,会自动执行一些命令,来帮我们校验代码。这就是 git hooks

  • husky

husky 属于 git hooks 工具,可配置让其在 git 的不同生命周期,执行不同的命令,来约束我们的开发。

1.首先安装 husky

$ npm i -D husky

2.安装 git hooks

$ npx husky install

安装完成之后项目根目录下面会多出一个 .husky 文件,用来存放后续我们添加的 git hooks

3.如果想让别人安装我们的项目依赖后,自动启用 git hooks,可以在 package.json 添加 prepare 命令:

preparenpm 操作生命周期中的一环,在执行 install 的时候会按生命周期顺序执行相应钩子。

npm7 生命周期钩子: preinstall -> install -> postinstall -> prepublish -> preprepare -> prepare -> postprepare

4.添加 pre-commit 钩子。

$ npx husky add .husky/pre-commit "npx lint-staged"

这里的 npx lint-staged 为校验文件的命令,会在提交代码之前自动执行,可自行修改命令。

5.添加 commit-msg 钩子。commit-msg 钩子用来规范提交代码时的提交信息,具体的 commit-msg 规范可以参考这里。

$ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' 

6.添加完 commit-msg 钩子之后,还需要安装 commitlint 依赖。因为在执行 commit-msg 钩子时,使用到了 commitlint 来规范提交信息。

$ npm i @commitlint/cli @commitlint/config-conventional -D
7.最后,配置 commitlint.config.js 文件。新建一个 commitlint.config.js 文件并加入以下内容:
module.exports = {
  extends: ['@commitlint/config-conventional']
};

如果新建的文件提示 import/no-commonjs 报错,禁用 CommonJS 语法。可以禁用该 ESLint 规则。

这个时候来提交一下代码吧,看看效果如何。这里没有遵循 commit message 规范,缺乏 git commit 的类别。

可以发现编译器提示提交信息缺乏类型,没有提交成功。

再用规范的 commit message 提交一次,可以提交成功了

  • lint-staged

能够检查本地代码的改动,只校验改动过的文件,大大提高校验的效率。

1.需要先安装 lint-staged
$ npm i -D lint-staged

2.在 package.json 文件中配置需要校验的文件及命令:
 
"lint-staged": {
  "*.(js|ts|jsx|tsx)": "eslint --cache"
}

配置完成之后,在我们提交代码之前,就会自动执行 pre-commit hook 中的 npx lint-staged 命令。如果我们我们的代码不符合 ESLint 规范,代码就不会提交成功。

注意:node 的版本不要太低,否则在运行 npx lint-staged 的时候会报错。


 若有收获,就点个赞吧

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android逆向解析加壳与脱壳技术

加壳 加壳是指在 APK 文件中插入额外的代码或数据,使得原始代码难以被分析和反编译。通常加壳是为了保护软件的知识产权或者防止逆向工程。下面是 Android 加壳的一般流程: 选择加壳工具:选择合适的加壳工具进行加壳,比如市面上…

K8S:二进制安装K8S(单台master)安装etcd和master

系列文章目录 文章目录 系列文章目录一、安装K8S1.系统初始化配置2.部署docker引擎3.部署etcd集群 二、1.2. 总结 一、安装K8S 1.系统初始化配置 注意:该操作在所有node节点上进行,为k8s集群提供适合的初始化部署环境 #所有节点执行 systemctl stop f…

POJ - 2287 Tian Ji -- The Horse Racing

题目来源 2287 -- Tian Ji -- The Horse Racing (poj.org) 题目描述 田忌赛马是中国历史上一个著名的故事。 这个故事发生在2300年前,田忌是齐国的一个大官,他喜欢和齐王以及其他公子赛马。 田忌和齐王都有三类马,分别是下等马&#xff0…

【Vue】学习笔记-创建Vue3.0工程

创建Vue3.0工程 使用vue-cli创建查看vue/cli版本,确保vue/cli版本在4.5.0以上安装或者升级你的vue/cli创建启动 使用vite创建创建工程进入工程目录安装依赖运行 使用vue-cli创建 官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-…

BioXFinder生物数据库

BioXFinder是目前国内第一个也是国内唯一一个生物信息数据库,由享融智云公司精心研发,主要针对生物科研工作者的综合性生物数据检索及分析平台,汇集了核酸、蛋白、蛋白结构、代谢通路和信号通路信息,解决海外数据访问难、访问慢的…

【新星计划·2023】Linux是什么?它与Windows有什么区别?

作者:Insist-- 个人主页:insist--个人主页 作者会持续更新网络知识和python基础知识,期待你的关注 目录 一、Linux是什么? 二、Linux的应用领域 1、服务器领域 2、嵌入式领域 3、虚拟化 三、Linux的未来 1、云计算 2、大数…

玩转ChatGPT:回答审稿人问题

一、写在前面 前段时间一篇时间序列预测的文章返修,还挺幸运的,给了个小修。 不过问题也问得有点刁钻,应该是个行家。 想到手头有小Chat,打算使用TA来辅助我回答审稿人问题。 以下展示仅仅提供一个工作流和思路,具体…

高级SQL语句

目录 MySQL 高级(进阶) SQL 语句函数数学函数:聚合函数字符串函数: 连接查询inner join(内连接):left join(左连接):right join(右连接): CREATE VIEW(视图)UNION(联集)C…

OpenAI ChatGPT 使用示例(程序员)

作为一个程序员,当知道ChatGPT出来之后或者GPT3出来的时候,我是有喜有忧,喜的是它可以帮我写代码,重构代码,写注释,写测试,,。哇,听起来好刺激,我可以从此以后…

探索安卓内容提供者:构建、访问和管理数据【复习】

文章目录 一 ContentProvider1.1 数据模型- **ContentProvider 使用基于数据库模型的简单表格来提供需要共享的数据**,在该表格中,每一表示一条记录,而每一列代表特定类型和含义的数据,并且其中每一条数据记录都包含一个名为“_ID…

数字图像处理 基于matlab、opencv计算图像的梯度方向和梯度幅值

一、图像的梯度 1、简述 图像可以被视为标量场(即二维函数)。 通过微分将标量场转换为矢量场。 梯度是一个向量,描述了在x或y方向上移动时,图像变化的速度。我们使用导数来回答这样的问题,图像梯度的大小告诉图像变化的速度,而梯度的方向告诉图像变化最…

【C++学习】C++入门 | 引用 | 引用的底层原理 | auto关键字 | 范围for(语法糖)

写在前面: 上一篇文章我介绍了缺省参数和函数重载, 探究了C为什么能够支持函数重载而C语言不能, 这里是传送门,有兴趣可以去看看:http://t.csdn.cn/29ycJ 这篇我们继续来学习C的基础知识。 目录 写在前面&#x…

图像金字塔

​ 图像金字塔是由一幅图像的多个不同分辨率的子图构成的图像集合。是通过一个图像不断的降低采样率产生的,最小的图像可能仅仅有一个像素点。下图是一个图像金子塔的示例。从图中可以看到,图像金字塔是一系列以金字塔形状排列的、自底向上分辨率逐渐降低…

【数字图像处理】3.对比度增强

目录 3.1 灰度直方图 3.2 线性变换 3.3 直方图正规化 3.4 伽马变换 3.5 全局直方图均衡化 3.6 CLAHE 对比度增强是图像增强的一种,它主要解决的是图像的灰度级范围较小造成的对比度较低的问题,目的是将图像的灰度级增强到指定范围,使得…

实战:用docker-compose容器化springboot项目

文章目录 前言技术积累docker-compose定义docker-compose文件参数docker-compose命令 实战演示1、创建挂载路径2、编写docker-compose.yml3、启动并管理容器 写在最后 前言 前面我们学习和实战了用dockerfile构建镜像,通过镜像可以任意在docker环境容器化部署项目。…

Opencv-C++笔记 (7) : opencv-文件操作XML和YMAL文件

文章目录 一、概述二、文件操作三、打开文件四、写入五、读写个人源码 一、概述 除了图像数据之外,有时程序中的尺寸较小的Mat类矩阵、字符串、数组等 数据也需要进行保存,这些数据通常保存成XML文件或者YAML文件。本小节中将介绍如何利用OpenCV 4中的函…

神经网络:卷积操作

当谈到计算机视觉中的网络模型结构时,卷积操作是其中一个关键的组成部分。卷积操作是一种基于局部区域的操作,它在计算机视觉中用于图像处理和特征提取。 卷积操作的原理如下: 给定一个输入图像和一个称为卷积核(或滤波器&#x…

【ARIMA-SSA-LSTM】合差分自回归移动平均方法-麻雀优化-长短期记忆神经网络研究(Python代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

前端Vue自定义数字输入框 带加减按钮的数字输入框组件

前端Vue自定义数字输入框 带加减按钮的数字输入框组件&#xff0c; 下载完整代码请访问uni-app插件市场地址&#xff1a;https://ext.dcloud.net.cn/plugin?id13163 效果图如下&#xff1a; # cc-numbox #### 使用方法 使用方法 <!-- title: 标题 isSetMax: 是否设置最…

synchronized原理

Synchronized能够实现原子性和可见性&#xff1a;在Java内存模型中&#xff0c;synchronized规定&#xff0c;线程在加锁时&#xff0c;先清空工作内存→在主内存中拷贝最新变量的副本到工作内存→执行完代码→将更改后的共享变量的值刷新到主内存中→释放互斥锁。 synchroniz…