项目准备:使用pnpm包管理器,husky和eslint格式化代码

一、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 

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值