git hooks在哪里？ 如何使用 husky？

指點江山，激揚文字，糞土當年萬戶侯。

前情回顧

上篇文章大致講了Vue源碼的Dep和Watcher類,對於Watcher類的研究不夠深刻，這個等找時間在思考一下。今天來講一個有關代碼規范的問題。

通用規范

• 縮進兩個空格
• 使用單引號
• 使用const及let定義變量
• 變量名稱及函數名稱使用駝峰
• 符號，變量后要用一個空格做間隔
• css類名，使用連字符 -
• 禁止使用拼音-----顯得特別low

例如：

// 大括號 變量名 等號 都有一個空格的間隔
const { name, test } = obj;
// 函數示例
const getName = () => {
  return this.name;
}

　　

規范說到底其實還是個代碼書寫習慣問題，既然我們寫這個東西，盡量養成個好習慣。

重點內容一 git hooks

對於前端開發人員來說，很多人每天都在用git,可能也聽說過git hooks,git 的鈎子方法。但是仍然有一部分同學不知到它到底是做什么用的。

如果對linux命令稍微熟悉一點，可以在你本地的項目文件夾下執行如下命令。

// 進入本地項目 目錄 確保該項目是從git倉庫clone的
cd project-name
// 查看該文件夾下所有內容
ls -a 

如圖：

會看到列表中有個.git的文件夾，然后執行cd .git進入這個文件夾，接着執行ls查看文件夾的內容

如圖：

會看到有個hooks的文件夾，接着執行cd hooks && ls 進入文件夾 並查看內容

如圖：

會發現hooks文件夾中是一堆配置文件。借助這些hooks,可以實現很多有意思的事兒，例如持續集成,代碼規范等等

重點內容二 husky 和 lint-staged

• husky husky主要是作為git的鈎子使用，可以在提交代碼，push代碼的時候執行相應的代碼檢測命令。

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",  // 提交代碼時執行的命令
      "pre-push": "npm test", // push代碼時執行的命令
      "...": "..."
    }
  }
}

　　

• lint-staged

lint-staged是對暫存的文件進行檢測，可以配置在package.json中，也可以單獨進行配置

// package.json
"lint-staged": {
    "src/**/*.{js,vue}": [ // 指定對應文件，配置相應的優化
      "prettier --write", // 代碼格式化
      "eslint --cache --fix" // 修復 code style
    ]
  }

• 一般的配置。當然也可以根據項目的需要去定義自己的配置。

// package.json
"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "prettier --write",
      "eslint --cache --fix"
    ]
  }

今日總結

• git hooks配置的文件夾在什么地方
• husky,lint-staged是什么東西
• husky,lint-staged簡單的配置
• 這里僅僅做了簡單的講解，有復雜的配置，需要自己去找資料進行配置 ，比如它可以對css,甚至圖片進行處理

最后說兩句

1. 動一動您發財的小手，「點個贊吧」
2. 動一動您發財的小手，「點個在看」
3. 都看到這里了，不妨 「加個關注」

javascript基礎知識總結