代码规范约束（2024版）

项目初始化

可使用vite快速创建项目架子，自行前往vite官网查看即可，此处不再赘述；

统一规范

限制只使用pnpm安装依赖

在package.json文件的scripts选项中添加命令："preinstall": "npx only-allow pnpm"

配置eslint@8.57.0

pnpm i -D eslint @antfu/eslint-config (github.com/antfu/eslin...)安装eslint集成的第三方库；
eslintV8.53.0版本之后支持扁平化文件配置，也就是elsint的配置文件的格式只保留了三种： eslint.config.js、eslint.config.cjs、eslint.config.mjs为了配合后续的兼容，此处将生成的文件名改为这三种中的一种；
创建eslint.config.js文件，内容好如下：

javascript 复制代码

import antfu from '@antfu/eslint-config';

export default antfu({
    stylistic: {
        indent: 4, // 4, or 'tab'
        quotes: 'single', // or 'double'
    },
    typescript: true,
    vue: true,
    jsonc: false,
    yaml: false,
    ignores: [
        '**/fixtures',
        'node_modules',
        'pnpm-lock.yaml'
    ],

}, {
    // 指定文件的覆盖
    files: ['src/**/*.vue'],
    rules: {
        'vue/singleline-html-element-content-newline': 0,
        'vue/block-order': [2, {
            order: [['script', 'template'], 'style']
        }],
    },
}, {
    // 全部文件的覆盖
    rules: {
        'style/semi': 0,
        'style/comma-dangle': 0, // 关闭语句末尾必须加逗号
        'style/arrow-parens': 'as-needed', // 箭头函数的规范
        'import/order': 0, // 关闭导入排序
        'no-console': 1
    },
})

配置.vscode目录

在项目根目录下创建.vscode目录，在该目录下新建settings.json文件，内容如下：

json 复制代码

{
    "npm.packageManager": "pnpm",
    "editor.tabSize": 4,
    "prettier.enable": false,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.organizeImports": "explicit"
    },
    "eslint.enable": true, // 开启eslint检查
    "eslint.experimental.useFlatConfig": true, // 开启eslint的扁平化配置
    "eslint.rules.customizations": [
        // 此项关闭的话，页面上不会飘红，但是commit提交阶段 eslint校验时会通不过
        // {
        //     "rule": "style/*",
        //     "severity": "off"
        // },
        {
            "rule": "format/*",
            "severity": "off"
        },
        {
            "rule": "*-indent",
            "severity": "off"
        },
        {
            "rule": "*-spacing",
            "severity": "off"
        },
        {
            "rule": "*-spaces",
            "severity": "off"
        },
        {
            "rule": "*-order",
            "severity": "off"
        },
        // {
        //     "rule": "*-dangle",
        //     "severity": "off"
        // },
        {
            "rule": "*-newline",
            "severity": "off"
        },
        // {
        //     "rule": "*quotes",
        //     "severity": "off"
        // },
        // {
        //     "rule": "*semi",
        //     "severity": "off"
        // }
    ],
    // Enable eslint for all supported languages
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue",
        "html",
        "markdown",
        "json",
        "jsonc",
        "yaml",
        "toml",
        "gql",
        "graphql"
    ],
    // Specify the UI library you need to prompt
    "common-intellisense.showSlots": false,
    "common-intellisense.ui": [
        "vant4"
    ]
}

代码格式化

使用了@antfu/eslint-config库的话，就不需要再额外配置prettier了

配置commit规范

执行 pnpm install -D @commitlint/cli @commitlint/config-conventional 安装用到的依赖
在根目录下创建 commitlint.config.js 文件，内容如下：

javascript 复制代码

