手把手Vue3項目（一）——安裝配置 Vite + Vue3 + TypeScript + Ant-design-vue 項目

項目中涉及到的配置：

Vite

Vue 3

VueRouter 4

Vuex 4

Ant- design-vue

TypeScript

less

tsx / jsx 支持

Eslint

Prettier

Stylelint

Git 代碼檢測 pre-commit / commit-message

后續文章會繼續更新，mock、json-server模擬前端數據，實現前后端分離開發，axios安裝與配置，后台管理系統登錄邏輯實現，VueRouter動態路由配置和權限管理，通用組件的封裝等等。

vite搭建vue項目

具體步驟請參考，前面的文章——使用vite從開始搭建vue項目

安裝配置 ant- design-vue 2.2.6

安裝

// 安裝ant-design-vue
pnpm add ant-design-vue@next
// 安裝ant-design-vue/icon
pnpm add @ant-design/icons-vue
// vite 按需導入插件
// **廢棄：pnpm add vite-plugin-components // 安裝不過一周左右時間，插件就重命名了，所以按照新插件重新配置**
// 參考這里：<https://github.com/antfu/unplugin-vue-components>
pnpm add unplugin-vue-components -D

配置

// vite.config.js
// import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
**import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'**

export default {
  plugins: [
    /* ... */
		// 項目插件重命名之后廢棄，改為使用 unplugin-vue-components，之前的也是可以使用的
    ViteComponents({
      customComponentResolvers: [AntDesignVueResolver()],
    }),

		// 新的使用方法
		// <https://github.com/antfu/unplugin-vue-components>
    // ant-design-vue 按需導入
    **Components({
      resolvers: [
        AntDesignVueResolver(),
        // ElementPlusResolver(),
        // VantResolver(),
      ],
      // globalComponentsDeclaration
      dts: true,
      // customLoaderMatcher
      include: [/\\.vue$/, /\\.vue\\?vue/, /\\.md$/],
    })**
  ],
};

驗證

<a-button type="primary">
    <template #icon>
      <SearchOutlined/>
    </template>
    Primary Button
</a-button>
<br>
<StepForwardOutlined/>

安裝配置 less

安裝

pnpm add less

配置

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// <https://vitejs.dev/config/>
export default defineConfig({
    // 支持 less 樣式
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    }
})

驗證

<div class="box">
    <div class="h1">h1</div>
    <div class="h2">h2</div>
  </div>

// 樣式文件App.less,或者寫在文件內
.box {
  width: 100%;
  hight: 100px;
  border: 1px solid #42b983;

  .h1 {
    color: red;
  }

  .h2 {
    color: blue;
  }

}

安裝配置 VueRouter 4

安裝

pnpm add vue-router@4

配置

// router/index.ts ----------------創建路由------------------
import {createRouter, createWebHistory} from "vue-router";
import {routes} from "@/router/config";

const router = createRouter({
    history: createWebHistory(),
    routes
})
router.beforeEach((to, from) => {
    // to.path = '/login'
    return true
})
export default router

// router/config.ts ----------------路由路徑配置文件------------
export const routes = [
		// 路由重定向
    {
        path: '/',
        redirect: '/home',
    },
    {
        path: '/home',
        // component: Home
        component: () => import("@modules/home/Index.vue")
    },
    {
        path: '/about',
        component: () => import("@modules/about/Index.vue")
    }
]

// main.ts -----------------使用router--------------------------
import {createApp} from 'vue'
import router from "@/router";
import App from './App.vue'
import "ant-design-vue/dist/antd.less"
// import '@ant-design/icons-vue'

const app = createApp(App)
app.use(router)
app.mount('#app')
// createApp(App).use(router).mount('#app')

// App.vue  ----------------在頁面中渲染路由加載的頁面------------------------
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out <https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup>
</script>

<template>
  <router-view></router-view>
</template>

<style>
</style>

驗證

