vue3 + eslint + prettier + cz-git

一：vue3

1.1 vue3創(chuàng)建

輸入命令后根據(jù)提示選擇，項目是ts所以必選typescript

pnpm create vite

1.2 安裝依賴

pnpm i

1.3 運行

pnpm run dev

二：配置eslint

2.1 執(zhí)行安裝命令

pnpm add eslint -D

2.2 初始化eslint

pnpm eslint --init

• 依次選擇

2.3 依賴安裝完成后，會生成.eslintrc.cjs配置文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended' // 解決ESlint和Prettier沖突
  ],
  overrides: [],
  // 配置支持 vue 和 ts
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用該any類型。
    '@typescript-eslint/no-unused-vars': 'off', //禁止未使用的變量
    'vue/valid-template-root': 'off',
    'vue/no-v-html': 'off',
    'prefer-const': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    'vue/multi-word-component-names': 'off',
    endOfLine: 'off', // 添加忽略換行格式的檢查。
    'vue/require-default-prop': 'off' // props 需要設(shè)置默認(rèn)值
  }
}

2.4 在package.json文件中的script中添加lint命令

{
    "scripts": {
        // eslint . 為指定lint當(dāng)前項目中的文件
        // --ext 為指定lint哪些后綴的文件
        // --fix 開啟自動修復(fù)
        "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
    }
}

2.5 執(zhí)行lint命令

pnpm lint

遇到這樣的錯誤，很明顯少安裝插件了

pnpm install eslint-plugin-prettier@latest --save-dev

pnpm add prettier -D

2.6 安裝插件eslint

在項目中新建.vscode/settings.json文件，然后在其中加入以下配置。

{
    // 開啟自動修復(fù)
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true
    }
}

三：配置prettier

3.1 執(zhí)行安裝命令

pnpm add prettier -D

3.2 在根目錄下新建.prettierrc.cjs

更多配置可查看官方文檔

module.exports = {
  singleQuote: true, // 使用單引號, 默認(rèn)false(在jsx中配置無效, 默認(rèn)都是雙引號)
  semi: false, // 使用分號, 默認(rèn)true
  printWidth: 120, //  每行超過多少字符自動換行
  arrowParens: 'avoid', // avoid 能省略括號的時候就省略 例如x => x
  bracketSpacing: true, // 對象中的空格 默認(rèn)true
  trailingComma: 'none', // all 包括函數(shù)對象等所有可選
  tabWidth: 2, // tab縮進(jìn)大小,默認(rèn)為2
  useTabs: false, // 使用tab縮進(jìn)，默認(rèn)false
  htmlWhitespaceSensitivity: 'ignore',
  // 對象大括號直接是否有空格，默認(rèn)為true，效果：{ foo: bar }
  bracketSpacing: true
}

3.3 在package.json中的script中添加以下命令

{
    "scripts": {
        "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    }
}

3.4 安裝Prettier - Code formatter插件

在.vscode/settings.json中添加一下規(guī)則

{
    // 保存的時候自動格式化
    "editor.formatOnSave": true,
    // 默認(rèn)格式化工具選擇prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

四：使用cz-git

4.1 全局安裝commitizen,如此一來可以快速使用 cz 或 git cz 命令進(jìn)行啟動。

npm install -g commitizen

4.2 安裝依賴

pnpm install -D cz-git

4.3 修改 package.json 添加 config 指定使用的適配器

{
  "scripts": {

  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }
}

4.4 添加自定義配置

在根目錄自行添加.commitlintrc.cjs文件進(jìn)行配置文章來源地址http://www.zghlxwxcb.cn/news/detail-615596.html

// .commitlintrc.js
module.exports = {
  rules: {
    // @see: https://commitlint.js.org/#/reference-rules
  },
  prompt: {
    messages: {
      type: '選擇你要提交的類型 :',
      scope: '選擇一個提交范圍（可選）:',
      customScope: '請輸入自定義的提交范圍 :',
      subject: '填寫簡短精煉的變更描述 :\n',
      body: '填寫更加詳細(xì)的變更描述（可選）。使用 "|" 換行 :\n',
      breaking: '列舉非兼容性重大的變更（可選）。使用 "|" 換行 :\n',
      footer: '列舉關(guān)聯(lián)issue (可選) 例如: #31, #I3244 :\n',
      confirmCommit: '是否提交或修改commit ?'
    },
    types: [
      { value: 'feat', name: 'feat:        新增功能 | A new feature', emoji: '?' },
      { value: 'fix', name: 'fix:         修復(fù)缺陷 | A bug fix', emoji: '??' },
      { value: 'docs', name: 'docs:        文檔更新 | Documentation only changes', emoji: '??' },
      {
        value: 'style',
        name: 'style:       代碼格式 | Changes that do not affect the meaning of the code',
        emoji: '??'
      },
      {
        value: 'refactor',
        name: 'refactor:    代碼重構(gòu) | A code change that neither fixes a bug nor adds a feature',
        emoji: '??'
      },
      { value: 'perf', name: 'perf:        性能提升 | A code change that improves performance', emoji: '??' },
      { value: 'test', name: 'test:        測試相關(guān) | Adding missing tests or correcting existing tests', emoji: '?' },
      {
        value: 'build',
        name: 'build:       構(gòu)建相關(guān) | Changes that affect the build system or external dependencies',
        emoji: '???'
      },
      { value: 'ci', name: 'ci:          持續(xù)集成 | Changes to our CI configuration files and scripts', emoji: '??' },
      { value: 'revert', name: 'revert:      回退代碼 | Revert to a commit', emoji: '??' },
      {
        value: 'chore',
        name: 'chore:       其他修改 | Other changes that do not modify src or test files',
        emoji: '??'
      }
    ],
    useEmoji: true,
    // scope 類型（定義之后，可通過上下鍵選擇）
    scopes: [
      ['components', '組件相關(guān)'],
      ['hooks', 'hook 相關(guān)'],
      ['utils', 'utils 相關(guān)'],
      ['element-ui', '對 element-ui 的調(diào)整'],
      ['styles', '樣式相關(guān)'],
      ['deps', '項目依賴'],
      ['auth', '對 auth 修改'],
      ['other', '其他修改']
    ].map(([value, description]) => {
      return {
        value,
        name: `${value.padEnd(30)} (${description})`
      }
    }),

    // 是否允許自定義填寫 scope，在 scope 選擇的時候，會有 empty 和 custom 可以選擇。
    allowCustomScopes: true,

    // 跳過要詢問的步驟
    skipQuestions: ['body', 'breaking', 'footer'],
    subjectLimit: 100, // subject 限制長度
    // 設(shè)置只有 type 選擇了 feat 或 fix，才詢問 breaking message
    allowBreakingChanges: ['feat', 'fix'],

    issuePrefixs: [
      // 如果使用 gitee 作為開發(fā)管理
      { value: 'link', name: 'link:     鏈接 ISSUES 進(jìn)行中' },
      { value: 'comment', name: 'comment: 評論 ISSUES' },
      { value: 'closed', name: 'closed:   標(biāo)記 ISSUES 已完成' }
    ]
  }
}

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