在大前端时代,前端的各种工具链穷出不断,有eslint
, prettier
, husky
, commitlint
等, 东西太多有的时候也是trouble
???,怎么正确的使用这个是每一个前端开发者都需要掌握的内容,请上车???
eslint
本次前端工程化的项目是基于react来的,vue用户也是同样的道理,只是有个别的依赖包不一样。
使用eslint
的生态链来规范开发者对js/ts
基本语法的规范。防止团队的成员乱写.
这里主要使用到的eslint的包有以下几个:
"eslint": "^8.33.0", // 这个是eslint的主包 "eslint-plugin-react": "^7.32.2", // 这是react基于eslint来做的语法规范插件 "eslint-plugin-react-hooks": "^4.6.0", // 这是 react-hooks 语法基于eslint做的插件 "@typescript-eslint/eslint-plugin": "^5.50.0", // typescript 基于eslint来做的插件 "@typescript-eslint/parser": "^5.50.0", // typescript 基于eslint做的语法解析器,使得eslint可以约束ts语法
使用的以下语句来按照依赖:
pnpm i eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
接下来需要对eslint的规范写入配置文件中,可以在项目的根目录下面建立一个 .eslintrc.cjs
module.exports = { 'env': { 'node': true, // 标志当前的环境,不然使用module.exports 会报错 'es2021': true }, extends: [ 'eslint:recommended', // 使用eslint推荐的语法规范 'plugin:react/recommended', // react推荐的语法规范 'plugin:@typescript-eslint/recommended' // ts推荐的语法规范 ], parser: '@typescript-eslint/parser', // 使用解析器来解析ts的代码,使得eslint可以规范ts的代码 parserOptions: { ecmaFeatures: { jsx: true // 允许使用jsx的语法 }, ecmaVersion: 'latest', // es的版本为最新版本 sourceType: 'module' // 代码的模块化方式,使用module的模块方式 }, plugins: ['react', '@typescript-eslint', 'react-hooks'], // 使用对应的react, react-hooks, @typescript-eslint 等插件 rules: { quotes: ['error', 'single'], // 配置单引号的规则,如果不是单引号,报错 semi: 'off', // 不需要使用分号; 'react/react-in-jsx-scope': 'off' // 在jsx中不需要导入 react的包 } }
接下来在package.json 的 scripts 中加入一条命令
"lint": "eslint --ext .ts,.tsx,.js,.jsx ./" // 使用eslint 规范 ts,tsx,js,jsx的代码
效果
代码中的不规范的格式就暴露出来了,现在可以来修复并且格式化代码。但是在格式化代码方面,
prettier
做的更好点,所以咱们来使用prettier
来进行代码格式化
prettier
prettier
是一款开源的代码格式化包,支持多种代码编写工具,常见的 vscode
, webstorm
等,他都是支持的,那么怎么给他集成起来呢?
使用下面语句来安装依赖:
pnpm i prettier eslint-plugin-prettier eslint-config-prettier
下面来解释下,这些包是干啥用的,不然稀里糊涂安装了它
"prettier": "^2.8.3", // prettier 主包 "eslint-config-prettier": "^8.6.0", // eslint 和prettier的共同配置 "eslint-plugin-prettier": "^4.2.1", // 在eslint当中,使用prettier为插件,才能一起使用
安装好依赖后,咱们还需要在 eslitrc.cjs
中加入prettier的配置如下:
{ extends:[ ..., + 'prettier', // prettier + 'plugin:prettier/recommended' // prettier推荐的配置 ], + plugins:[...,'prettier'], rules: { + 'prettier/prettier': 'error', // eslint 和prettier 用prettier的错误 } }
接下来在package.json
中添加一段脚本
+ "prettier": "eslint --fix --ext .ts,.tsx,.js,.jsx --quiet ./"
此时,咱们还需要配置哪些文件是不需要进行代码格式化的,所以在根目录下面建立 .prettierignore
增加如下内容:
node_modules package.json pnpm-lock.yaml dist
效果
修复成功,但是这里还报了一个警告,这个的解决办法如下:
在eslintrc.cjs
的最后增加上一段配置如下:
+ settings: { + react: { + version: 'detect' + } + }
配置自动格式化
每一次都需要在终端执行脚本,有点小复杂,能不能设置自动格式化呢?
答案是可以的
- 打开设置
- 输入
fomatter
,然后选中文本编译器后,选择prettier-Code formatter
- 然后搜索
formate on save
,选中即可
就可以出现下面的效果了:
按
ctrl + s
会自动的格式化代码哦???
husky
到上面为止,代码的格式化工具和代码规范检查就好了,这是本地的,所以咱们还需要在提交代码的时候,在commit 之前,进行 prettier 操作,就不需要手动啦。
使用脚本安装下面的依赖包
pnpm i husky -D
我们在终端通过 npx husky install
来初始化 husky
我们还需要生成pre-commit
钩子的时候来执行npm run lint
npx husky add .husky/pre-commit "npm run lint" // 这句话的意思是说,在commit之前先执行 npm run lint脚本
安装完成后,会在 .husky 目录中新增一个文件 pre-commit
需要注意的是,我们需要在 package.json
注册 prepare
命令,在项目进行 pnpm i
之后就行 Huksy
的安装,命令如下:
+ "prepare": "husky install"
上面咱们是自己手动
npx husky install
的,我们需要让后面使用咱们配置的人自动来初始化husky
但是大家如果再深入一步,就会想到???。既然我内容都管控好了,是不是需要把 commit -m 'xxx'
中的msg
也管控下呀???
使用下面的命令来安装包:
pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D
包意思解析
"@commitlint/cli": "^17.4.2", // 规范提交信息 "@commitlint/config-conventional": "^17.4.2", // commitlint 常用的msg配置 "commitlint": "^17.4.2" // commitlint 主包
安装好这些包后,需要在根目录添加一个 .commitlintrc.cjs
来配置咱们的commitlint
的配置:
module.exports = { extends: ['@commitlint/config-conventional'] }
有了这些配置,commit是否生效呢?
答案是
no
, 还需要在git hooks
中添加一个方法
在终端执行下面的命令
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
然后会在.husky
中生成一个新的文件commit-msg
效果
接下来就是见证奇迹的时刻???
对于乱写commit 信息就过不了哦???
lint-staged
对于细心的同学可能会发现,我们每一次提交都会 prettier
整个目录的所有问题,大大的降低了咱们编码的速度。所以咱们还需要做一件事情,那就是 只格式化需要提交的代码,其他的就不需要格式化了
使用下面命令安装依赖
pnpm i lint-staged -D
然后在package.json
中新增如下内容
+ "lint-staged": { + "**/*.{js,jsx,tsx,ts}": [ + "eslint --fix" + ] + }
上面那段脚本的意思是 只对
.js,.jsx, .ts,.tsx
后缀文件进行eslint的修复,其他的就不进行格式化和修复了
有了这个,还需要对 pre-commit
这个钩子就行修改内容
#!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" - npm run lint + npx --no -- lint-staged
如此就大功告成啦???
(学习视频分享:web前端入门)
以上是2023年值得了解的几个前端格式化工具【总结】的详细内容。更多信息请关注PHP中文网其他相关文章!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

Dreamweaver Mac版
视觉化网页开发工具

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),