vite eslint+prettier+stylelint+commit+emoji团队规范vite eslint+p

创建脚手架

```
pnpm create vite
```

配置eslint规则

安装eslint依赖包

pnpm add eslint eslint-define-config eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

// 包用途
eslint // eslint规则
eslint-define-config // 配置eslint的代码提示
eslint-plugin-vue //vue的eslint插件
@typescript-eslint/eslint-plugin // ts的eslint插件 没装ts不需要
@typescript-eslint/parser // 解析ts的eslint插件 没装ts不需要

配置.eslintrc.js文件

// @ts-check
const { defineConfig } = require("eslint-define-config");
module.exports = defineConfig({
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: 2020,
    sourceType: "module",
    jsxPragma: "React",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended", // 配置eslit的时候注释一下依赖
    "prettier",
    "plugin:prettier/recommended",
  ],
  rules: {
    "no-var": "error", // 用于验证eslint是否配置成功
    "vue/script-setup-uses-vars": "error",
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-empty-function": "off",
    "vue/custom-event-name-casing": "off",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        argsIgnorePattern: "^_",
        varsIgnorePattern: "^_",
      },
    ],
    "no-unused-vars": [
      "error",
      {
        argsIgnorePattern: "^_",
        varsIgnorePattern: "^_",
      },
    ],
    "space-before-function-paren": "off",

    "vue/attributes-order": "off",
    "vue/v-on-event-hyphenation": "off",
    "vue/multi-word-component-names": "off",
    "vue/one-component-per-file": "off",
    "vue/html-closing-bracket-newline": "off",
    "vue/max-attributes-per-line": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/attribute-hyphenation": "off",
    "vue/require-default-prop": "off",
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "never",
          component: "always",
        },
        svg: "always",
        math: "always",
      },
    ],
  },
});

配置.eslintignore文件


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

注意脚手架package.json中存在type：“module” 需要删除掉然后重启vscode

配置prettier代码修复

安装依赖包

pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D

// 包用途
prettier // 修复eslint代码
eslint-config-prettier // 关闭所有不必要或可能与[prettier]冲突的规则
eslint-plugin-prettier // 将 Prettier 作为一个 ESLint 规则运行，并将差异报告为单个 ESLint 问题。

配置.prettierrc 和 .prettierignore文件

{
    "semi": false,
    "trailingComma": "none",
    "singleQuote": true,
    "printWidth": 100,
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "endOfLine": "auto",
    "useTabs": false,
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "jsxBracketSameLine": false,
    "rangeStart": 0,
    "requirePragma": false,
    "insertPragma": false,
    "proseWrap": "preserve",
    "htmlWhitespaceSensitivity": "css"
}

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

配置stylelint

安装依赖包

pnpm add stylelint stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-vue stylelint-config-standard-scss postcss postcss-html postcss-scss -D

// 包用途
stylelint // stylelint 规则
stylelint-config-prettier // 关闭所有不必要的或者可能与漂亮相冲突的规则。一般放在最后
stylelint-config-recess-order // 对css属性进行排序
stylelint-config-recommended-vue // Stylelint 推荐的可共享 Vue 配置。捆绑postcss-html 使用
stylelint-config-standard-scss // Stylelint 的标准可共享 SCSS 配置。
postcss // css 处理器
postcss-html // 用于解析 HTML (和类 HTML)的 PostCSS 语法
postcss-scss // 用于 PostCSS 的 SCSS 解析器。

配置.stylelintrc.js 和 .stylelintignore 文件

module.exports = {
  root: true,
  defaultServerity: 'error',
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue',
    'stylelint-config-recess-order',
    'stylelint-config-prettier'
  ]
}

