亲宝软件园·资讯

展开

Vue引入ESLint代码校验

DevUI团队 人气:0

1 ESLint 是什么

ESLint 是一个插件式的 JavaScript / JSX 代码检查工具,用于检测和修复 JavaScript 代码中的问题,目标是让代码更一致并避免错误。

2 在 Vue 项目中引入 ESLint

使用 Vue CLI 搭建的 Vue2 项目已经自带 ESLint,就不赘述,我们看下 Vite 搭建的 Vue3 项目中怎么引入 ESLint。

使用以下命令搭建一个 Vue3 项目:

npm create vite@latest vue3-project

创建之后,启动起来:

npm i
npm run dev

效果如下:

2.1 引入 ESLint

执行以下命令:

npm init @eslint/config

进入交互式界面,可通过上下方向键选择,通过按回车键确定。

第一个问题是:

$ npm init @eslint/config
? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

第二个问题是:

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

第三个问题是:

? Which framework does your project use? … 
  React
❯ Vue.js
  None of these

第四个问题是:

? Does your project use TypeScript? › No / Yes

第五个问题是:

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

第六个问题是:

? How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style

第七个问题是:

? Which style guide do you want to follow? … 
❯ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

第八个问题是:

? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

完成!是不是超级简单!

看下我们都选了哪些配置:

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript

主要给我们安装了以下依赖:

eslint-config-airbnb-base@15.0.0

eslint-plugin-import@2.26.0

eslint-plugin-vue@9.2.0

eslint@8.20.0

@typescript-eslint/parser@5.30.6

@typescript-eslint/eslint-plugin@5.30.6

并生成了一个 eslintrc.cjs 配置文件:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  // 自定义 rules 规则
  rules: {
  },
};

2.2 ESLint 配置

2.3 执行 ESLint 代码检查

在 package.json 文件的 scripts 中配置 lint 脚本命令:

"scripts": {
  "dev": "vite",
  "build": "vue-tsc --noEmit && vite build",
  "preview": "vite preview",
  // 配置 lint 脚本命令
  "lint": "eslint --ext .vue,.ts src/"
},

执行 lint 脚本命令:

npm run lint

出现了一堆报错:

/vue3-project/src/App.vue
  4:53  error  Missing semicolon  semi
/vue3-project/src/components/HelloWorld.vue
  2:26  error  Missing semicolon  semi
  4:31  error  Missing semicolon  semi
  6:21  error  Missing semicolon  semi
/vue3-project/src/main.ts
  1:32  error  Missing semicolon  semi
  2:21  error  Missing semicolon  semi
  3:28  error  Missing semicolon  semi
  5:29  error  Missing semicolon  semi
/vue3-project/src/vite-env.d.ts
  4:3   error  Expected 1 empty line after import statement not followed by another import  import/newline-after-import
  4:45  error  Missing semicolon                                                            semi
  5:48  error  Missing semicolon                                                            semi
  6:27  error  Missing semicolon                                                            semi
✖ 12 problems (12 errors, 0 warnings)
  12 errors and 0 warnings potentially fixable with the `--fix` option.

大部分都是说句尾没有分号,因为我们选择的是 Airbnb 代码规范,所以会有这个报错提示,不同的代码规范,内置的检查规则不一定完全相同。

2.4 自动修复 ESLint 问题

在 scripts 中增加自动修复 ESLint 问题的脚本命令:

"scripts": {
  "dev": "vite",
  "build": "vue-tsc --noEmit && vite build",
  "preview": "vite preview",
  "lint": "eslint --ext .vue,.ts src/",
  // 自动修复 ESLint 问题脚本命令
  "lint:fix": "eslint --ext .vue,.ts src/ --fix"
},

执行:

npm run lint:fix

执行自动修复的命令之后,所有分号都加上了,未使用的变量也自动移除了。

再次执行:

npm run lint

没有再报错。

3 配置 husky 和 PR 门禁

3.1 配置 husky 门禁

为了确保每次提交(git commit)之前代码都通过 ESLint 检查,我们增加一个 pre-commit 门禁。

npm i lint-staged husky -D
"scripts": {
  "dev": "vite",
  "build": "vue-tsc --noEmit && vite build",
  "preview": "vite preview",
  "lint": "eslint --ext .vue,.ts src/",
  "lint:fix": "eslint --ext .vue,.ts src/ --fix",
  // 在 npm install 之后自动执行,生成`.husky`目录。
  "prepare": "husky install"
},
npm run prepare

该命令执行完会在项目根目录自动生成.husky目录。

执行以下命令,会在.husky目录自动生成pre-commit文件钩子。

npx husky add .husky/pre-commit "npx lint-staged"
"lint-staged": {
  "src/**/*.{vue,ts}": "eslint --fix"
},

通过以上五个步骤,以后每次使用git commit命令提交提交代码,都会:

3.2 配置 PR 门禁

如果你在做自己的开源项目,并且非常幸运,有一群志同道合的小伙伴愿意一起参与贡献,这时为了统一大家的代码风格,让贡献者们专注于特性开发,不用担心代码格式规范问题,并通过 ESLint 工具提示贡献者,哪些代码可能带来潜在的风险,你就有必要给提交的 PR 加上 ESLint 门禁。

我们已经增加了本地的 ESLint 命令:

"scripts": {
  "lint": "eslint --ext .vue,.ts src/",
},

我们需要在本目录创建一个.github/workflows/pull-request.yml文件,在该文件中写入以下内容:

name: Pull Request
on:
  push:
    branches: [ dev, main ]
  pull_request:
    branches: [ dev, main ]
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]
    name: "ESLint"
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Install pnpm
        uses: npm/action-setup@v2
        with:
          version: 6
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - name: Install deps
        run: npm i
      - name: ESLint
        run: npm run lint

这样只要 PR 是往 dev 或 main 分支合入的,都会跑一遍这个 Github Actions 工作流任务,ESLint 检查不通过的话,PR 的 checks 里面会提示,拦截该 PR 的合入。

PR 的提交者看到提示,也可以点到任务里面去看是哪里报错,修改掉这些 ESLint 问题,PR 就会变成绿色,项目的管理员就可以顺利合入 PR 到目标分支啦

加载全部内容

相关教程
猜你喜欢
用户评论