成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端代碼風(fēng)格自動(dòng)化系列（三）之Lint-staged

zzir / 3896人閱讀

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

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

安裝 
npm install --save-dev lint-staged husky
配置

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

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

當(dāng)文件變化，我們git commit它們，pre-commit鉤子會(huì)啟動(dòng)，執(zhí)行lint-staged命令，我們對(duì)于lint-staged如上文配置，對(duì)本次被commited中的所有.js文件，執(zhí)行eslint --fix命令和git add,命令，前者的的目的是格式化，后者是對(duì)格式化之后的代碼重新提交。

除了在package.json中配置，也可以在.lintstagedrc、lint-staged.config.js文件中，lint-staged的常用選項(xiàng)除了liners之外，還有ignore、concurrent 等，具體參考文檔：

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

對(duì)于文件的過(guò)濾，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提供的功能遠(yuǎn)不止于此，它只是平臺(tái)，具體的格式化工具的搭配有很多，如對(duì)于圖片的、樣式的、.tsx、.md等文件的。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100777.html

相關(guān)文章

  • 前端代碼風(fēng)格自動(dòng)化系列（五）之共同出擊

    摘要：我們?cè)谇懊娴乃钠薪榻B了這些工具，可以完成以最小的代價(jià)在提交到遠(yuǎn)程倉(cāng)庫(kù)前，格式化為統(tǒng)一風(fēng)格的代碼，大家都很熟悉這里就不列舉了。下面舉一個(gè)配置。這里對(duì)于項(xiàng)目里分別做了提交前格式化操作，對(duì)于提交規(guī)范做了校驗(yàn)。 我們?cè)谇懊娴乃钠薪榻B了husky、commitlint、lint-staged、prettier這些工具，可以完成以最小的代價(jià)在Git提交到遠(yuǎn)程倉(cāng)庫(kù)前，格式化為統(tǒng)一風(fēng)格的代碼，es...

    pumpkin9 評(píng)論0 收藏0

  • 前端代碼風(fēng)格自動(dòng)化系列（四）之Prettier

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

    wangjuntytl 評(píng)論0 收藏0

  • 用 husky 和 lint-staged 構(gòu)建超溜的代碼檢查工作流

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

    twohappy 評(píng)論0 收藏0

  • 前端構(gòu)建之webpack

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

    MartinHan 評(píng)論0 收藏0

  • 前端進(jìn)階（8） - 前端開(kāi)發(fā)需要了解的工具集合：webpack, eslint, prettier,

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

    SillyMonkey 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<