前端规范化 Lint tools 推荐

说起 Lint tools,其实不如说是 Vue 的 Lint tools 推荐,在过去我对 Vue.js 的 Lint 感受的不够深刻,由于 Vue.js 是由 .vue 的后缀名组成的 template file,那样 Lint 其实是不好做的,但是万万没想到,这年头 Lint 工具超发达的,什么都有——

eslint

lint 界元老,也是最基本的一个 lint 工具,即使别的你什么都不配,相信你也至少会使用 eslint 来管理你的项目。

对于 eslint 的风格,主要派系还是分为「加分号」和「不加分号」,个人认为主要还是两种风格:「standard」和「airbnb」,对于我而言我更喜欢不加分号的 standard

注意:加不加分号只是一个开玩笑的说法,详细请点击进官网对比或者使用一下看看。

eslint Vue Plugin

eslint Vue Plugin 是一个针对 Vue 的 eslint 插件,已经放在了 Vue 官方组织维护,并且和 Vue 官方推荐的 Code Style 相对应。

使用这个插件就可以在 Vue 文件里进行 lint 提示了。

TypeScript eslint

对于 TypeScript 项目来说,过去我们习惯用 tslint 来处理项目的 lint,但是现在官方更推荐使用 typescript-eslint 这个项目来处理。对于 Vue 项目而言,Vue CLI 目前初始化已经变成了这个 lint plugin,此外 eslint 官方也对 TypeScript 的 lint 有个美好的规划

我的配置

目前我在使用一个配置好的 Vue 项目的 lint 配置,主要也就用到了上文所说的 standard + vue plugin:

{
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "extends": ["plugin:vue/recommended", "standard"],
  "rules": {
    "semi": ["error", "always"],
    "space-before-function-paren": ["error", "never"],
    "vue/array-bracket-spacing": ["error", "always"],
    "vue/component-name-in-template-casing": ["error", "kebab-case"]
  }
}

stylelint

在过去我一直以为 CSS 是没有 lint 工具规范的,毕竟市面上啥牛鬼蛇神都有,之前也没有注意到有项目在用这个东西,这次由于规范代码的缘故接触到了 stylelint,结果发现确实挺好的,支持了主流的 css 预处理器和后处理器(就是 sass / stylus / scss / less / postcss)以及原生的 CSS,使用时你只要引入一个插件,在配置一下就行了。

比如我这个项目使用的是 webpack + postcss(顺便一提我很喜欢 postcss),因此只要引入一下 stylelint 的 webpack 插件,配置一下 customSyntax: 'postcss-html',就可以在 Vue 中使用 postcss 的 lint。

此外,和 eslint 一样,你可以通过文件来配置它,这是我的配置可以参考一下(根本没什么参考价值拉):

{
  "extends": "stylelint-config-recommended"
}

在 Vue 中,除了以上配置外,在 template file 中需要规定 <style lang="postcss">,否则会被读成 plain css,造成 lint 错误。

最后,为什么我们要使用 lint 工具

在之前的一段不怎么愉快的经历中,我努力的推广了一些 Code Review 规范,但是由于代码中的历史包袱严重,所以可能大家都不是很乐意执行,一次团体的 Code Review 提醒了我,可以用 lint 工具去规范这些行为,第一是改动成本小,第二是 --fix 可以尽可能的帮助我们修复老的代码,之前我们觉得老代码可能需要很大的成本去改动,但实际上 Code Style 的修复我花了一天就搞定了——而带来的好处其实是显著的:

从此代码更容易维护了,画风更加统一了。那样代码的可读性也会随之提高,我们可以避免一些情况下去猜测已离职同事的想法,配合上 Code Review 的流程(包括了人工的变量名和注释的检查),可以尽可能的将代码的可维护性提高到一个高度。

当然,总的而言这套标准还是颇为严格的,在我刚入职时,我就被 airbnb 的规范逼疯过,实在是太严格了,然后向现实低了头(这也是为什么我喜欢用 standard 的原因之一)。

严格的规范对于代码质量的提升其实是相当明显的,JavaScript 这一门怎么都能跑起来的语言从某种意义上确实会降低人的严谨程度,作为一个有追求的程序员,今后我会在每一个项目都配上这些必要的 lint 工具,你呢?

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 知识, Vue, 配置

已有 2 条评论

  1. 之前用stylelint时还考虑过不同类别css属性的顺序,autofix一下会更整齐,用的一个现成的config: stylelint-config-idiomatic-order

  2. 我之前也是先烦,直接把eslint关了,现在也慢慢用起来了

添加新评论