<!-- 1.通過訪問根目錄確定路由重定向是否成功 -->
<template>
  <h1>home</h1>
  <router-link to="/about">about</router-link>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "home",
  components: {},
  setup() {
    return {}
  }
})
</script>

<style lang="less" scoped>

</style>
<!-- 1. 通過訪問根目錄確定路由重定向是否成功 -->
<!-- 2. 通過地址欄輸入其他地址如 /about ，觀察是否跳轉頁面成功 -->
<!-- 3. 通過router-link確定頁面router可以使用-->

<template>
  <h1>home</h1>
  <router-link to="/about">about</router-link>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "home",
  components: {},
  setup() {
    return {}
  }
})
</script>

<style lang="less" scoped>

</style>

<template>
  <h1>home</h1>
  <router-link to="/about">about</router-link>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "home",
  components: {},
  setup() {
    return {}
  }
})
</script>

<style lang="less" scoped>

</style>

安裝配置 alias

安裝

// 導入 path 的時候提示報錯，需要安裝 @types/node 類型檢測
pnpm add @types/node

配置

// vite.config.ts
import {defineConfig} from 'vite'
import path from 'path'

export default defineConfig({
		//src目錄的配置
	  resolve: {
	    alias: {
	      // src 目錄路徑
	      '@': path.resolve(__dirname, 'src'),
	      // 公共組件導入路徑
	      '@modules': path.resolve(__dirname, 'src/modules/components')
	    }
	  },
		
    // 下面的配置方式廢棄了，剛配置好的時候還可以，一周之后發現不會熱更新了，讓后在終端看到alias這個配置廢棄了
		// 讓更換成 resolve.alias 的方式，更換之后發現確實可以了
    alias: {
        '@': path.resolve(__dirname, 'src'),
				// 還可以額外添加一些其他的
				"components": path.resolve(__dirname, "src/components"),
	      "styles": path.resolve(__dirname, "src/styles"),
	      "views": path.resolve(__dirname, "src/views"),
	      "utils": path.resolve(__dirname, "src/utils"),
    }

	
})

// ts.config.json
{
  "compilerOptions": {
    // 如果是ts項目，僅僅添加上面還不夠，因為編輯器無法自動識別別名路徑
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

驗證

// 待會兒在導入路由導入組件的時候使用，或者在App中引入一個login的測試組件
// App.vue
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out <https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup>
// 使用 alias @ 引入
import Login from '@/views/login/Login.vue'
// 使用相對路徑引入確認無誤
// import Login from './views/login/Login.vue'
// 測試導入 ts 文件是否報錯，結論：可以正常使用，但編輯器有 ts 紅色下划線錯誤提示
import router from "@/router";
console.log(router)
</script>

<template>
  <Login></Login>
</template>

<style>
</style>

安裝配置 支持頁面 tsx / jsx

安裝

pnpm add @vitejs/plugin-vue-jsx

配置

// 在 vite.config.ts 配置
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
 plugins: [ vueJsx()]
})

// tsconfig.json 文件中
{
  "include": [
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.jsx",
    "src/**/*.vue"
  ],
  "compilerOptions": {
    // 在.tsx文件里支持JSX
    "jsx": "preserve",
  }
}

驗證

// .tsx 文件
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => <div>Hello,World</div>
  }
})

安裝配置 eslint

• 參考鏈接：

  https://dev.to/devdammak/setting-up-eslint-in-your-javascript-project-with-vs-code-2amf

  https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/

  https://www.npmjs.com/package/vue-eslint-parser

是否安裝 vite-plugin-eslint 並配置，目前先使用這樣的配置，如果是成功的就不安裝vite-eslint的插件了

安裝

pnpm add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

// 需要再安裝一個 vue 但頁面解析器，並配置

pnpm add vue-eslint-parser

/**
* pnpm add eslint
* 如果使用 pnpm eslint --init 根據提示安裝
* 會提示你初始化 eslint，讓你選擇適合你項目所需的插件，但是是以 npm 為包安裝器安裝的，由於我使用的 pnpm 所以最后報錯了。
* 但是也算是提示了我們所需要安裝的插件依賴了，之后我們自己手動安裝也可以
*/ 

