简介
stylelint-scss 是一个针对 SCSS 语法的 Stylelint 插件，它可以帮助开发者自动检查 SCSS 样式文件中的语法错误和代码风格问题，并提供多种配置选项以符合项目需求。
本文将详细介绍如何使用 stylelint-scss 进行 SCSS 样式代码检查，包括安装与配置、命令行工具使用、编辑器集成等方面的内容。
安装与配置
首先需要安装 Stylelint 和 stylelint-scss 两个 npm 包。在终端中运行以下命令：
npm install stylelint stylelint-scss --save-dev
创建
.stylelintrc文件并添加以下内容：-- -------------------- ---- ------- - ---------- - ---------------------------- ----------------------------------- -- ---------- - ---------------- -- -------- - --------------------- ----- -------------------------- ---- - -上述配置文件中，我们引用了两个扩展配置：
stylelint-config-standard和stylelint-config-recommended-scss。其中前者是 Stylelint 官方推荐的标准配置，后者则是为支持 SCSS 语法而设计的推荐配置。plugins中指定了要使用的插件，这里是stylelint-scss。rules中配置了具体的规则，这里我们启用了 SCSS 相关的规则并禁用了部分不必要的规则。
命令行工具使用
在终端中进入项目目录后，可以使用以下命令检查 SCSS 样式文件：
npx stylelint 'src/**/*.scss'
以上命令中，'src/**/*.scss' 表示要检查的文件路径，其中 ** 可以匹配任意子目录。
如果需要对一个或多个具体的文件进行检查，可以使用以下命令：
npx stylelint file1.scss file2.scss
为了方便使用，我们可以在 package.json 文件中添加一个 script 来运行 Stylelint 检查：
{
"scripts": {
"lint:css": "stylelint 'src/**/*.scss'"
}
}这样就可以使用 npm run lint:css 命令来检查 SCSS 样式文件了。
编辑器集成
除了命令行工具外，还可以将 Stylelint 集成到编辑器中以实现实时检查。下面以 VSCode 编辑器为例介绍如何进行集成：
安装 stylelint 和 stylelint-plus 两个插件。可以在 VSCode 扩展商店中搜索并安装。
在 VSCode 首选项中找到
settings.json文件，并添加以下配置：-- -------------------- ---- ------- ------------------- ----- --------------------- - ------ -- ------------------- - ---------- - ---------------------------- ----------------------------------- -- ---------- - ---------------- -- -------- - --------------------- ----- -------------------------- ---- - -- -------------------------- ----上述配置与命令行工具使用时的配置类似。其中，
stylelint.enable表示启用 Stylelint 插件，stylelint.validate指定了要检查的文件类型，这里是 SCSS。stylelint.config中的内容与之前.stylelintrc文件中的相同。最后一个配置项
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43097