Vite + Vue 初始化项目配置

momo鱼
388 阅读6分钟

基于 vite 6 + vue 3.5 新建的项目，记录了初始化前端工程时做的一些配置，包括接入 ESLint、Prettier、Stylelint、EditorConfig、Lint-staged、Husky、Commitlint。

新建项目

pnpm create vite@latest project-name

ESLint

静态代码分析工具，帮助我们在开发过程中编写代码时，实时检测语法错误，此外还提供了插件系统，支持自定义代码检查规则，具有很强的扩展性。

1、安装

pnpm add eslint --save-dev

2、初始化 ESLint 配置

npx eslint --init

执行命令之后，命令行中会有交互式选项让我们来选择具体的配置，完成之后会生成 eslint.config.js 文件

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';

/** @type {import('eslint').Linter.Config[]} */
export default [
    { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
    { languageOptions: { globals: globals.browser } },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    ...pluginVue.configs['flat/essential'],
    {
        files: ['**/*.vue'],
        languageOptions: { parserOptions: { parser: tseslint.parser } },
    },
];

3、添加 ESLint 脚本命令

在 package.json 中添加脚本命令

"scripts": {
  /**
   若执行了前面的 eslint 初始化，有 eslint.config.js 文件，那么已经在文件中指定了文件扩展名
   若没有提前指定，那么这里需要使用 --ext 指定一下文件名
  **/
  "lint": "eslint . --fix",
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
}

4、添加 .eslintrc.js 文件【可选】

以下情况下，需要自定义这个文件来调整默认配置：

  • 自定义规则：如果您想要添加、修改或禁用某些 ESLint 规则，您需要在 .eslintrc.js 文件中进行配置。
  • 设置环境：如果您需要为特定的环境（如浏览器、Node.js、ES6 等）配置 ESLint，您可以在该文件中指定。
  • 扩展配置：如果您想要使用其他的 ESLint 配置（如 Airbnb、Google 等），您可以在 .eslintrc.js 中扩展这些配置。
  • 插件和解析器：如果您使用了额外的 ESLint 插件或需要指定解析器（如 TypeScript），您也需要在该文件中进行配置。

Prettier

是一个代码格式化工具，可以让团队成员在开发时保持代码风格的一致，支持定制化配置，可以方便的集成到 ESLint 或代码编辑器中。

1、安装

pnpm add prettier --save-dev

因为已经安装了 eslint，还需要安装一下 ESLint 和 Prettier 的集成插件

pnpm add --save-dev eslint-config-prettier eslint-plugin-prettier

  • eslint-config-prettier：用于关闭所有不必要或可能与 Prettier 冲突的 ESLint 规则
  • eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行，并在 ESLint 检查时显式格式化错误

2、更新 ESLint 配置，与 ESLint 集成

新建 .eslintrc.js 文件，添加以下配置

// .eslintrc.js
export default {
  // ... existing configuration ...
  extends: [
    // ... other configurations ...
    'plugin:prettier/recommended', // 添加这一行
  ],
  rules: {
    // ... your custom rules ...
    'prettier/prettier': 'error', // 将 Prettier 规则设置为错误
  },
};

3、创建 Prettier 配置文件 .prettier.js

   {
     "printWidth": 80, // 单行代码的最大宽度
     "semi": true, // 在语句末尾添加分号
     "singleQuote": true, // 使用单引号而不是双引号
     "useTabs": false, // 使用空格而不是制表符进行缩进
     "tabWidth": 4, // 缩进使用的空格数
     "trailingComma": "es5", // 在多行对象或数组最后一个元素后面添加逗号
   }

4、创建 .prettierignore 文件

   node_modules
   dist

5、添加格式化脚本

{
    "scripts": {
        "format": "prettier --write ."
    }
}

Editor Config

用于定义代码风格，统一在不同平台、不同编译器间的代码风格。

它通过使用项目根目录下文件名为 .editorconfig 的配置文件，在不同的编辑器中自动应用一致的代码风格规则。

常见的 end of line 问题即可通过这个配置解决。

# EditorConfig is awesome: https://EditorConfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

Less

1、安装

pnpm add less --save-dev

vite 默认支持 less 插件，因此不需要再额外安装别的插件了，若是 webpack 项目，还需要安装 less-loader、css-loader

StyleLint

Stylelint 是用于检测 CSS 代码中错误和不规范代码的静态代码分析工具，它提供了一套可配置的规则，配置文件为 .stylelintrc 或 stylelint.config.js。

1、安装

注意，执行 pnpm create stylelint 需 node >= 18.19.0。

1）执行 pnpm create stylelint，自动生成 .stylelintrc.json 文件，自动安装 stylelint、stylelint-config-standard 依赖

2）pnpm add stylelint-config-recommended-less stylelint-config-standard-vue --save-dev

2、配置 .stylelint.json 文件

{
    "extends": [
        "stylelint-config-standard",
        "stylelint-config-recommended-less",
        "stylelint-config-standard-vue"
    ]
}

3、配置 .stylelintignore 文件

# .gitignore syntax (uses node-ignore behind the scenes)
*.js
*.jsx
*.ts
*.tsx
*.html
*.svg

husky + lint-staged

支持多个平台的 Git Hook 工具，可以在 commit、push 等 Git 事件发生时，执行我们指定的命令。

1、安装

pnpm add husky

2、初始化 husky

pnpm husky init

执行完这个命令之后，会自动在 package.json 中生成一个 scripts 命令

"scripts": {
  "prepare": "husky"
}

还会自动添加了 pre-commit hook

3、安装 lint-staged

lint-staged 专用于过滤出处于Git暂存区（git add 后，状态为staged）的文件列表并执行命令的工具，可以帮助我们避免对项目所有文件进行全量代码检查修复，导致检查耗时太长。

pnpm add lint-staged

4、添加 lint-staged 命令

在 packages.json 中添加 lint-staged 命令，用于在提交代码前执行前面我们配置的多个命令。

{
    "lint-staged": {
        "*.js": [
            "eslint --fix"
        ],
        "*.vue": [
            "eslint --fix"
        ],
        "*.less": [
            "stylelint --fix"
        ],
        "*.css": [
            "stylelint --fix"
        ]
    },
}

5、修改 pre-commit hook

将内容修改为 npx lint-staged，可在提交代码前执行我们配置的 lint-staged 命令。

commitlint

用于规范 Git 提交消息格式的工具，它可以在 Git 提交前对提交附带的消息进行检查，确保 Git 消息都符合预定义的格式，版主团队保持一致的消息提示风格。

一般约定的提交信息格式：类型（影响范围?）：主题

  • feat(home): 完成静态页面开发
  • chore: 清理冗余代码
  • style: 代码格式化

1、安装

pnpm add @commitlint/cli @commitlint/config-conventional

  • @commitlint/cli：是 commitlint 的命令行工具，用于检查 Git 提交信息是否符合预定义的规范。
  • @commitlint/config-conventional：是 commitlint 的配置包，提供了一套基于 Conventional Commits 规范的默认规则

2、添加配置文件 commitlint.config.js


export default {
    // 继承的规则
    extends: ['@commitlint/config-conventional'],
    rules: {
        'subject-case': [0], // subject大小写不做校验

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

3、添加 commit-msg hook

在 .husky 目录下新建 commit-msg 文件，在文件中添加以下代码，用于在提交代码时执行 commitlint 来校验提交信息

npx --no -- commitlint --edit $1

总结

基于以上配置，我们可以实现自动检测语法错误、自动格式化代码、统一团队成员的提交信息等，为后续规范化开发打好基础。

avatar
文章
阅读
粉丝