heyhaiyang@HaiyangdeMacBook-Air vite-vue3-ts-antd-20210831 % pnpm eslint --init

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript**
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest

✔ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name ".pnpm": name cannot start with a period

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/heyhaiyang/.npm/_logs/2021-09-01T07_46_06_494Z-debug.log
Successfully created .eslintrc.js file in /Users/heyhaiyang/codebase/private/vite-vue3-ts-antd-20210831
ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy.

配置

// 使用我們上面安裝時選擇的一系列符合我們項目的配置之后，在項目根目錄就會生成一個 .eslintrc.js 配置文件
// .eslintrc.js 自動生成的eslint配置文件，接下來需要的就是我們根據需要添加對應的 rules
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
		// vue 單頁面解析器
		"parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {}
};

// 我們也添加一個eslint忽略的文件
// eslintignore

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
*.zip
/public
/docs
.husky
.local
/bin
Dockerfile

// webStorm配置

驗證

// 暫時還沒有驗證，需要在實際寫代碼過程中驗證，並添加 rules

**🌟🌟🌟 遇到一些 eslint 'warning' 可以嘗試先用提示的方法注釋掉，之后在rules里面添加上這條規則，將狀態改成off，0 等等**

**錯誤1: ESLint: Parsing error: '>' expected.** 
vue 單頁面 <h1></h1> ，就只寫這些就報錯

