IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 解决ESlint,prettierrc,husky遇到的坑,配置完成后pre commit钩子函数没有触发问题 -> 正文阅读

[JavaScript知识库]解决ESlint,prettierrc,husky遇到的坑,配置完成后pre commit钩子函数没有触发问题

1.看这边文章之前,先给大家看下我这边这几个包的版本吧

注意看下husky这个版本,husky新版本和旧版本的用法是不一样的,husky(6.0.0)已经做了破坏性的变更,之前的设置方式已经失效了,所以才有可能导致你在commit的时候没有生效。这是导致我出现问题的根本原因,解决办法呢也很简单,在package.json中的script脚本中加入这句
然后运行下

npm run prepare

这个命令,该命令会在src同级目录下创建.husky/目录并指定该目录为git hooks所在的目录。

然后在运行下下面这个命令就会在.husky下面生成一个pre-commit脚本

npx husky add .husky/pre-commit "npm run lint-staged"

?这个脚本就是你在git commit 的时候他就会运行这个脚本执行? npm run lint-staged这个命令,这时候就解决了pre-commit不生效的问题。

下面我就给大家说下我怎样重头开始到配置完成的办法吧。

首先先安装下相应的工具:

npm install -D stylelint prettier eslint husky

// yarn 
yarn add stylelint prettier eslint husky  -D

然后在根目录下创建相应的文件

.stylelintrc.js文件配置
const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.stylelint,
};
<---------------------------------------->

.eslintrc.js文件配置
module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')]
};
<---------------------------------------->
.eslintignore配置

.eslintrc.js
node_modules
package.json
<---------------------------------------->
.prettierrc.js文件配置

const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.prettier,
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 100,
  overrides: [
    {
      files: '.prettierrc',
      options: { parser: 'json' },
    },
  ],
};

<---------------------------------------->
.prettierignore文件配置

**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production
.umi-test
node_modules

最后就是package.json文件

  "scripts": {
      ......
     //这里我省略了很多,只看下面的就行
    "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier",
    "lint:prettier": "prettier --check \"**/*\" --end-of-line auto",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "prettier": "prettier -c --write \"**/*\"",
    "prepare": "husky install"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write",
    ]
  },

配置完成之后呢就先运行下上面那两个命令npm run prepare和npx husky add .husky/pre-commit "npm run lint-staged"
然后就可以了。
本文写的有点粗糙,有很多不足之处还望谅解,欢迎留言

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-22 18:27:19  更:2022-04-22 18:32:08 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 23:50:46-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码