前端项目工程化之代码规范化Vscode

141 阅读2分钟

1、代码格式化

  1. .editorconfig篇 idea编辑器默认会读取该文件,但vscode不会默认读取,需要安全插件 EditorConfig for VS Code
  2. prettier篇
    • 安装prettier依赖:npm install prettier -D
    • 配置.prettierrc文件
    • 创建.prettierignore忽略文件(忽略不需要格式化的文件)
    • 安装prettier插件
    • 保存时格式化: 首选项-设置-文本编辑器-正在格式化-勾选Format On Save
    • 配置格式化命令:在package.json中配置一个scripts字段:"prettier": "prettier --write ."通过执行npm run prettier就可以格式化全部文件
  3. eslint篇 解决eslint和prettier冲突的问题:安装插件:(vue在创建项目时,如果选择prettier,那么这两个插件会自动安装npm i eslint-plugin-prettier eslint-config-prettier -D 添加prettier插件:( .eslintrc.js文件中)
extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],
  1. git Husky和eslint 虽然我们已经要求项目使用eslint了,但是不能保证组员提交代码之前都将eslint中的问题解决掉了:

也就是我们希望保证代码仓库中的代码都是符合eslint规范的; 那么我们需要在组员执行 git commit 命令的时候对其进行校验,如果不符合eslint规范,那么自动通过规范进行修复;那么如何做到这一点呢?可以通过Husky工具:

husky是一个git hook工具,可以帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push

如何使用husky呢? 这里我们可以使用自动配置命令:(自动配置husky)

分别执行2个命令npx husky-init npm install 这里会做三件事: 安装husky相关的依赖:

image.png 在项目目录下创建 .husky 文件夹:

image.png 在package.json中添加一个脚本:

image.png 接下来,我们需要去完成一个操作:在进行commit时,执行lint脚本:

image.png 这个时候我们执行git commit的时候会自动对代码进行lint