如何为创建一年多的Ionic3项目配置SCSS Linter

嘿，针对你的Ionic3老项目配置SCSS Linter的需求，我整理了一套适配旧环境的完整步骤——毕竟直接装最新版工具大概率会因为版本兼容问题踩坑，咱们得选合适的版本来搞：

1. 安装兼容的依赖包 #

Ionic3通常搭配Angular 5/6，对应的Node版本一般在12或更低，所以得选适配的stylelint版本（最新版stylelint要求Node14+，肯定跑不起来）。打开终端，在项目根目录运行：

npm install stylelint@13.13.1 stylelint-scss@3.21.0 stylelint-config-standard-scss@3.0.0 --save-dev

这些版本是经过验证能在旧Node环境下稳定运行的，不会出现莫名其妙的依赖报错。

2. 创建Stylelint配置文件 #

在项目根目录新建.stylelintrc.json文件，填入以下基础配置（你可以根据团队的代码规范调整规则）：

{
  "extends": "stylelint-config-standard-scss",
  "plugins": ["stylelint-scss"],
  "rules": {
    // 允许Ionic的自定义伪类（比如ion-focus）
    "selector-pseudo-class-no-unknown": [true, {
      "ignorePseudoClasses": ["ion"]
    }],
    // 允许Ionic内置变量前缀和自定义项目变量前缀
    "scss/dollar-variable-pattern": "^(--ion-|your-project-prefix-)",
    // 缩进用2个空格，和Ionic默认代码风格保持一致
    "indentation": 2,
    // 关闭“选择器权重降序”规则，避免和Ionic内置样式冲突
    "no-descending-specificity": null
  },
  "ignoreFiles": [
    "node_modules/**/*.scss",
    "src/theme/variables.scss" // 如果不需要lint主题变量文件，可以保留这行
  ]
}

这个配置既遵循了通用SCSS规范，又兼容Ionic3的自定义语法，同时跳过了不需要检查的第三方和主题文件。

3. 在package.json中添加lint脚本 #

打开你的package.json，在scripts字段里新增SCSS lint的命令：

"scripts": {
  // 保留你已有的其他脚本...
  "lint:scss": "stylelint \"src/**/*.scss\""
}

之后你只要运行npm run lint:scss就能扫描所有SCSS文件的规范问题了。

4. 运行与修复 #

第一次运行lint命令时，可能会弹出一堆报错（毕竟是老项目，难免有不符合规范的地方），你可以：

• 先执行npm run lint:scss -- --fix，让工具自动修复一些可批量处理的问题（比如缩进、空格、引号格式）
• 剩下的手动修复，或者根据项目实际情况，在.stylelintrc.json里调整规则，放宽一些不适合你们项目的要求

5. IDE实时提示（可选） #

如果你用VS Code，可以安装Stylelint插件，但一定要选旧版本（比如v1.2.3）——新版本插件不兼容我们装的旧版stylelint。安装后，它会在你写SCSS代码时实时提示规范问题，提前规避错误。

内容的提问来源于stack exchange，提问作者Xerri