前端代码风格自动化系列（三）之Lint-staged

zzir 发布于2019-08-23 14:33 / 3701人阅读

摘要：在我们介绍了之后，来看一个前端文件过滤的工具，代码的格式化肯定会涉及到文件系统，一般工具会首先读取文件，格式化操作之后，重新写入。

在我们介绍了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等文件的。

服务器托管云服务器系列之系列之二架构之坑系列系列三

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100777.html

前端代码风格自动化系列（五）之共同出击

摘要：我们在前面的四篇中介绍了这些工具，可以完成以最小的代价在提交到远程仓库前，格式化为统一风格的代码，大家都很熟悉这里就不列举了。下面举一个配置。这里对于项目里分别做了提交前格式化操作，对于提交规范做了校验。我们在前面的四篇中介绍了husky、commitlint、lint-staged、prettier这些工具，可以完成以最小的代价在Git提交到远程仓库前，格式化为统一风格的代码，es...

pumpkin9 2019-08-23 14:33 评论0 收藏0
前端代码风格自动化系列（四）之Prettier

摘要：这里有个官网的例子格式化之后让我们专注于业务逻辑，无需再纠结代码风格，配合其它工具，实现了代码提交到仓库前，统一格式化。 Prettier是一个支持多语言的代码格式工具，如常用的：js、jsx、Vue、Flow、Ts、HTML、CSS等，非常全面，将代码解析为AST，然后重新组装，目的是最终输出风格统一的代码，对比eslint对error的fix要强一些，如最大长度的改动，eslint...

wangjuntytl 2019-08-23 14:33 评论0 收藏0
用 husky 和 lint-staged 构建超溜的代码检查工作流

摘要：官方出品的工具列表也是个非常不错的参考。很多同学选择在持续集成阶段后文用代称做，比如使用远程的来触发。常见做法是使用或者在本地提交之前做。本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。 showImg(https://segmentfault.com/img/remote/1460000009546916?w=1195&h=705); 具备基本工程素养的同学都会注重...

twohappy 2019-06-24 17:54 评论0 收藏0
前端构建之webpack

摘要：前端构建之之前写了一个前端构建之，同样的目的写一个，内容基本上和一样，主要用来自己学习记录。合并很方便的实现合并最后附上完整的源代码。前端构建之webpack 之前写了一个前端构建之gulp，同样的目的写一个webpack，内容基本上和gulp一样，主要用来自己学习记录。为什么需要前端构建不解释本文大致分为以下几个内容：规范校验js代码（jslint） js解释器（b...

MartinHan 2019-08-26 12:00 评论0 收藏0
前端进阶（8） - 前端开发需要了解的工具集合：webpack, eslint, prettier,

摘要：前端开发需要了解的工具集合前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。总之，是前端打包的不二选择。所以，很多情况下都是与配合使用。它的一个理念就是提供一套完整集成的零配置测试体验。前端开发需要了解的工具集合：webpack, eslint, prettier, ... 前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。 1. nrm: npm...

SillyMonkey 2019-08-29 16:44 评论0 收藏0