eslint, prettier, etc

[oakland]

TIM 里已经引入了 eslint，通过 pre-commit package 把 git hook 起来使用。但是发现 commit 的时候没有 hook，可能是使用的问题，还没有查到原因。同时，项目也没有 prettier。
TDPS 里有 prettier，也有 eslint。通过 husky 来和 git hook 起来。但是总感觉用起来没有知道过程，所以不放心。最近打算把这两个都看看。然后把 tim 中的 eslint 和 prettier 都用起来，然后再通过工具把 git hook 起来。
mx 里也引入了 eslint, prettier 和 husky，而且还有针对 css, scss, sass 等等的 lint。也可以作为一个参考。

Eslint is powerful, but why prettier

官方的一个 issue
实际上 eslint 已经很强大了，但是还是有一些 prettier 可以处理的功能。也就是说 eslint 和 prettier 之间的功能既有重叠，又有区别。需要把两个工具结合起来使用才能让代码规范起来。

除了 eslint 之外还有很多 js lint 相关的检查工具，这篇文章给出了各个检查工具的利弊。从这个角度来看现在用 eslint 还是非常符合趋势和潮流的，应该也是项目中最强大的。所以不用去了解其他的工具了，关于 lint 方面的工具肯定就是用 eslint 了。然后关于代码样式和格式化，美化相关的工具肯定就是 prettier。所以，最后的方式肯定就是 eslint + prettier 的方式。然后还需要一个 hook git 的工具。

eslint

eslint 默认的规范里是没有 semicolon 的。

In general, semi-colons required or not is going to be the first break point. If you feel strongly in favor of dropping semi-colons, go with Standard. Standard is a challenging style to sell to existing teams due to it opting out of semi-colons. While I personally like JavaScript without semi-colons, many developers have used them for many years and resist dropping them.

eslint 里有没有默认的配置，比如 google, airbnb, standard，其中 google 的主要是用于 angular，airbnb 的主要是用于 react，然后还有 standard，感觉比较主观，所以还是根据情况自己决定。

这篇文章里提到了 standard style 的问题：

Airbnb Style guide is really popular for React.
Johnpapa is what I hear a lot for Angular
Standard is popular, but very opinionated. You can’t change anything so it can be hard to integrate with other tools.

prettier

eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with prettier.

git hook

不论是 eslint 还是 prettier，都是计划在 git commit 的时候通过 hook 的方式执行验证和美化。但是发现 hook 的方案有 pre-commit 和 husky 两种方式。对于选择纠结症的我来说，我就需要知道这两个 package 哪个更好，或者说他们直接的区别是什么。然后就发现一个很有意思的网站。 npmtrends。这个网站可以输入一个 npm 包，然后看到这个包的下载趋势，而且还可以对比两个包的下载趋势，比如你打开上面这个链接，看到的就是 husky 和 pre-commit 之间的下载量的区别，然后就会发现 husky 下载量明显高于 pre-commit。所以对于我来说，显然我会用 husky。就排除了 pre-commit 的方式。

又找到了一个不错的比较工具的网站。 Find the right developer tools and the companies that use them

prettier

prettier 有一个很有意思的配置哲学思想，option-philosophy。这篇文章值得一读，所以说从这个角度而言，引入 prettier 是非常好的。

prettier integrating with linters

现在在 integrating with linters 的过程中出现了问题。看了 integrating-with-linters 之后，还是获得了一些进展。

Whatever linting tool you wish to integrate with, the steps are broadly similar. First disable any existing formatting rules in your linter that may conflict with how Prettier wishes to format your code. Then you can either add an extension to your linting tool to format your file with Prettier - so that you only need a single command for format a file, or run your linter then Prettier as separate steps.

也就是说直接用 linter 的 pretter plugin 更方便，这样的话就相当于在 linter 中融入了 prettier，否则的话相当于先 linting，然后再 prettier，两个步骤。

还碰到一个问题，就是 husky 的 hooks 不生效的问题，结果发现有 issue，下面 N0xFF 的回复看，应该是和 git 版本有关。

decorator 不被识别的情况

在 js 中，可以使用 @aubobind 类似这种装饰器，但是 eslint 不能识别，会报错。查了，是老版本的原因，可以把 eslint 升级一下就好了。

for...in loop 报错

eslint-ruls-guard-for-in
建议不要用 for...in loop 而是用 Object.keys 的形式。

eslint comment

/* eslint-disable /
/ eslint-enable */
// eslint-disable-line

报 import/no-mutable-exports 这个错的时候，需要 npm install eslint-plugin-import --save-dev，并且在 .eslintrc 的 plugins 数组中添加 import，"plugins": ["xx", "xx", "import"]。

可以对不同的文件类型做不同的校验处理

https://stackoverflow.com/questions/53914602/error-parsing-error-unexpected-character-in-md-file
"lint-staged": {
".{js,jsx}": [
"eslint --fix",
"prettier --write",
"git add"
],
".{md}": [
"prettier --write",
"git add"
]
}