一、pnpm包管理器创建项目
1.命令
npm install -g pnpm //安装pnpm
pnpm create vue //创建项目
2.常用pnpm命令:
pnpm install 、 pnpm add axios、pnpm add axios -D、 pnpm remove axios、pnpm dev
二、ESlint & prettier 配置代码风格
环境同步:
1.安装了插件ESlint ,开启保存自动修复
2.禁用插件Prettier,并在settings关闭保存自动格式化
settings.json
// ESlint插件 + Vscode配置 实现⾃动格式化修复
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.formatOnSave": false,
配置文件 .eslintrc.cjs
1. prettier ⻛格配置 https://prettier.io
(1) 单引号 (2) 不使⽤分号 (3) 每⾏宽度⾄多80字符 (4) 不加对象|数组最后逗号 (5) 换⾏符号不限制(win mac 不⼀致)
2. vue组件名称多单词组成(忽略index.vue)
3. props解构(关闭)
rules: {
'prettier/prettier': [
'warn',
{
singleQuote: true, // 单引号
semi: false, // ⽆分号
printWidth: 80, // 每⾏宽度⾄多80字符
trailingComma: 'none', // 不加对象|数组最后逗号
endOfLine: 'auto' // 换⾏符号不限制(win mac 不⼀致)
}
],
'vue/multi-word-component-names': [
'warn',
{
ignores: ['index'] // vue组件名称多单词组成(忽略index.vue)
}
],
'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
// 💡 添加未定义变量错误提⽰,create-vue@3.6.3 关闭,这⾥加上是为了⽀持下⼀个章节演
⽰。
'no-undef': 'error'
}
三、基于husky的代码检查工作流
husky配置
1.git初始化 git init
2.初始化husky工具配置 https://typicode.github.io/husky/
pnpm dlx husky-init && pnpm install
3.修改 .husky/pre-commit文件
pnpm lint
缺点:默认进行的是全量检查,有耗时问题,历史问题
lint-staged配置(保证检查的代码是最新的未提交到暂存区的)
1.安装
pnpm i lint-staged -D
2.配置package.json
{
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
}
}
{
"scripts": {
// ... 省略 ...
"lint-staged": "lint-staged"
}
}
3.修改 .husky/pre-commit文件
pnpm lint-staged