prettier 配置

1. vscode 安裝prettier 的 插件

2. 新建 .prettierrc 文件

{
  "semi": false, // 不尾隨分號
  "singleQuote": true,  // 使用單引號
  "trailingComma": "none" // 多行逗號分隔的語法，最后一行不加逗號
}

eslint 配置

1. 創(chuàng)建.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/vue3-essential', '@vue/standard'],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     // prettier 和 eslint的沖突，需要關(guān)閉當前規(guī)則校驗（ex： created() { ...}.    這個created 和 （）中間沒有空格報錯導(dǎo)致的沖突）
    'space-before-function-paren': 'off'
  }
}

git 提交規(guī)范（npm > 7.x）

1. commitlint （檢測提交信息）

• 1. 安裝

npm install --save-dev @commitlint/config-conventional@12.1.4  @commitlint/cli@12.1.4

• 2. 創(chuàng)建 commitlint.config.js

module.exports = {
  // 繼承規(guī)格
  extends: ['@commitlint/config-conventional'],
  // utf-8
  roles: {
    // type 的類型定義： 表示git提交
    // type 必須在以下范圍類
    'type-enum': [
      // 當前驗證的錯誤級別
      2,
      // 什么情況下進行驗證
      'always',
      // 范型內(nèi)容
      [
        'feat', //  新功能
        'fix', // 修復(fù) bug
        'docs', // 文檔注釋
        'style', // 代碼格式 （不影響代碼運行的變動）
        'refactor', // 重構(gòu)（不增加新功能，也不修復(fù)bug）
        'perf', // 性能優(yōu)化
        'test', // 測試
        'chore', // 構(gòu)建過程或者輔助工具變動
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小寫不做校驗
    'subject-case': [0]
  }
}

2. husky （githook的工具）

• 1. 安裝依賴

npm install husky@7.0.1 - - save-dev

• 2. 啟動hooks，生成.husky 文件夾

npx husky install

• 3. 在package.json 中生成prepare指令（需要 npm ≥7.0 版本）

npm set-script prepare "husky install"

• 4. 執(zhí)行 prepare 指令

npm run prepare

• 5. 成功提示
     
• 6. 添加commitlint 的hook 到husky中，并指令在commit-msg 的hooks下執(zhí)行 npx --no-installcommitlint --edit "$1” 指令

npx husky add husky/commit-msg 'npx --no-install commitlint --edit "$1"'

• 7. 文件結(jié)構(gòu)

• 8. 測試
     

3. pre-commit 檢測代碼提交規(guī)范

• 1. 執(zhí)行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"添加commit 時的hook(npx eslint --ext . js,.vue sre 會在執(zhí)行到該hook 時運行）
• 2. 文件夾目錄
     
• 3. 自行測試， 不符合eslint規(guī)范的代碼無法提交

缺點： pre-cormit 處理了 檢測代碼的提交規(guī)范向題，當我們進行代碼提交時，會檢測所有的代碼格式規(guī)范。

4. lint-staged自動修復(fù)格式錯誤(無需安裝，vue3內(nèi)置了)

檢測成功，直接提交代碼，
檢測不成功，自動修復(fù)然后提交代碼
檢測不成功，修復(fù)失敗，手動修復(fù)在提交代碼

• 1. 修改package.json（新增代碼）

  "gitHookst": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix"
    ]
  }

• 2. 修改 pre-commit

文章來源地址http://www.zghlxwxcb.cn/news/detail-587420.html

到了這里，關(guān)于vue3 前端編碼規(guī)范的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！