1. VSCode 集成 Stylelint 插件

VSCode 中集成 Stylelint 插件的首要条件，就是你得先 安装了 VSCode。

安装好 VSCode 之后，就可以按照下面的步骤来安装并配置了。

1.1 插件安装

保姆级 VSCode 插件检索和安装流程请查阅文章：附：IDE 集成 ESLint 插件

在 VSCode 中直接检索 Stylelint，选择 Stylelint 这个插件安装，注意官方认证标识哦，要安装带有官方认证标识的这个。

注意：这个插件的最新版本 (目前是 v1.2.4) 不支持 stylelint@14 以下的版本 (stylelint@13 是不支持的)。

1.2 插件配置

通常来说，Stylelint 不需要进行额外的配置即可使用，也不需要对特定的项目进行设置。打开 Stylelint 的设置界面，你可以看到所有的可设置项。

最常设置的是 Validate，用于设置 Stylelint 检测的文件。如果你不想每个项目都去设置，可以把 css, less, scss, stylus, vue 这些常用的文件都加进去。

2. WebStorm 集成 Stylelint 插件

WebStorm 本身已经集成了 Stylelint，所以只需要进行配置即可。

配置的官方文档：Stylelint | WebStorm Documentation - JetBrains。

可以参考的博客：WebStorm 配置 stylelint。

3. 总结

本文介绍了如何在 VSCode 中集成 Stylelint 插件，同时推荐了一些在 WebStorm 中使用 Stylelint 的方式。每个 IDE 各有特色，没有绝对的好与坏，趁手就行。

但是要注意的是，不同的 IDE，对相同的代码可能会有不同的提示，这些提示又可能与命令行执行的结果不同。从我的使用经历来看，VSCode 集成插件之后的表现，基本上和命令行执行的结果一致，Webstorm 有时会提示错误。

在一个团队里，尽可能使用同一个 IDE，并在项目中对 IDE 进行设置，可以在最大程度上抹平因 IDE 不同而导致的代码展现问题。