国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

vue3-eslint-prettier-czgit配置

這篇具有很好參考價值的文章主要介紹了vue3-eslint-prettier-czgit配置。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

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
  • 依次選擇

vue3-eslint-prettier-czgit配置,vue,vue.js

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

vue3-eslint-prettier-czgit配置,vue,vue.js

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

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

vue3-eslint-prettier-czgit配置,vue,vue.js

pnpm add prettier -D

vue3-eslint-prettier-czgit配置,vue,vue.js

2.6 安裝插件eslint

vue3-eslint-prettier-czgit配置,vue,vue.js

在項目中新建.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插件

vue3-eslint-prettier-czgit配置,vue,vue.js

.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)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進(jìn)行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • uniapp+vite+vue3+ts配置eslint代碼檢查及prettier規(guī)范檢查

    uniapp+vite+vue3+ts配置eslint代碼檢查及prettier規(guī)范檢查

    首先要知道eslint與prettier的區(qū)別,ESLint 是一個用于檢測?JavaScript?代碼中的錯誤和潛在問題的工具。它只關(guān)注你寫的代碼是否正確,不會管你代碼的格式;Prettier 則是一個代碼格式化工具,它旨在確保代碼在縮進(jìn)、空格、換行、引號和分號等格式化方面遵循一致的規(guī)則,在

    2024年03月16日
    瀏覽(42)
  • 前端工程化 | vue3+ts+jsx+sass+eslint+prettier 配置化全流程

    前端工程化 | vue3+ts+jsx+sass+eslint+prettier 配置化全流程

    前端開發(fā)是一個工程化的流程。 包括持續(xù)集成、持續(xù)部署。 我認(rèn)為集成 的第一方面就是開發(fā),在前端項目開發(fā)中,需要保證代碼格式規(guī)范的統(tǒng)一、代碼質(zhì)量、提交的規(guī)劃。而這些要求需要通過各種插件來保證規(guī)范化和流程化開發(fā)。 如何配置這些插件,這些插件各自的功能是

    2024年02月12日
    瀏覽(29)
  • VUE3照本宣科——eslint與prettier

    VUE3照本宣科——eslint與prettier

    1.VUE3照本宣科——認(rèn)識VUE3 2.VUE3照本宣科——應(yīng)用實例API與setup 3.VUE3照本宣科——響應(yīng)式與生命周期鉤子 4.VUE3照本宣科——內(nèi)置指令與自定義指令及插槽 5.VUE3照本宣科——路由與狀態(tài)管理器 6.VUE3照本宣科——eslint與prettier 7.VUE3照本宣科——package.json與vite.config.js ???????

    2024年02月05日
    瀏覽(21)
  • vue3安裝eslint和prettier,最簡單的步驟

    vue3安裝eslint和prettier,最簡單的步驟

    ? 第1步: 安裝eslint ?第2步: 在根文件夾中,創(chuàng)建.eslintrc.js文件 ?第3步: 在package.json文件中新增命令 第4步: 安裝eslint-plugin-vue 第5步: 安裝prettier ?第6步: 在根文件夾創(chuàng)建 .prettierrc.js文件 第7步: 安裝eslint-config-prettier 第8步: 安裝eslint-plugin-prettier 第9步: 在.eslintrc.js文

    2024年02月05日
    瀏覽(20)
  • [GN] 使用vue3+vite+ts+prettier+eslint

    做到代碼格式等統(tǒng)一,此時,esint和prettier就要登場了。 eslint是代碼檢測工具,可以檢測出你代碼中潛在的問題,比如使用了某個變量卻忘記了定義。 prettier是代碼格式化工具,作為代碼格式化工具,能夠統(tǒng)一你或者你的團隊的代碼風(fēng)格。 = 安裝prettier+eslint包,并做一系列的

    2024年01月16日
    瀏覽(26)
  • vue3+ts項目02-安裝eslint、prettier和sass

    vue3+ts項目02-安裝eslint、prettier和sass

    項目創(chuàng)建 生成配置文件 安裝其他插件 修改.eslintrc.cjs 添加.eslintignore https://prettier.io/ 添加.prettierrc.cjs 添加.prettierignore https://stylelint.io/ 配置.stylelintrc.cjs 配置忽略文件.stylelintignore package.json增加配置 執(zhí)行 yarn format 會自動格式化css、js、html、json還有markdown代碼

    2024年02月06日
    瀏覽(20)
  • vue項目中配置eslint和prettier

    eslint檢查語法錯誤,格式問題并不重要 prettier是格式化工具,保證代碼美觀 vscode插件Eslint(務(wù)必安裝),錯誤標(biāo)紅,保存的時候自動修正eslint錯誤 如果項目中一開始就沒有配置,用下面的方法從零配置 若項目中已經(jīng)有別人配好的,可根據(jù)需要修改規(guī)則 eslint插件,初始化,生

    2024年02月07日
    瀏覽(22)
  • Vue typescript項目配置eslint+prettier

    Vue typescript項目配置eslint+prettier

    前言 本文基于 “vite”: “^5.0.0” 1.安裝依賴 安裝 eslint 安裝 eslint-plugin-vue 主要用于檢查 Vue 文件語法 安裝 prettier 及相關(guān)插件 安裝 typescript 解析器、規(guī)則補充 2.根目錄創(chuàng)建 .eslintrc.cjs 3.根目錄創(chuàng)建 .prettierrc.cjs 4.配置 package.json 的 scripts 字段 5.測試配置 如果本篇文章對你有幫

    2024年01月16日
    瀏覽(36)
  • vite+vue3+ts+eslint+prettier+husky+lint-stated 項目搭建

    項目搭建 創(chuàng)建初始項目 Node.js 版本 14.18+,16+ npm create vite@latest my-vue-app --template vue-ts 添加eslint eslint 初始化 npm init @eslint/config eslint初始化腳本,按自己的要求選擇相應(yīng)的eslint 配置,以下是我選擇的配置項 ? How would you like to use ESLint? · style ? What type of modules does your project

    2024年02月08日
    瀏覽(30)
  • 從0搭建Vue3組件庫(十一): 集成項目的編程規(guī)范工具鏈(ESlint+Prettier+Stylelint)

    從0搭建Vue3組件庫(十一): 集成項目的編程規(guī)范工具鏈(ESlint+Prettier+Stylelint)

    欲先善其事,必先利其器。一個好的項目是必須要有一個統(tǒng)一的規(guī)范,比如代碼規(guī)范,樣式規(guī)范以及代碼提交規(guī)范等。統(tǒng)一的代碼規(guī)范旨在增強團隊開發(fā)協(xié)作、提高代碼質(zhì)量和打造開發(fā)基石,所以每個人必須嚴(yán)格遵守。 本篇文章將引入 ESLint+Prettier+Stylelint 來對代碼規(guī)范化。 ESLint

    2024年02月02日
    瀏覽(42)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包