web项目提交git两个小细节

一、Eslint检查代码规范与Prettier进行配置

1.eslintrc.cjs

/* 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专注于代码的美观度 (格式化工具)
    // 前置：
    // 1. 禁用格式化插件 prettier  format on save 关闭
    // 2. 安装Eslint插件, 并配置保存时自动修复
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    // ESLint关注于规范, 如果不符合规范，报错
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验 (props解构丢失响应式)
    // 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    // 'no-undef': 'off'//关闭
    'no-undef': 'error' //打开
  },
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}

2.husky是提交到git仓库前检查代码是否有bug

1.在项目全局中创建git仓库

git init

2.初始化husky工作配置

pnpm dlx husky-init && pnpm install

3.修改husky/pre-commit文件下的代码

pnpm lint

4.lint-staged配置

pnpm i lint-staged -D

4-1配置package.json(在devDependencies代码之下)

  "link-staged":{
    "*.{js,ts,vue}":[
      "eslint --fix"
    ]
  }

4-2调用（在scripts中最后一行）

"lint-staged":"lint-staged"

以上是代码配置！！！可以在main.js中创建测试错误代码

5.mian.js

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

//测试错误代码
console.log(gagag)

app.use(createPinia())
app.use(router)

app.mount('#app')

5-1提交代码git add . 

5-2新增文件进行提交测试

git commit -m '测试代码'

这是会出现错误，如下

$ git commit -m '提交测试性代码,检查之前的历史性的代码'

> vue3-message@0.0.0 lint E:\code\vue.js\Vue3-message
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore


E:\code\vue.js\Vue3-message\src\main.js
  11:13  error  'gagag' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

 ELIFECYCLE  Command failed with exit code 1.
husky - pre-commit hook exited with code 1 (error)

5-3根据控制台中的报错进行修复错误，在运行提交代码和测试暂缓区代码