1、代码格式化
- .editorconfig篇 idea编辑器默认会读取该文件,但vscode不会默认读取,需要安全插件 EditorConfig for VS Code
- prettier篇
- 安装prettier依赖:npm install prettier -D
- 配置.prettierrc文件
- 创建.prettierignore忽略文件(忽略不需要格式化的文件)
- 安装prettier插件
- 保存时格式化: 首选项-设置-文本编辑器-正在格式化-勾选Format On Save
- 配置格式化命令:在package.json中配置一个scripts字段:
"prettier": "prettier --write ."通过执行npm run prettier就可以格式化全部文件
- 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'
],
- 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相关的依赖:
在项目目录下创建
.husky 文件夹:
在package.json中添加一个脚本:
接下来,我们需要去完成一个操作:在进行commit时,执行lint脚本:
这个时候我们执行git commit的时候会自动对代码进行lint