迁移 Javascript Standard Style 总结

[liyatang]

资料

JavaScript Standard Style
ESLint - Pluggable JavaScript linter - ESLint中文
List of available rules - ESLint中文

背景

之前有过了解，但是一直也没有启动对 Standard 的了解，最近看到有推送写文章，也看到有些团队在迁移 Standard，也在碎片时间了解了 Standard。所以最近也在考虑往 Standard 迁移，看看成本如何。
痛点不是很痛，目前我们的 eslint 规则走的也挺好。那么为什么还要看 Standard？

• 提高代码质量
• 我能说是因为在等后台准备个东西，恰好有时间出来，才尝试玩 Standard 的么，没想到一玩就…
• 社区代码检测 No1，他有成套理论体系支持，可以 get 很多知识点。
• 之前引入 stylelint 也 get 到了很多知识点。
• 确实最近碰到一些 eslint 问题，比如最近用 Egg，风格不一样。这引起我对代码风格的思考。

成本

学习成本。官网有很详细的介绍，也有中文。eslint 也有中文。
用了几个钟就把我们的开源库 react-gm 迁移过去了，改动很少。
结合 https://github.com/okonet/lint-staged 可以做到平滑迁移，一点一点切。而不是整个工程切，那工作量太大了。

迁移

以 webstorm + react-gm 为例

Webstorm 内置支持 Standard，配置即可。格式化会按这个配置去格式代码。

npm i eslint -D
npm i eslint-config-standard eslint-config-standard-jsx eslint-plugin-promise eslint-plugin-react eslint-plugin-standard -D
npm i eslint-plugin-import eslint-plugin-node  -D
npm i babel-eslint -D

把 .eslintrc.js 改成

module.exports = {
  'extends': [
    'standard',
    'standard-jsx'
  ]
}

去 Webstorm ESLint 配置，把之前的全局 ESLint 路径 改成 本地的。

这样就完成 Standard 的配置了。

但是没完，Standard 本身是不支持较新语法，比如这里会提示箭头函数错误。

class Affix extends React.Component {
	handleXXX () => {
	
	}
}

需要调整下 eslintrc.js 配置才行，npm i babel-eslint -D，然后配到 parser 上。

module.exports = {
  'parser': 'babel-eslint',
  'extends': [
    'standard',
    'standard-jsx'
  ]
}

到目前为止算配置完了。但是 Webstorm 的格式化和 Standard 存在部分小差异，目前发现两个。

1 Webstorm 格式化在闭合标签前面不保留空格，但是 Standard 要加空格。理论上是要遵从 Standard 规范的，但是 Webstorm 的格式化也要用，TM还不知道怎么修改，同时我们不鼓励 Webstorm 配置太多，最好是用 Webstorm 默认配置即可。Standard 本身是基于 ESLint， 随意自己配置下即可。
2 在 Table 的缩进上不一致。Webstorm 格式化后如下图，但是 Standard 要求 tr 要缩进。好在可以加 —fix 在检测的时候自动修正，问题不大。

<Table>
  <thead>
  <tr>
    ...
  </tr>
  </thead>
<Table/>

然后 骆驼峰变量有点太绝对，有些数据类的变量会用到下划线命名，比如 spu_id。 配置加上 'camelcase': 0关掉提示

调整后的配置是

module.exports = {
  'parser': 'babel-eslint',
  'extends': [
    'standard',
    'standard-jsx'
  ],
  'rules': {
    'react/jsx-tag-spacing': ['error', {'beforeSelfClosing': 'never'}],
    'camelcase': 0
  }
}