eslint-config-lope
前言
通过使用公司内部的 eslint plugin
, 来完成集团风格的统一。
核心是用 airbnb
的风格,因为它足够严谨,并且有很多对代码质量也有所帮助。但是有很多的条件对于我们来说是存在不合理的。因此,我们要对一些 rules
进行处理。
例如,
no-require
, 这个规则会禁止我们使用动态引入。在现在import
的动态引入不够足够简单方便的前提下,我们常常更希望使用require
, 例如页面中的图片引入等。
其次,使用 prettier
来规范代码格式问题。
最终可以在 js
, ts
, js + vue
, ts + vue
的项目中都能使用。
安装
npm install -D eslint eslint-config-lope
or yarn add -D eslint eslint-config-lope
使用
当前插件采用合并的方式来使用
目前提供 js
, ts
, vue
三个功能的检测,可以通过搭配的方式来满足混合诉求。
同时也是为了以后可以兼容其他语言或规则做的分类。
目前有 lope
lope/typescript
lope/vue
配置公司风格
// .prettier.jsmoduleexports = printWidth: 100 tabWidth: 2 useTabs: false semi: true singleQuote: true quoteProps: 'as-needed' trailingComma: 'all' jsxSingleQuote: false bracketSpacing: true jsxBracketSameLine: false arrowParens: 'avoid'
单纯的 js 环境下使用
// .eslintrc.jsmoduleexports = root: true env: es6: true browser: true node: true extends: 'lope'
ts 环境下使用
// .eslintrc.jsmoduleexports = root: true env: es6: true browser: true node: true extends: 'lope/typescript'
vue 的 js 环境下使用
// .eslintrc.jsmoduleexports = root: true env: es6: true browser: true node: true extends: 'lope/vue'
vue 的 ts 环境下使用
// .eslintrc.jsmoduleexports = root: true env: es6: true browser: true node: true extends: 'lope/vue-ts'
代码提交
为了提高代码提交上去的质量。
第一步,本地使用 pre-commit
强制格式化提交。
第二步,在CI用使用备份的eslint
配置再走一次第一步流程.(防止有人翻过校验)
安装
npm run -D pre-commit
oryarn add -D pre-commit
配置到 package.json
效果如下:
保存格式化
保证 vscode
版本在 1.40+
, 可以轻松的配置绑定 eslint
的自动化保存.
在项目根目录下创建文件夹 .vscode
, 在文件夹下创建 settings.json
.
// .vscode/settings.json
需要完善
-
rules
规则是大量的,所以,需要确定大家的需求来完善rules
, 当然也可以迭代完成。 airbnb 规范 alloy的rule展示 -
目前虽然有很多可以基本格式可以达到自动化格式,但是还有有很多不可以达到预期。希望能在迭代中完成。例如规范
vue
标签属性的顺序,规范vue
对象中属性的顺序。 Vue 属性顺序。 -
对
css
,html
文件尚不能保存格式化。支持不是特别友好
总结
严格的使用 eslint
是为了我们的代码更规范,更好维护。再配合上 css
的 bem
, 公司层面的 review
, 相信之后的代码也不会那么难以维护。