pnpm创建vue项目，配置eslint，以及代码规范检查husky的使用

前言

代码提交前的规范检查，以及一些设置规则，对于新人来说非常有用，本账号所有记录的内容都是从网上整理而来，目的是为了自己工作使用。

一、使用pnpm 创建vue项目

1. 安装pnpm

   全局安装 npm install -g pnpm

2. 创建vue项目

   pnpm create vue 配置一些插件选项

3. 运行vue项目

   安装依赖：pnpm i

   运行：pnpm dev

   打包：pnpm build

   pnpm安装其他插件： pnpm add axios /pnpm add axios -D

二、esLint配置配合Prettier使用

esLint 主要是用来提示错误；Prettier主要是用来代码风格设置

1. vscode中安装ESLint插件、禁用prettier插件；以及在settings.jion里设置一些内容

  //关闭保存自动格式化
  "editor.formatOnSave": false,
  //ESLint插件+vscode配置，实现自动格式化修复
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }

2. ESLint配置在.eslintrc.cjs文件中,在rules中进行相关设置

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

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    //prettier风格更多配置：https://prettier.io
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, //单引号
        semi: false, // 无分号
        printWidth: 80, //每行宽度最多80字符
        trailingComma: 'none', //不加对象|数组最后逗号
        endOfLine: 'auto' //换行符号不限制
      }
    ],
    //ESlint关注+规范
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] //vue组件名必须为多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], //关闭检验prop解构
    'no-undef': 'error' //使用未定义的变量错误提示
  }
}

3. prettier配置在.prettierrc.json文件中，官网

三、配置代码检查工作流

1. 安装husky（安装前，项目必须git init初始化）

   pnpm dlx husky-init && pnpm i

2. 修改.husky/pre-commit文件

   将npm test修改为pnpm lint

四、(在三的基础上)只对自己写的代码负责，不负责仓库以前的代码的规范

1. 安装lint-staged

   pnpm i lint-staged -D

2. package.json 配置

     //新增这两项
     "scripts": {
       "lint-staged":"lint-staged" 
     }
   
     "lint-staged":{
       "*.{js,ts,vue}":["eslint --fix"]
     }
   

3. 修改.husky/pre-commit文件

   将pnpm lint 修改为 pnpm lint-staged