轻松设置 Stylelint 呵护你的 Vue 项目

2023-10-13 00:23:48

1. 初识 Stylelint

Stylelint 是一个流行的 CSS 预处理器，可以帮助你保持代码的整洁、一致和可读性。它可以通过各种规则来检查你的代码，并提供错误和警告信息。

2. 安装 Stylelint

在你的项目中安装 Stylelint，可以使用以下命令：

npm install stylelint --save-dev

或者

yarn add stylelint --dev

3. 配置 Stylelint

在你的项目根目录下创建一个 .stylelintrc.json 文件，并添加以下内容：

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "indentation": 2,
    "selector-class-pattern": "^([a-z][a-z0-9_-]*){
  "extends": ["stylelint-config-standard"],
  "rules": {
    "indentation": 2,
    "selector-class-pattern": "^([a-z][a-z0-9_-]*)$",
    "no-invalid-double-slash-comments": true
  }
}
quot;,
    "no-invalid-double-slash-comments": true
  }
}

4. 使用 Stylelint

现在你可以使用 Stylelint 来检查你的代码了。你可以使用以下命令：

stylelint src/**/*.vue

或者

yarn stylelint src/**/*.vue

Stylelint 将会检查你的代码，并输出任何错误和警告信息。

5. 集成到 Vue 项目

你可以将 Stylelint 集成到你的 Vue 项目中，以便在保存文件时自动检查代码。

在你的 package.json 文件中，添加以下内容：

{
  "scripts": {
    "lint:style": "stylelint src/**/*.vue --fix",
    "lint": "eslint src/**/*.{js,vue} --fix && stylelint src/** /*.vue --fix"
  }
}