module.exports = {
    // 继承的规则
    extends: ['@commitlint/config-conventional'],
    // 自定义规则
    rules: {
        // @see https://commitlint.js.org/#/reference-rules

        // 提交类型枚举，git提交type必须是以下类型
        'type-enum': [
            2,
            'always',
            [
                'feat', // 新增功能
                'fix', // 修复缺陷
                'docs', // 文档变更
                'style', // 代码格式（不影响功能，例如空格、分号等格式修正）
                'refactor', // 代码重构（不包括 bug 修复、功能新增）
                'perf', // 性能优化
                'test', // 添加疏漏测试或已有测试改动
                'build', // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
                'ci', // 修改 CI 配置、脚本
                'revert', // 回滚 commit
                'chore', // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
            ],
        ],
        'subject-case': [0], // subject大小写不做校验
    },

    prompt: {
        messages: {
            type: '选择你要提交的类型 :',
            scope: '选择一个提交范围（可选）:',
            customScope: '请输入自定义的提交范围 :',
            subject: '填写简短精炼的变更描述 :\n',
            body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
            breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
            footerPrefixesSelect: '选择关联issue前缀（可选）:',
            customFooterPrefix: '输入自定义issue前缀 :',
            footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
            generatingByAI: '正在通过 AI 生成你的提交简短描述...',
            generatedSelectByAI: '选择一个 AI 生成的简短描述:',
            confirmCommit: '是否提交或修改commit ?',
        },
        // prettier-ignore
        types: [
            { value: "feat",     name: "特性:     ✨  新增功能", emoji: ":sparkles:" },
            { value: "fix",      name: "修复:     🐛  修复缺陷", emoji: ":bug:" },
            { value: "docs",     name: "文档:     📝  文档变更", emoji: ":memo:" },
            { value: "style",    name: "格式:     🌈  代码格式（不影响功能，例如空格、分号等格式修正）", emoji: ":lipstick:" },
            { value: "refactor", name: "重构:     🔄  代码重构（不包括 bug 修复、功能新增）", emoji: ":recycle:" },
            { value: "perf",     name: "性能:     🚀  性能优化", emoji: ":zap:" },
            { value: "test",     name: "测试:     🧪  添加疏漏测试或已有测试改动", emoji: ":white_check_mark:"},
            { value: "build",    name: "构建:     📦️  构建流程、外部依赖变更（如升级 npm 包、修改 vite 配置等）", emoji: ":package:"},
            { value: "ci",       name: "集成:     ⚙️  修改 CI 配置、脚本",  emoji: ":ferris_wheel:"},
            { value: "revert",   name: "回退:     ↩️  回滚 commit",emoji: ":rewind:"},
            { value: "chore",    name: "其他:     🛠️  对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: ":hammer:"},
        ],
        useEmoji: true,
        emojiAlign: 'center',
        useAI: false,
        aiNumber: 1,
        themeColorCode: '',
        scopes: [],
        allowCustomScopes: true,
        allowEmptyScopes: true,
        customScopesAlign: 'bottom',
        customScopesAlias: 'custom',
        emptyScopesAlias: 'empty',
        upperCaseSubject: false,
        markBreakingChangeMode: false,
        allowBreakingChanges: ['feat', 'fix'],
        breaklineNumber: 120,
        breaklineChar: '|',
        skipQuestions: [],
        issuePrefixes: [{ value: 'closed', name: 'closed:   ISSUES has been processed' }],
        customIssuePrefixAlign: 'top',
        emptyIssuePrefixAlias: 'skip',
        customIssuePrefixAlias: 'custom',
        allowCustomIssuePrefix: true,
        allowEmptyIssuePrefix: true,
        confirmColorize: true,
        maxHeaderLength: Infinity,
        maxSubjectLength: Infinity,
        minSubjectLength: 0,
        scopeOverrides: undefined,
        defaultBody: '',
        defaultIssues: '',
        defaultScope: '',
        defaultSubject: '',
    },
}

配置husky

执行 pnpm add --save-dev husky
在根目录下执行 pnpm dlx husky-init ，该命令会在package.json文件的scripts选项下，添加一个 "prepare": "husky install" 脚本；
将生成的pre-commit文件内容修改为如下：
修改完内容之后，执行 git add .husky/pre-commit 命令，将其添加到git管理；
执行 echo "" > .husky/commit-msg 创建一个钩子，执行完之后会在.husky文件夹下生成对应的commit-msg文件，添加以下内容：
修改完内容之后，执行 git add .husky/commit-msg 命令，将其添加到git管理
在package.json文件中添加husky的配置选项，如下：

javascript 复制代码

"husky": {
     "hooks": {
         "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
},

代码检测

在package.json文件的scripts选项下添加以下命令，以便husky的pre-commmit钩子调用，在commit提交之前进行代码的eslint检测；

javascript 复制代码

"lint": "eslint .",
"lint:fix": "eslint . --fix"

写在最后

旨在快速的配置项目基本代码规范约束，跟着上述步骤操作即可轻松在项目中实现；本配置为新版的eslint相关配置，依赖版本见下图：

注意： 如果想了解husky7.0版本的相关配置可以移步这里