前端代碼風格自動化系列（三）之Lint-staged

在咱們介紹了Husky、Commitlint以後，來看一個前端文件過濾的工具Lint-staged，代碼的格式化確定會涉及到文件系統，通常工具會首先讀取文件，格式化操做以後，從新寫入。對於較大型的項目，文件衆多，首先遇到的就是性能問題，雖然如Eslint之類的也有文件過濾配置，但畢竟仍是對於匹配文件的全量遍歷，如全量的.js文件，基本達不到性能要求，有時還會誤格式化其餘同窗的代碼，所以咱們引入Lint-staged，一個僅僅過濾出Git代碼暫存區文件(被committed的文件)的工具。

安裝

npm install --save-dev lint-staged husky

配置

首先明確一下，Lint-staged僅僅是文件過濾器，不會幫你格式化任何東西，因此沒有代碼規則配置文件，須要本身配置一下，如：.eslintrc、.stylelintrc等，而後在package.json中引入。

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": ["eslint --fix", "git add"]
  }
}

當文件變化，咱們git commit它們，pre-commit鉤子會啓動，執行lint-staged命令，咱們對於lint-staged如上文配置，對本次被commited中的全部.js文件，執行eslint --fix命令和git add,命令，前者的的目的是格式化，後者是對格式化以後的代碼從新提交。

除了在package.json中配置，也能夠在.lintstagedrc、lint-staged.config.js文件中，lint-staged的經常使用選項除了liners以外，還有ignore、concurrent 等，具體參考文檔：

{
  "lint-staged": {
    "linters": {
      "*.{js,scss}": ["some command", "git add"]
    },
    "ignore": ["**/dist/*.min.js"]
  }
}

對於文件的過濾，lint-staged的格式以下：

{
  // .js files anywhere in the project
  "*.js": "eslint",
  // .js files anywhere in the project
  "**/*.js": "eslint",
  // .js file in the src directory
  "src/*.js": "eslint",
  // .js file anywhere within and below the src directory
  "src/**/*.js": "eslint",
}

lint-staged提供的功能遠不止於此，它只是平臺，具體的格式化工具的搭配有不少，如對於圖片的、樣式的、.tsx、.md等文件的。