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

zzir 發(fā)布于2019-08-23 14:33 / 3889人閱讀

摘要：在我們介紹了之后，來看一個前端文件過濾的工具，代碼的格式化肯定會涉及到文件系統(tǒng)，一般工具會首先讀取文件，格式化操作之后，重新寫入。

在我們介紹了Husky、Commitlint之后，來看一個前端文件過濾的工具Lint-staged，代碼的格式化肯定會涉及到文件系統(tǒng)，一般工具會首先讀取文件，格式化操作之后，重新寫入。對于較大型的項目，文件眾多，首先遇到的就是性能問題，雖然如Eslint之類的也有文件過濾配置，但畢竟還是對于匹配文件的全量遍歷，如全量的.js文件，基本達不到性能要求，有時還會誤格式化其他同學的代碼，因此我們引入Lint-staged，一個僅僅過濾出Git代碼暫存區(qū)文件(被committed的文件)的工具。

安裝

npm install --save-dev lint-staged husky

配置

首先明確一下，Lint-staged僅僅是文件過濾器，不會幫你格式化任何東西，所以沒有代碼規(guī)則配置文件，需要自己配置一下，如：.eslintrc、.stylelintrc等，然后在package.json中引入。

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

當文件變化，我們git commit它們，pre-commit鉤子會啟動，執(zhí)行lint-staged命令，我們對于lint-staged如上文配置，對本次被commited中的所有.js文件，執(zhí)行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等文件的。

GPU云服務器云服務器系列之系列之二架構(gòu)之坑系列系列三

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100777.html

前端代碼風格自動化系列（五）之共同出擊

摘要：我們在前面的四篇中介紹了這些工具，可以完成以最小的代價在提交到遠程倉庫前，格式化為統(tǒng)一風格的代碼，大家都很熟悉這里就不列舉了。下面舉一個配置。這里對于項目里分別做了提交前格式化操作，對于提交規(guī)范做了校驗。我們在前面的四篇中介紹了husky、commitlint、lint-staged、prettier這些工具，可以完成以最小的代價在Git提交到遠程倉庫前，格式化為統(tǒng)一風格的代碼，es...

pumpkin9 2019-08-23 14:33 評論0 收藏0
前端代碼風格自動化系列（四）之Prettier

摘要：這里有個官網(wǎng)的例子格式化之后讓我們專注于業(yè)務邏輯，無需再糾結(jié)代碼風格，配合其它工具，實現(xiàn)了代碼提交到倉庫前，統(tǒng)一格式化。 Prettier是一個支持多語言的代碼格式工具，如常用的：js、jsx、Vue、Flow、Ts、HTML、CSS等，非常全面，將代碼解析為AST，然后重新組裝，目的是最終輸出風格統(tǒng)一的代碼，對比eslint對error的fix要強一些，如最大長度的改動，eslint...

wangjuntytl 2019-08-23 14:33 評論0 收藏0
用 husky 和 lint-staged 構(gòu)建超溜的代碼檢查工作流

摘要：官方出品的工具列表也是個非常不錯的參考。很多同學選擇在持續(xù)集成階段后文用代稱做，比如使用遠程的來觸發(fā)。常見做法是使用或者在本地提交之前做。本文作者王仕軍，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。 showImg(https://segmentfault.com/img/remote/1460000009546916?w=1195&h=705); 具備基本工程素養(yǎng)的同學都會注重...

twohappy 2019-06-24 17:54 評論0 收藏0
前端構(gòu)建之webpack

摘要：前端構(gòu)建之之前寫了一個前端構(gòu)建之，同樣的目的寫一個，內(nèi)容基本上和一樣，主要用來自己學習記錄。合并很方便的實現(xiàn)合并最后附上完整的源代碼。前端構(gòu)建之webpack 之前寫了一個前端構(gòu)建之gulp，同樣的目的寫一個webpack，內(nèi)容基本上和gulp一樣，主要用來自己學習記錄。為什么需要前端構(gòu)建不解釋本文大致分為以下幾個內(nèi)容：規(guī)范校驗js代碼（jslint） js解釋器（b...

MartinHan 2019-08-26 12:00 評論0 收藏0
前端進階（8） - 前端開發(fā)需要了解的工具集合：webpack, eslint, prettier,

摘要：前端開發(fā)需要了解的工具集合前端開發(fā)需要了解的一些工具，這些工具能夠幫助你在項目開發(fā)中事半功倍。總之，是前端打包的不二選擇。所以，很多情況下都是與配合使用。它的一個理念就是提供一套完整集成的零配置測試體驗。前端開發(fā)需要了解的工具集合：webpack, eslint, prettier, ... 前端開發(fā)需要了解的一些工具，這些工具能夠幫助你在項目開發(fā)中事半功倍。 1. nrm: npm...

SillyMonkey 2019-08-29 16:44 評論0 收藏0