Vue3+Ts+eslint+prettier+husky+commitlint

创建项目安装所需要的插件

npm i @commitlint/cli @commitlint/config-conventional @rushstack/eslint-patch eslint-plugin-prettier husky lint-staged  prettier-D
npm i
npm run dev

更改.eslintrc.cjs为

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')


module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['eslint:recommended', 'prettier'],


  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {}
}

更改.prettierrc.json为

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none",
  "useTabs": false,
  "bracketSpacing": true,
  "singleAttributePerLine": true,
  "#singleAttributePerLine": "true为允许template模板标签属性换行"
}

更改.vscode下的extensions.json为

{
  "recommendations": ["esbenp.prettier-vscode"]
}

package.json里scripts添加

"prepare": "husky install"

初始化git仓库

git init

运行

npm run prepare

根目录生成

package.json中添加

"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,vue,json}": [
      "npm run lint",
      "npm run format"
    ]
 },

执行生成commit-msg pre-commit文件

npx husky add .husky/commit-msg
npx husky add .husky/pre-commit

根目录创建commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional'],


  // 以下时我们自定义的规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
        'feat', // 新功能（feature）
        'fix', // 修补bug
        'docs', // 文档（documentation）
        'style', // 格式（不影响代码运行的变动）
        'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
        'merge' // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
      ]
    ]
  }
}

修改commit-msg pre-commit文件

---

npx --no -- commitlint --edit

npx lint-staged

安装vscode插件 Prettier - Code formatter ESLint

设置vscode settings.json

{
  "explorer.confirmDelete": false,
  "security.workspace.trust.untrustedFiles": "open",
  "editor.tabSize": 2,
  "workbench.settings.openDefaultKeybindings": true,
  "[vue]": {
    // "editor.defaultFormatter": "Vue.volar"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.enable": true,
  "eslint.run": "onType",
  // 开启自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  },
  "editor.minimap.enabled": false,
  "explorer.confirmDragAndDrop": false,
  "files.associations": {
    "*.wxss": "css"
  },
  "prettier.semi": false,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 保存的时候自动格式化
  "editor.formatOnSave": true,
  // 默认格式化工具选择prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnType": true,
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.rulers": [80],
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": false
  },
  "explorer.compactFolders": false,
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Default Dark+"
}

重启vscode测试发现没有通过校验不能提交代码

没有添加主题照样不能提交

然后添加主题引用变量a可以通过校验提交代码

还可以使用stylelint增加css校验

npm install --save-dev postcss-scss postcss-html stylelint-config-recommended-vue stylelint-config-standard-scss stylelint stylelint-config-recess-order

创建.stylelintrc.cjs添加配置

---

module.exports = {
  extends: [
    'stylelint-config-standard',
    // scss 支持
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue/scss',
    'stylelint-config-recess-order'
  ]
}

修改package.json

"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write "./**/*.{html,vue,ts,js,json,md}"",
    "prepare": "husky install",
    "lint:css": "stylelint **/*.{vue,css,sass,less} --fix"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,vue,json}": [
      "npm run lint",
      "npm run format"
    ],
    "*.{vue,less,css,scss}": [
      "npm run lint:css"
    ]
  },

安装vscode插件Stylelint

vscode settings.json添加配置,然后重启vscode

// 开启自动修复
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"stylelint.validate": ["css", "postcss", "scss", "less", "vue"],

测试

修改正确可以提交代码

还可以增加一些忽略校验的文件缩小校验范围，可以提高效率