vue3+ts代码规范

1. ESLint 相关
eslint
作用：ESLint 是一个用于识别和报告 JavaScript 和 TypeScript 代码中模式错误的工具。它可以帮助开发者遵循一致的代码风格和最佳实践，提高代码的质量和可维护性。通过自定义规则，能够检测出未使用的变量、语法错误、代码风格问题等。
@eslint/js
作用：这是 ESLint 官方提供的 JavaScript 规则集，包含了一系列用于检查 JavaScript 代码的基本规则，可以作为项目 ESLint 配置的基础。
@typescript-eslint/eslint-plugin
作用：为 ESLint 提供了 TypeScript 相关的规则，专门用于检查 TypeScript 代码中的问题，比如类型定义、接口使用等方面的错误和规范问题。
@typescript-eslint/parser
作用：作为 ESLint 的解析器，用于解析 TypeScript 代码，使得 ESLint 能够理解和检查 TypeScript 文件。
eslint-plugin-vue
作用：专门为 Vue.js 项目设计的 ESLint 插件，提供了一系列用于检查 Vue 组件模板和脚本代码的规则，确保 Vue 代码的规范性和正确性。
eslint-config-prettier
作用：关闭所有不必要的或可能与 Prettier 冲突的 ESLint 规则，避免 ESLint 和 Prettier 在代码格式化和风格检查方面产生冲突，让两者可以协同工作。
eslint-plugin-prettier
作用：将 Prettier 的规则集成到 ESLint 中，使得 ESLint 在检查代码时也能应用 Prettier 的格式化规则，实现代码风格的统一。

module.exports = {
    // 使用 @typescript-eslint/parser 解析 TypeScript 代码
    parser: '@typescript-eslint/parser', 
    // 引入插件
    plugins: ['@typescript-eslint', 'vue'], 
    extends: [
        // ESLint 官方推荐规则
        'eslint:recommended', 
        // TypeScript 推荐规则
        'plugin:@typescript-eslint/recommended', 
        // Vue 3 推荐规则
        'plugin:vue/vue3-recommended', 
        // 关闭与 Prettier 冲突的规则
        'eslint-config-prettier' 
    ],
    rules: {
        // 自定义规则，这里将 console 输出设为警告级别
        'no-console': 'warn', 
        // 未使用的变量设为错误级别
        '@typescript-eslint/no-unused-vars': 'error' 
    },
    overrides: [
        {
            // 针对 Vue 文件的配置
            files: ['*.vue'], 
            // 使用 vue-eslint-parser 解析 Vue 文件
            parser: 'vue-eslint-parser', 
            parserOptions: {
                // 内部使用 @typescript-eslint/parser 解析 TypeScript 部分
                parser: '@typescript-eslint/parser' 
            }
        }
    ]
};

2. Prettier 相关
prettier
作用：一个 Opinionated 的代码格式化工具，支持多种编程语言，如 JavaScript、TypeScript、CSS、JSON 等。它可以自动格式化代码，去除代码中的不一致性，使代码风格统一，提高代码的可读性。
3. Stylelint 相关
stylelint
作用：用于检查和格式化 CSS、SCSS 等样式文件的工具，能够检测出样式代码中的语法错误、不规范的写法和不符合风格指南的问题，并可以自动修复部分问题。
stylelint-config-html
作用：为 HTML 文件中的内联样式提供 Stylelint 规则配置，确保 HTML 文件内联样式的规范性。
stylelint-config-recess-order
作用：提供了一种样式属性排序的规则，帮助开发者按照一定的顺序编写 CSS 属性，使样式代码更加整洁和易于维护。
stylelint-config-recommended-scss
作用：为 SCSS 文件提供推荐的 Stylelint 规则集，涵盖了 SCSS 特有的语法和特性的检查规则。
stylelint-config-recommended-vue
作用：专门为 Vue 文件中的样式部分提供推荐的 Stylelint 规则集，确保 Vue 组件中样式代码的规范性。
stylelint-config-standard
作用：Stylelint 的标准配置规则集，包含了一系列通用的 CSS 样式规范规则，可以作为项目 Stylelint 配置的基础。
4. 提交规范相关
@commitlint/cli
作用：用于检查 Git 提交信息是否符合规范的命令行工具。通过定义规则，可以强制开发者按照统一的格式编写提交信息，便于项目的管理和维护。
@commitlint/config-conventional
作用：提供了一套符合常规的提交信息规范配置，通常遵循 Angular 提交规范，规定了提交信息的格式和语义。
commitizen
作用：一个帮助开发者生成符合规范的提交信息的工具，通过命令行交互的方式引导开发者填写提交信息，确保提交信息的规范性。
cz-git
作用：基于 commitizen 的适配器，专门为 Git 提交信息提供交互式界面，支持多种提交类型和自定义配置，方便开发者生成符合规范的提交信息。
5. Git Hooks 相关
husky
作用：用于管理 Git Hooks 的工具，可以在 Git 操作（如 commit、push 等）前后执行自定义脚本。结合 lint-staged 可以在提交代码前自动执行代码检查和格式化操作。
lint-staged
作用：在 Git 暂存区的文件上运行 linters（如 ESLint、Prettier、Stylelint 等），只对本次提交修改的文件进行检查和格式化，提高代码检查的效率。
这些代码规范相关的包相互配合，从代码编写、格式化、提交等多个环节保证了项目代码的质量和一致性。