如何在快应用开发中使用 eslint 增强语法检查?

快应用 Oct 15, 2021

前言

虽然在快应用开发工具里,已经集成了语法提示、自动补全等能力,但如果您想对项目的代码进行进一步校验,给代码定义一个规范,必须按照这个规范进行代码的编写,可以通过使用 eslint,并结合 husky、lint-staged 插件来增强语法检查。

使用 eslint

安装依赖

需要全局安装 eslint 或者只在当前项目下安装 eslint

npm i eslint -g

npm i eslint --save-dev

由于会用到 eslint-plugin-vue 的能力,所以我们也要在项目下安装 eslint-plugin-vue 依赖:

npm i eslint-plugin-vue --save-dev

新建 eslint 配置文件

在项目根目录下,新建 .eslintrc 文件,并编写配置,下面为简单的配置项,若项目中有额外的要求,可根据 vue 的规则自己额外配置。

{
  "env": {
    "commonjs": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/base"
  ],
  "globals": {
    "loadData": false,
    "saveData": false,
    "history": false,
    "console": true,
    "setTimeout": false,
    "clearTimeout": false,
    "setInterval": false,
    "clearInterval": false,
    "TextDecoder": true,
    "$utils": true
  },
  "rules": {
    "vue/html-end-tags": "warn",
    "vue/html-quotes": "warn",
    "vue/comment-directive": "off",
    "no-unused-vars": [
      "warn",
      {
        "varsIgnorePattern": "prompt"
      }
    ],
    "quotes": [
      "warn",
      "single",
      {
        "avoidEscape": true,
        "allowTemplateLiterals": true
      }
    ],
    "linebreak-style": ["warn", "unix"],
    "semi": [1, "never"]
  }
}

注意: 配置中需要关闭 vue/commet/directive

增加 script 脚本命令

"scripts": {
    "lint": "eslint 'src/**/*.ux'"
}

在终端运行 npm run lint,即可用 eslint 对 src 下所有的 ux 文件进行语法检查。

使用 husky、lint-staged 插件

安装

执行下面命令

npm i husky lint-staged --save-dev

husky

在成功安装之后,我们可以在 git commit 的时候触发 pre-commit 钩子从而触发到 husky,我们在 package.json 文件中配置 husky 的钩子需要执行的命令或操作。

"husky": {
    "hooks": {
      "pre-commit": "yarn run precommit-msg && lint-staged"
    }
}

这样,我们在 git commit 的时候就会看到 pre-commit 执行了。

husky

注意:新版本的 husky 可能无法生效,降低 husky 版本即可,本文采用的是 husky@4.3.8 版本

lint-staged

lint-staged 是一个在 git 暂存文件上(也就是被 git add 的文件)运行已配置的 linter(或其他)任务。lint-staged 总是将所有暂存文件的列表传递给任务。

我们在 package.json 文件中配置

"lint-staged": {
    "**/**.{ux,js,json,less,scss,css,pcss,md,vue}": [
      "prettier --write",
      "eslint 'src/**/*.ux'",
      "git add"
    ]
}

这里 lint-staged 的配置是:在 git 的待提交的文件中,所有 ux,js,json,less,scss,css,pcss,md,vue 文件都要执行两条命令在 commit 之前,将暂存区的内容做一次代码美化和 eslint 格式检查,然后再添加到暂存区。

结合我们前面介绍的 husky,配合 huskypre-commit 钩子,将会形成一个自动化工具链。

使用 hap-eslint 插件

安装插件

在商店搜索 hap-eslint,点击「安装」,即可安装快应用的 eslint 插件,该插件会检测项目下是否配置了 eslint,从而来对 ux 文件以及 js 文件进行静态语法检查。

注意:建议安装 7.x 版本的 eslint。

启用 eslint

点击底部状态栏的 eslint 状态,根据提示选择 eslint 的作用范围。至此,您已经可以在项目中使用 eslint 了。

eslint

启用保存时自动 Fix

在设置中搜索: eslint: auto fix on save,勾选这个选项,则可以在保存文件时,自动根据配置格式化代码。

auto fix

效果

eslint

总结

本文介绍了在快应用中如何运用 eslint 结合 husky 和 lint-staged 来对代码进行加强语法检查并规定整个项目的代码风格,十分方便,而且能使项目的代码更加规范。

猜您可能感兴趣的文章

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.