Vue3项目代码格式化配置（Eslint+Vetur；gitHooks+Lint-staged）

d邓会杰
3,831 阅读5分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

每个人都有自己的一套代码规范，导致打开别人写的代码之后，在自己的vscode中，提示许多错误信息。周末两天弄明白了代码格式化的配置，通过代码格式化配置和代码提交格式化，可以保证项目组成员编写统一风格的代码。

一、创建Vue3项目

通过Vue-cli，创建一个Vue3项目。首先要确保vue-cli的版本是4.5.13以上。通过以下命令查看vue-cli的版本。

// 输出版本号@vue/cli 4.5.15
vue -V

如果需要升级vue-cli版本，通过以下指令进行升级。

npm update -g @vue/cli

升级之后，可以通过以下方式创建最新的vue3项目，进入模板选择。

// 利用vue-cli创建项目
vue create projectName

下面是选择的配置项

  • ? Please pick a preset: Manually select features
  • ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
  • ? Choose a version of Vue.js that you want to start the project with 3.x
  • ? Use class-style component syntax? No
  • ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
  • ? Use history mode for router? (Requires proper server setup for index fallback in production) No
  • ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
  • ? Pick a linter / formatter config: Standard
  • ? Pick additional lint features: Lint on save, Lint and fix on commit
  • ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
  • ? Save this as a preset for future projects? Yes
  • ? Save preset as: 123.text

稍等片刻之后，项目就创建成功了。

$ cd vue-app-demo
$ npm run serve

二、升级Vue版本，使用script setup语法

使用@vue/cli-v4.5.15版本创建的项目中，vue版本为v3.0.0。

"dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },

而vue v3.0.0不支持script setup语法，所以我们需要升级vue版本。

npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2

升级之后，查看package.json得到的版本为

  "dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },

三、代码格式化配置（eslint + vetur）

常见的代码格式化工具有eslint和prettier，eslint是js代码质量检测工具，可以检测出代码语法错误或书写格式的错误。prettier是一个代码格式检测工具，除了可以检测js代码格式，还可以检测css，html等代码格式。

在项目中安装了eslint和prettier npm包，只能通过命令来检测和修复代码。然而，在代码书写或者保存文件时不能给出错误提示。为了提高代码编写效率，可以在vs code中安装对应的插件。

  1. 安装ESLint，Vetur插件

    image.png image.png

  2. Eslint插件的作用

    eslint是javascript代码检测工具，比如缩进格式、声明的变量没有使用等错误提示。vue-cli创建项目时已经安装并配置好了eslint包，但是只有执行eslint命令时才能输出错误信息。

    eslint插件可以使我们在写代码时，给出错误提示，提高开发效率。

    image.png

    在根目录创建.vscode/settings.json文件，通过如下配置。ctrl+s保存文件时可以自动修复js代码，使js代码符合eslint规范。

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

  3. Vetur插件的作用

    • .vue文件语法高亮，
    • 快捷创建代码块，比如输入temp scr sty
    • emmemt支持html css等代码快捷输入
    • vetur集成了prettier格式化工具，shift+alt+f快捷键可以对html,css,js,json等代码进行格式化。

  4. 解决ESlint和vetur对javascript代码格式化冲突

    vetur格式化js代码，是依照prettier规则进行格式化的，并不符合ESlint规范，会出现双引号，分号等情况。eslint和vetur对js代码格式化规则存在冲突。下面两张图中，第一张图是vetur格式化js的结果，第二张图是eslint插件格式化的结果。

    image.png image.png

    .vscode/settings.json，添加如下配置如下，ctrl+s保存时自动格式化。js代码使用eslint规则，关闭vetur的js规则。

    {
  // 保存文件时eslint 格式化 js代码
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  // 保存文件时，格式化工具vetur自动格式化代码格式
  "editor.formatOnType": true,
  "editor.formatOnSave": true,
  // 对于javascript代码,关闭prettier,交给eslint fix。如果有其他工具也需要关闭
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none",
}

四、git提交规范配置(githooks + lint-staged)

  1. 为了规范提交信息风格，需要设置git提交模板（按自己公司的模板配置）：

    在C:\Users[当前用户名]\ 目录下新建文件.gitcommit，打开.gitcommit文件并将模板信息下面的输入其中。随后打开命令行工具，输入git config --global commit.template ~/.gitcommit使模板生效。

    [Required]50-character subject line
Code Source From:  [Required]
# Self Code / OpenSource / 3rd party Code / Other
Description:   [Optional]
Jira:  # [Optional]
市场项目编号（名称）： [Optional]

  2. lint-staged提交代码前自动格式化代码

    如果开发者，没有安装格式化插件，依然可能提交不规范的代码。通过git-hooks和lint-staged提交前，将提交的代码进行检测和自动修复。

    lint-staged 可以只检查本次修改更新的代码，并且出现错误信息的时候，自动修复并且推送。

    lint-staged 无需单独安装，vue-cli创建项目时，选择Pick additional lint features: Lint on save, Lint and fix on commit，会为项目安装和配置lint-stated。直接使用即可。

    下面是package.json的配置，每次本地commit之前，检验提交内容是否符合本地配置的eslint规则。 如果符合规则，则会提交成功；如果不符合规则，会自动执行vue-cli-service lint尝试自动修复。如果修复成功，执行代码提交；如果修复失败，会提示错误，修改好之后才允许提交。

      "devDependencies": {
    "lint-staged": "^9.5.0",
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,vue,ts}": [
      "vue-cli-service lint",
      "git add"
    ]
  }

总结

本文首先介绍的vue3项目的创建过程；以及升级vue3的版本；然后介绍了在本地开发代码格式化代码插件的配置；最后介绍了提交代码前，对提交的代码进行校验，只有符合eslint规范，才能提交代码。

avatar
文章
阅读
粉丝