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.js
module.exports = {
  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.js
module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  extends: 'lope'
}

ts 环境下使用

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  extends: 'lope/typescript'

vue 的 js 环境下使用

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  extends: 'lope/vue'

vue 的 ts 环境下使用

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  extends: 'lope/vue-ts'

代码提交

为了提高代码提交上去的质量。 第一步，本地使用 pre-commit 强制格式化提交。 第二步，在CI用使用备份的eslint配置再走一次第一步流程.(防止有人翻过校验)

安装

npm run -D pre-commit or yarn add -D pre-commit

配置到 package.json

{
  "scripts": {
    "lint": "eslint --fix ./", // 注意最后是 `./` 是目录
    "lint:style": "prettier --write \"src/**/*.*\"" // 后面的正则也是目录
  },
  "pre-commit": [
    "lint:style", // 先用 `prettier`, 格式化代码。
    "lint"  // 再使用 eslint 去修复代码，如果修复不成功会提交失败。
  ]
}

效果如下：

保存格式化

保证 vscode 版本在 1.40+, 可以轻松的配置绑定 eslint 的自动化保存.

在项目根目录下创建文件夹 .vscode, 在文件夹下创建 settings.json.

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

需要完善

1. rules 规则是大量的，所以，需要确定大家的需求来完善rules, 当然也可以迭代完成。 airbnb 规范 alloy的rule展示

2. 目前虽然有很多可以基本格式可以达到自动化格式，但是还有有很多不可以达到预期。希望能在迭代中完成。例如规范vue标签属性的顺序，规范vue 对象中属性的顺序。 Vue 属性顺序。

3. 对 css, html文件尚不能保存格式化。支持不是特别友好

总结

严格的使用 eslint 是为了我们的代码更规范，更好维护。再配合上 css的 bem, 公司层面的 review, 相信之后的代码也不会那么难以维护。