基于vue3/typescript/viet/pnpm的开发规范

1. 安装pnpm: npm i pnpm -g

2. 创建基于vite的项目： pnpm create vue

        项目依赖内容：

✔ Project name: … patients-h5-100

✔ Add TypeScript? … No / `Yes`

✔ Add JSX Support? … `No` / Yes

✔ Add Vue Router for Single Page Application development? … No / `Yes`

✔ Add Pinia for state management? … No / `Yes`

✔ Add Vitest for Unit Testing? … `No` / Yes

✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes

✔ Add ESLint for code quality? … No / `Yes`

✔ Add Prettier for code formatting? … No / `Yes`

Scaffolding project in /Users/zhousg/Desktop/patient-h5-100...

Done. Now run:

cd patient-h5-100

pnpm install

pnpm lint

pnpm dev

3.安装插件 

        

Vue Language Features (Volar) vue3 语法⽀持

TypeScript Vue Plugin (Volar) vue3 中更好的 ts 提示

Eslint 代码⻛格校验

gitLens 代码 git 提交记录提示

json2ts json ⾃动转 ts 类型

Error Lens ⾏内错误提示

开启 ts 托管模式 :

要开启 Takeover 模式，你需要执⾏以下步骤来 在你的项⽬的⼯作空间中 禁⽤ VSCode 的内置 TS  语⾔服务：

  在当前项⽬的⼯作空间下，⽤ Ctrl + Shift + P (macOS ： Cmd + Shift + P ) 唤起命令⾯板。

  输⼊ built ，然后选择 “Extensions ： Show Built-in Extensions” 。

   在插件搜索框内输⼊ typescript ( 不要删除 @builtin 前缀 ) 。  

  点击 “TypeScript and JavaScript Language Features” 右下⻆的⼩⻮轮，然后选择 “Disable (Workspace)” 。

 ⭐  重新加载⼯作空间。 Takeover 模式将会在你打开⼀个 Vue 或者 TS ⽂件时⾃动启⽤。

4. 配置 eslint 规则

/* eslint-env node */

require ( '@rushstack/eslint-patch/modern-module-resolution' )

module . exports = {

root : true ,

extends : [

'plugin:vue/vue3-essential' ,

'eslint:recommended' ,

'@vue/eslint-config-typescript' ,

'@vue/eslint-config-prettier/skip-formatting'

],

rules : {

'prettier/prettier' : [

'warn' ,

{

// useTabs ：使⽤ tab 缩进还是空格缩进，选择 false ；

useTabs : false ,

// tabWidth ： tab 是空格的情况下，是⼏个空格，选择 2 个

tabWidth : 2 ,

// printWidth ：当⾏字符的⻓度，推荐 80 ，也有⼈喜欢 100 或者 120

printWidth : 100 ,

// singleQuote ：使⽤单引号还是双引号，选择 true ，使⽤单引号；

singleQuote : true ,

// trailingComma ：在多⾏输⼊的尾逗号是否添加，设置为 `none` ；

trailingComma : 'none' ,

// semi ：语句末尾是否要加分号，默认值 true ，选择 false 表示不加；

semi : false

}

],

'vue/multi-word-component-names' : [

'warn' ,

{

ignores : [ 'index' ]

}

],

'vue/no-setup-props-destructure' : [ 'off' ]

},

parserOptions : {

ecmaVersion : 'latest'

}

}

# 修复格式

pnpm lint

// 在setting文件里

"editor.codeActionsOnSave" : {

"source.fixAll" : true ,

},

5. husky 配置

安装： pnpm dlx husky-init && pnpm install

修改 .husky/pre-commit ⽂件中 npm text为pnpm lint

6.lint-staged 配置

安装： pnpm i lint-staged -D

配置 package.json：

{

// ... 省略 ...

"lint-staged": {

"*.{js,ts,vue}": [

"pnpm lint" ]

}

}

{

"scripts": {

// ... 省略 ...

"lint-staged": "lint-staged"

}

}

修改 .husky/pre-commit ⽂件中pnpm lint为pnpm lint-staged

7.   commitizen

安装：pnpm install commitizen -D

安装 cz-conventional-changelog ，并且初始化 cz-conventional-changelog ：

pnpm dlx commitizen init cz-conventional-changelog --save-dev

--pnpm Dw

提交：npx cz ：