Vue.js3项目中使用commitlint、stylelint

如何在Vue.js3项目中使用commitlint、stylelint进行代码规范的配置呢？让我们来一起探索一下吧。

首先，我们需要了解这两个个工具的作用。commitlint用于规范Git提交信息的格式，可以提高协作开发的效率和代码质量；stylelint用于规范CSS代码的风格和格式，可以增强代码可读性和可维护性

1. commitlint配置

在Vue.js3项目中，我们可以使用commitlint来规范Git提交信息的格式。首先，我们需要安装commitlint及其相关插件：

npm install @commitlint/cli @commitlint/config-conventional husky --save-dev

其中，@commitlint/cli 是commitlint的核心库，@commitlint/config-conventional 是针对Angular风格的常用配置文件，husky 则是Git Hook工具，用于监听Git提交事件，并在事件触发时执行相关脚本。

然后，在项目根目录下创建 .commitlintrc.js 文件，配置commitlint的规则：

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

接着，我们可以在 package.json 文件中添加一条针对Git提交事件的Hook，例如：

{
  "scripts": {
    "commitmsg": "commitlint -E HUSKY_GIT_PARAMS"
  },
  "husky": {
    "hooks": {
      "commit-msg": "npm run commitmsg"
    }
  }
}

这样，在每次Git提交事件触发时，commitlint会自动检测提交信息的格式，并提供反馈。在遵循commitlint规则的前提下，我们可以更好地协作开发和管理项目。

2. stylelint配置

在Vue.js3项目中，我们可以使用stylelint来规范CSS代码的风格和格式。首先，我们需要安装stylelint及其相关插件：

npm install stylelint stylelint-config-standard stylelint-order --save-dev

其中，stylelint 是stylelint的核心库，stylelint-config-standard 是常用的配置文件，stylelint-order 则是用于对CSS属性排序的插件。

然后，在项目根目录下创建 .stylintrc.js 文件，配置stylelint的规则：

module.exports = {
  extends: 'stylelint-config-standard',
  plugins: ['stylelint-order'],
  rules: {
    'order/order': ['custom-properties', 'declarations'],
    'order/properties-alphabetical-order': true,
  },
};

接着，在 package.json 文件中添加一个针对CSS文件的Lint命令：

{
  "scripts": {
    "lint:css": "stylelint \"src/**/*.{vue,css}\""
  },
}

这样，在每次运行 npm run lint:css 命令时，stylelint会检测项目中所有的 .vue 和 .css 文件，并提供反馈。在遵循stylelint规则的前提下，我们可以编写出更加规范、清晰的CSS代码。