Open liyatang opened 6 years ago
JavaScript Standard Style ESLint - Pluggable JavaScript linter - ESLint中文 List of available rules - ESLint中文
之前有过了解,但是一直也没有启动对 Standard 的了解,最近看到有推送写文章,也看到有些团队在迁移 Standard,也在碎片时间了解了 Standard。所以最近也在考虑往 Standard 迁移,看看成本如何。 痛点不是很痛,目前我们的 eslint 规则走的也挺好。那么为什么还要看 Standard?
学习成本。官网有很详细的介绍,也有中文。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关掉提示
'camelcase': 0
调整后的配置是
module.exports = { 'parser': 'babel-eslint', 'extends': [ 'standard', 'standard-jsx' ], 'rules': { 'react/jsx-tag-spacing': ['error', {'beforeSelfClosing': 'never'}], 'camelcase': 0 } }
资料
JavaScript Standard Style ESLint - Pluggable JavaScript linter - ESLint中文 List of available rules - ESLint中文
背景
之前有过了解,但是一直也没有启动对 Standard 的了解,最近看到有推送写文章,也看到有些团队在迁移 Standard,也在碎片时间了解了 Standard。所以最近也在考虑往 Standard 迁移,看看成本如何。 痛点不是很痛,目前我们的 eslint 规则走的也挺好。那么为什么还要看 Standard?
成本
学习成本。官网有很详细的介绍,也有中文。eslint 也有中文。 用了几个钟就把我们的开源库 react-gm 迁移过去了,改动很少。 结合 https://github.com/okonet/lint-staged 可以做到平滑迁移,一点一点切。而不是整个工程切,那工作量太大了。
迁移
以 webstorm + react-gm 为例
Webstorm 内置支持 Standard,配置即可。格式化会按这个配置去格式代码。
把 .eslintrc.js 改成
去 Webstorm ESLint 配置,把之前的全局 ESLint 路径 改成 本地的。
这样就完成 Standard 的配置了。
但是没完,Standard 本身是不支持较新语法,比如这里会提示箭头函数错误。
需要调整下 eslintrc.js 配置才行,npm i babel-eslint -D,然后配到 parser 上。
到目前为止算配置完了。但是 Webstorm 的格式化和 Standard 存在部分小差异,目前发现两个。
1 Webstorm 格式化在闭合标签前面不保留空格,但是 Standard 要加空格。理论上是要遵从 Standard 规范的,但是 Webstorm 的格式化也要用,TM还不知道怎么修改,同时我们不鼓励 Webstorm 配置太多,最好是用 Webstorm 默认配置即可。Standard 本身是基于 ESLint, 随意自己配置下即可。 2 在 Table 的缩进上不一致。Webstorm 格式化后如下图,但是 Standard 要求 tr 要缩进。好在可以加 —fix 在检测的时候自动修正,问题不大。
然后 骆驼峰变量有点太绝对,有些数据类的变量会用到下划线命名,比如 spu_id。 配置加上
'camelcase': 0
关掉提示调整后的配置是