解決：安裝vue但頁面 eslint 解析器並配置
	pnpm add vue-eslint-parser
{
	"parser": "vue-eslint-parser",
  "parserOptions": {
      "ecmaVersion": 12,
      "parser": "@typescript-eslint/parser",
      "sourceType": "module"
}

**錯誤2: [eslint] 'module' is not defined. (no-undef)**
module.exports = {
  env: {
    browser: true,
    es2021: true
  },

解決：<https://stackoverflow.com/questions/49789177/module-is-not-defined-and-process-is-not-defined-in-eslint-in-visual-studio-code>
env環境配置要支持 node
所以配置信息如下：
module.exports = {
  env: {
    browser: true,
    node: true,
    es2021: true
  },

**錯誤3: ESLint: The template root requires exactly one element**.(**vue/no-multiple-template-root**)
這是因為vue的模版中只有能一個根節點，所以在中插入第二個元素就會報錯

解決：vue3 中允許 不加入根標簽，上面錯誤括號中粗體的部分，剛好是提示rules的部分，如果不想要提示，可以在rules中添加
"vue/no-multiple-template-root": 0

**錯誤4: TS1259: Module '"path"' can only be default-imported using the 'esModuleInterop' flag**

解決：import * as path from 'path'
****

安裝配置 Prettier

prettier官網 https://prettier.io/docs/en/install.html

安裝

pnpm add prettier

配置

// 創建一個 .prettierrc.js/json 文件，配置美化格式
module.exports = {
    semi: false,
    singleQuote: true,
}

// 創建一個 .prettierignore 文件，配置忽略的文件
node_modules

// webStorm編輯器配置

驗證

// 在實際寫代碼過程中使用，option+command+L 格式化代碼的時候，具體添加合適的美化規則

module.exports = {
  semi: false, // 是否在語句末尾打印分號
  singleQuote: true, // 是否使用單引號
  printWidth: 100, // 單行輸出（不折行）的（最大）長度
  quoteProps: 'as-needed', // 僅在需要時在對象屬性周圍添加引號
  tabWidth: 2, // 每個縮進級別的空格數
  tabs: false, // 使用制表符 (tab) 縮進行而不是空格 (space)
  bracketSpacing: true, // 是否在對象屬性添加空格
  jsxBracketSameLine: true, // 將 > 多行 JSX 元素放在最后一行的末尾，而不是單獨放在下一行（不適用於自閉元素）,默認false,這里選擇>不另起一行
  htmlWhitespaceSensitivity: 'ignore', // 指定 HTML 文件的全局空白區域敏感度, "ignore" - 空格被認為是不敏感的
  trailingComma: 'none', // 去除對象最末尾元素跟隨的逗號
  useTabs: false, // 不使用縮進符，而使用空格
  jsxSingleQuote: false, // jsx 不使用單引號，而使用雙引號
  arrowParens: 'always', // 箭頭函數，只有一個參數的時候，也需要括號
  rangeStart: 0, // 每個文件格式化的范圍是文件的全部內容
  proseWrap: 'always', // 當超出print width（上面有這個參數）時就折行
  endOfLine: 'lf' // 換行符使用 lf
}

安裝配置 stylelint

https://stylelint.io/user-guide/get-started stylelint官網

https://sailormillet.github.io/2021/02/03/stylelint-css代碼格式化/

https://blog.csdn.net/weixin_49766444/article/details/108535741

安裝

pnpm add 
stylelint 
stylelint-config-standard
stylelint-config-rational-order
stylelint-prettier
stylelint-config-prettier
-D

配置

// 在你的項目根目錄下創建一個.stylelintrc.js配置文件
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order',
    'stylelint-prettier/recommended'
  ],
  rules: {
    // 顏色值小寫
    'color-hex-case': 'lower',
    // 注釋前無須空行
    'comment-empty-line-before': null,
    // 使用數字或命名的 (可能的情況下) font-weight 值
    'font-weight-notation': null,
    // 在函數的逗號之后要求有一個換行符或禁止有空白
    'function-comma-newline-after': null,
    // 在函數的括號內要求有一個換行符或禁止有空白
    'function-parentheses-newline-inside': null,
    // url使用引號
    'function-url-quotes': 'always',
    // 字符串使用單引號
    'string-quotes': 'single',
    // 禁止低優先級的選擇器出現在高優先級的選擇器之后
    'no-descending-specificity': null,
    // 禁止空源
    'no-empty-source': null,
    // 禁止缺少文件末尾的換行符
    'no-missing-end-of-source-newline': null,
		// font-family太多，具體的問題我也不知道 ，先屏蔽錯誤再說
    'font-family-no-missing-generic-family-keyword': null
  }
}

驗證

// 在實際寫代碼過程中使用時驗證
錯誤1：stylelint規則和prettier規則沖突
// 之前的配置
extends: 'stylelint-config-standard',

解決：
1. 安裝stylelint-prettier stylelint-config-prettier ，配置prettier規則覆蓋stylelint規則，從而不報錯
2. 安裝 stylelint-config-recess-order 增加 css 屬性順序排序校驗
// 現在的配置
extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order',
    'stylelint-prettier/recommended'
  ],

** 還遺留了一個問題，webStorm 中stylelint無法在保存時直接fix文件，但是使用prettier規則覆蓋stylelint規則，這個問題就不存在了
** 不過在想使用stylelint規則格式化css樣式代碼，prettier專注其他邏輯代碼，這樣要怎么配置

安裝配置 Vuex 4

安裝

pnpm add vuex@next

配置

// store/index.ts
import { createStore } from 'vuex'

interface data {
  count: number
}

