uni-app配置eslint + commitlint + editorconfig + husky

我是傲夫靠斯，欢迎关注我的公众号【前端工程师的自我修养】，搜索f2ef2e，每天更新。

uniapp是一个优秀的跨端框架，但官方的创建项目并未提供eslint，这对于我们多人协作开发并不友好。现在网上的很多文章教程安装的都是老版本的husky等，现在已经很难跑通。本文全部使用最新的版本来安装，保证可以是正常使用的。有问题也欢迎交流。

使用vue-cli命令行创建项目

这里啰嗦一句，我并不喜欢使用HBuilder去创建项目和开发，因为它并不能实现自动化的CI/CD，还需要额外的安装一个IDE，所以我选择使用vs code去开发。

# 全局安装vue-cli
npm install -g @vue/cli

# 创建uni-app项目，选择默认模板
vue create -p dcloudio/uni-preset-vue my-uniapp

新创建的项目中并没有任何的Eslint配置

接下来，我们开始一步步安装配置

.editorconfig配置文件

在根目录创建.editorconfig文件

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100

editorconfig可以让我们多人开发写出的代码是一致的，大多数编辑都支持，vs code、webstorm等。vs code需要安装editorconfig插件。

husky安装

husky可以让我们使用Git的时候配置钩子，我们可以在git提交时做commit信息检查，eslint检查等等。

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2

安装成功后，husky给我们一个创建了一个pre-commit的钩子的例子。在根目录的.husky文件夹中。

.husky
	pre-commit

这个我们先放在这，一会后面会用到。

commitlint安装

commitlint帮助我们检查git commit的信息是否符合团队的规范。这对多人协作的时候是非常必要的。

安装npm依赖

npm install @commitlint/cli @commitlint/config-conventional -D

在根目录创建commitlint.config.js配置文件

module.exports = {
  extends: ['@commitlint/config-conventional'],
};

将commitlint加到husky的钩子中

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

接下来我们可以尝试提交

git add .
git commit -m "test"

会抛出错误信息

⧗   input: test
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings

然后我们输入正确的提交格式

git add .
git commit -m "chore: add commitlint"

提交成功

[master bf3104c] chore: add commitlint
 6 files changed, 1099 insertions(+), 1 deletion(-)
 create mode 100644 .editorconfig
 create mode 100755 .husky/commit-msg
 create mode 100755 .husky/pre-commit
 create mode 100644 commitlint.config.js

eslint安装

最后我们来安装eslint，我选用了vue 官方推荐airbnb规则

先安装依赖

npm i lint-staged eslint-plugin-vue eslint-plugin-import eslint babel-eslint @vue/eslint-config-airbnb -D

在package.json文件做如下修改

1.在scripts中新增lint命令，新增lint-staged配置

{
  "scripts": {
  	...
    "lint": "eslint --fix --ext .js,.vue ./src"
  },
  ...
  "lint-staged": {
    "*.{js,vue}": [
      "npm run lint",
      "git add"
    ]
  }
}

2.在./husky/pre-commit把npm test修改为npx lint-staged

3.创建.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

到这里就大功告成了。我们来测试一下

git add .
git commit -m "chore: add eslint"

可以看有很多eslint错误

✔ Preparing...
⚠ Running tasks...
  ❯ Running tasks for *.{js,vue}
    ✖ npm run lint [FAILED]
    ◼ git add
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up...

...
46:1  error  Unexpected tab character  no-tabs
47:1  error  Unexpected tab character  no-tabs
48:1  error  Unexpected tab character  no-tabs
✖ 38 problems (38 errors, 0 warnings)

我们去修改所有的eslint错误

✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...
[master 2ef3b5a] chore: add eslint
 4 files changed, 4627 insertions(+), 2863 deletions(-)
 create mode 100644 .eslintrc.js

修改之后，正常通过提交。

欢迎随时交流。

项目源码：https://github.com/cmdfas/uniapp-eslint

欢迎关注我的公众号【前端工程师的自我修养】，搜索f2ef2e，每天更新。

参考：

https://typicode.github.io/husky/#/

https://commitlint.js.org/#/

https://github.com/okonet/lint-staged