WebStorm stylelint 自动修复

完成上述操作之后，WebStorm 将能够识别由 Stylelint 提供的服务端口，并允许开发者利用此服务来进行实时错误高亮显示以及保存时触发自动化修复过程。 #### 编辑 `.stylelintrc` 文件 为了让 Stylelint 正确解析 ...

- 对于可自动修复的错误，ESLint和StyleLint提供了自动修复命令。例如，使用以下命令可以自动修复可修复的JavaScript和SCSS错误： ```bash npx eslint --fix src npx stylelint --fix --allow-empty-input 'src/...

### 配置 Stylelint 在 WebStorm 中 为了在 WebStorm 中成功配置并使用 Stylelint，确保安装了必要的依赖包。通过执行如下命令来安装这些工具： ```bash pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D ``` 此命令会安装 Stylelint 及其推荐的相关插件和配置文件[^1]。 #### 创建或更新 `.stylelintrc` 文件 创建一个名为`.stylelintrc.json` 的 JSON 文件，在项目根目录下定义 Stylelint 规则。例如: ```json { "extends": [ "stylelint-config-standard", "stylelint-config-standard-scss" ], "rules": { "indentation": 2, "number-leading-zero": null } } ``` 这将扩展标准 SCSS 和 CSS 规范，并允许自定义特定规则设置。 #### 安装 Stylelint 插件到 WebStorm 打开 WebStorm 并导航至 `File | Settings (Ctrl+Alt+S)` 对于 Windows/Linux 或者 `WebStorm | Preferences... (Cmd+,)` 对于 macOS 用户。接着前往 `Languages & Frameworks | Style Sheets | StyleLint` 路径下的选项卡。勾选 Enable checkbox 后点击 `Configure path to linter` 输入框右侧的省略号按钮 (`…`) 来指定本地 Node.js 环境中的 Stylelint 执行路径。通常情况下，默认值即可满足需求；如果遇到问题，则需手动输入绝对路径指向全局或局部安装好的 Stylelint 版本位置。 完成上述操作之后，重启 IDE 让更改生效。现在应该可以在编辑器内看到实时样式错误提示以及警告信息了。