export const store = createStore({
  // 通過限定傳入的參數類型
  state: (): data => {
    // 必須要有返回
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {}
})

// main.ts
import { createApp } from 'vue'
import router from '@/router'
import {store} from '@/store'
import App from './App.vue'
import "ant-design-vue/dist/antd.less"
// import '@ant-design/icons-vue'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

驗證

// vuex.vue
<template>
  <div>
    <h1>{{ count }}</h1>
    <a-input :value="count"></a-input>
    <a-button @click="add">+1</a-button>
  </div>
</template>

<script lang="ts">
import {defineComponent, computed} from "vue";
import {useStore} from "vuex";

export default defineComponent({
  name: "vuex",
  components: {},
  setup() {
    const store = useStore()
    // ! 只有getter的計算屬性
    const count = computed(() => {
      return store.state.count
    })

    const add = () => {
      store.commit('increment');
    }
    return {
      count,
      add
    }
  }
})
</script>

安裝配置 git提交前校驗 pre-commit

• 參考鏈接：
  1. https://github.com/ZSI2017/blog/issues/14
  2. https://joyran.github.io/yi-blog/blog/code-guide.html
  3. https://www.cnblogs.com/cag2050/p/10518074.html
  4. https://juejin.cn/post/6974301879731748900

安裝

pnpm add yorkie lint-staged -D

配置

// 代碼提交時，針對本次提交的修改文件進行校驗。在package.json文件內
{
	"gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "git add"
    ],
    "*.{vue,css,sass,less}": [
      "stylelint --fix",
      "git add"
    ],
    "*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ]
  }
}

驗證

// 已驗證，后續過程中繼續查缺補漏

安裝配置 commit-message

安裝

pnpm add @commitlint/config-conventional @commitlint/cli

配置

// 執行 git commit 時，對msg信息規范，用於添加人和機器可讀的含義來提交消息

// 根據官網的描述，創建commitlint.config.js，並配置里面的信息，
// 也可以新建 .commitlintrc.js 文件，在 package.json 中也對應更改一下
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

// package.json
"gitHooks": {
		// 配置1: 目前使用配置1，配置2是公司目前項目用的，不知道這個 $HUSKY_GIT_PARAMS 是什么
    "commit-msg": "commitlint --config commitlint.config.js -e -V",
		// 配置2: 暫時未使用配置2,配置2內容在使用HUSKY時，參數為：$HUSKY_GIT_PARAMS
		// 如果使用yokie，默認使用的參數是：GIT_PARAMS
    "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
  },

// 修改項目目錄下的.git/hooks 內的需要啟用的腳本
// 以下使用到的4個如下：

**//  commit-msg**
#!/bin/sh
#yorkie 2.0.0

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

has_hook_script () {
  [ -f package.json ] && cat package.json | grep -q "\\"$1\\"[[:space:]]*:"
}

# OS X and Linux only
load_nvm () {
  # If nvm is not loaded, load it
  command_exists nvm || {
    export NVM_DIR="$1"
    [ -s "$1/nvm.sh" ] && . "$1/nvm.sh"
  }
}

# OS X and Linux only
run_nvm () {
  # If nvm has been loaded correctly, use project .nvmrc
  command_exists nvm && [ -f .nvmrc ] && nvm use
}

cd "."

# Check if commit-msg is defined, skip if not
has_hook_script commit-msg || exit 0

# Add common path where Node can be found
# Brew standard installation path /usr/local/bin
# Node standard installation path /usr/local
export PATH="$PATH:/usr/local/bin:/usr/local"

# Try to load nvm using path of standard installation
load_nvm /Users/heyhaiyang/.nvm
run_nvm

# Export Git hook params
export GIT_PARAMS="$*"

# Run hook
node "./node_modules/yorkie/src/runner.js" commit-msg || {
  echo
  echo "commit-msg hook failed (add --no-verify to bypass)"
  exit 1
}

**// pre-commit**
#!/bin/sh
#yorkie 2.0.0

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

has_hook_script () {
  [ -f package.json ] && cat package.json | grep -q "\\"$1\\"[[:space:]]*:"
}

# OS X and Linux only
load_nvm () {
  # If nvm is not loaded, load it
  command_exists nvm || {
    export NVM_DIR="$1"
    [ -s "$1/nvm.sh" ] && . "$1/nvm.sh"
  }
}

# OS X and Linux only
run_nvm () {
  # If nvm has been loaded correctly, use project .nvmrc
  command_exists nvm && [ -f .nvmrc ] && nvm use
}

cd "."

# Check if pre-push is defined, skip if not
has_hook_script pre-push || exit 0