/dist/*
/public/*
public/*

在工作区配置自动修复css顺序和检查文件

{
    // 开启stylelint自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll": true, // 开启自动修复
    "source.fixAll.stylelint": true // 开启stylelint自动修复
  },
  // 关闭编辑器内置样式检查（避免与stylelint冲突）
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  // 配置stylelint检查的文件类型范围
  "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"]
}

验证配置是否成功新建css文件或者scss文件

配置commit规范

安装依赖包

pnpm add commitizen cz-customizable commitlint@^11.0.0 commitlint-config-gitmoji husky -D

// 包用途
commitizen // commit 规范
cz-customizable // 可视化commit命令配置
commitlint // 检查commit提交规范
commitlint-config-gitmoji // emoji提交图标
husky // commitlint 钩子

配置.cz-config.js

module.exports = {
  types: [
    {
      value: '🎉 init',
      name: '🎉 init: 初始化'
    },
    {
      value: '✨ feat',
      name: '✨ feat: 新功能'
    },
    {
      value: '🐞 fix',
      name: '🐞 fix: 修复bug'
    },
    {
      value: '💡 perf',
      name: '💡 perf: 改进优化相关,比如提升性能、体验'
    },
    {
      value: '🚧 wip',
      name: '🚧 wip: 正在进行中的工作'
    },
    {
      value: '🚨 test',
      name: '🚨 test: 测试，实验'
    },
    {
      value: '🔧 chore',
      name: '🔧 chore: 构建/工程依赖/工具'
    },
    {
      value: '💄 style',
      name: '💄 style: 代码的样式美化(标记、空白、格式化、缺少分号……)'
    },
    {
      value: '🔖 release',
      name: '🔖 release: 发布版本'
    },
    {
      value: '🚚 move',
      name: '🚚 move: 移动或删除文件'
    },
    {
      value: '⏪ revert',
      name: '⏪ revert: 回退'
    },
    {
      value: '🔀 merge',
      name: '🔀 merge: 合并分支or合并模板'
    },
    {
      value: '📝 docs',
      name: '📝 docs: 文档变更'
    }
  ],
  scopes: ['框架', '公共组件'], // 项目模块名可写在这里 方便快捷选择
  skipQuestions: ['body', 'footer'],
  messages: {
    type: '选择一种你的提交类型( 必选 ❗):',
    scope: '请选择修改范围(支持自定义)\n 💬 业务项目中依据菜单或者功能模块划分(可选)：\n',
    subject: '请简要描述提交( 必填 ❗)：\n',
    body: '请输入详细描述使用," | "换行(可选)：\n',
    breaking: '列出任何BREAKING CHANGES(可选)：\n',
    confirmCommit: '确定提交此说明吗？'
  },
  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'], // 当提交类型为feat、fix时才有破坏性修改选项
  subjectLimit: 72
};

配置.commitlintrc.js

module.exports = {
  extends: ['gitmoji'],
  rules: {
    'type-enum': [
      2, //代表必须输入
      'always',
      [
        'init',
        'docs', // Adds or alters documentation. 仅仅修改了文档，比如README, CHANGELOG, CONTRIBUTE等等
        'chore', // Other changes that don't modify src or test files. 改变构建流程、或者增加依赖库、工具等
        'feat', // Adds a new feature. 新增feature
        'fix', // Solves a bug. 修复bug
        'merge', // Merge branch ? of ?.
        'perf', // Improves performance. 优化相关，比如提升性能、体验
        'refactor', // Rewrites code without feature, performance or bug changes. 代码重构，没有加新功能或者修复bug
        'revert', // Reverts a previous commit. 回滚到上一个版本
        'style', // Improves formatting, white-space. 仅仅修改了空格、格式缩进、都好等等，不改变代码逻辑
        'test', // Adds or modifies tests. 测试用例，包括单元测试、集成测试等
        'del',
        'format',
        'tool',
        'move',
        'remove',
        'wip',
        'poo',
        'prune',
        'release',
        'iment'
      ]
    ]
  }
};

配置package.json

{
    "scripts": {
    "git:push": "git add -A && git cz && git pull && git push"
  },
    "config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    }
  },
}

vite eslint+prettier+stylelint+commit+emoji团队规范

创建脚手架

配置eslint规则

配置prettier代码修复

配置stylelint

配置commit规范

项目地址