# Add common path where Node can be found
# Brew standard installation path /usr/local/bin
# Node standard installation path /usr/local
export PATH="$PATH:/usr/local/bin:/usr/local"

# Try to load nvm using path of standard installation
load_nvm /Users/heyhaiyang/.nvm
run_nvm

# Export Git hook params
export GIT_PARAMS="$*"

# Run hook
node "./node_modules/yorkie/src/runner.js" pre-push || {
  echo
  echo "pre-push hook failed (add --no-verify to bypass)"
  exit 1
}

**// push-to-checkout**
#!/bin/sh
#yorkie 2.0.0

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

has_hook_script () {
  [ -f package.json ] && cat package.json | grep -q "\\"$1\\"[[:space:]]*:"
}

# OS X and Linux only
load_nvm () {
  # If nvm is not loaded, load it
  command_exists nvm || {
    export NVM_DIR="$1"
    [ -s "$1/nvm.sh" ] && . "$1/nvm.sh"
  }
}

# OS X and Linux only
run_nvm () {
  # If nvm has been loaded correctly, use project .nvmrc
  command_exists nvm && [ -f .nvmrc ] && nvm use
}

cd "."

# Check if push-to-checkout is defined, skip if not
has_hook_script push-to-checkout || exit 0

# Add common path where Node can be found
# Brew standard installation path /usr/local/bin
# Node standard installation path /usr/local
export PATH="$PATH:/usr/local/bin:/usr/local"

# Try to load nvm using path of standard installation
load_nvm /Users/heyhaiyang/.nvm
run_nvm

# Export Git hook params
export GIT_PARAMS="$*"

# Run hook
node "./node_modules/yorkie/src/runner.js" push-to-checkout || {
  echo
  echo "push-to-checkout hook failed (add --no-verify to bypass)"
  exit 1
}

**// pre-push**
#!/bin/sh
#yorkie 2.0.0

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

has_hook_script () {
  [ -f package.json ] && cat package.json | grep -q "\\"$1\\"[[:space:]]*:"
}

# OS X and Linux only
load_nvm () {
  # If nvm is not loaded, load it
  command_exists nvm || {
    export NVM_DIR="$1"
    [ -s "$1/nvm.sh" ] && . "$1/nvm.sh"
  }
}

# OS X and Linux only
run_nvm () {
  # If nvm has been loaded correctly, use project .nvmrc
  command_exists nvm && [ -f .nvmrc ] && nvm use
}

cd "."

# Check if pre-push is defined, skip if not
has_hook_script pre-push || exit 0

# Add common path where Node can be found
# Brew standard installation path /usr/local/bin
# Node standard installation path /usr/local
export PATH="$PATH:/usr/local/bin:/usr/local"

# Try to load nvm using path of standard installation
load_nvm /Users/heyhaiyang/.nvm
run_nvm

# Export Git hook params
export GIT_PARAMS="$*"

# Run hook
node "./node_modules/yorkie/src/runner.js" pre-push || {
  echo
  echo "pre-push hook failed (add --no-verify to bypass)"
  exit 1
}

commit-msg

pre-commit

pre-push

push-to-checkout

附加配置——選擇性添加 lint 腳本

https://juejin.cn/post/6991728251034959885

// 根據我自己的項目，npm 要替換成 pnpm ，用不同的包管理器
"scripts": {
 "dev": "vite",
 "build": "tsc && vite build",
 "serve": "vite preview",
 // 主要配置 觸發pre-commit 進行elint stylelint 格式校驗
 "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
 "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
 "lint:prettier": "prettier --check "**/*" --end-of-line auto",
 "lint:style": "stylelint --fix "src/**/*.less" --syntax less",
 "lint-staged": "lint-staged",
 "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx "
 },

驗證

// 暫未驗證，后續過程中驗證

Find me

Gitee：https://gitee.com/heyhaiyon/vite-vue-ts-antd.git

微信公眾號：heyhaiyang

掘金：heyhaiyang

博客園：heyhaiyang

頭條號：heyhaiyang