在前端开发中，我们经常需要使用 CSS 预处理器来提高开发效率和可维护性。而 postcss 作为一个强大的后处理器，可以对 CSS 进行各种转换和优化。但是，我们在使用 postcss 时难免会遇到一些错误，这就必须要借助调试工具来帮助我们快速找到问题所在。而 postcss-error-to-vscode-diagnostic 这个 npm 包就可以帮助我们将 postcss 错误信息转换成 vscode 的诊断信息，从而更方便地定位问题。
安装
我们可以使用 npm 来进行安装：
npm install postcss-error-to-vscode-diagnostic --save-dev
使用
在应用到我们的项目中之前，我们先来看一下示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------- - ----------------------------------------------
----- --- - -
---- -
----------------- ----
------- -----
---- ----
-
--
-----------
------------- - ----- --------- --
-------------- -- -
------------------------
--
-------------- -- -
----- ----------- - ------------------------ -
----- ----
---
-------------------------
---首先我们引入了 postcss 和 postcss-error-to-vscode-diagnostic 两个包，然后定义了一段错误的 CSS 代码。在 postcss 的 process 方法中，我们传入了错误的 css 代码，并且由于我们不是从已有的文件读取的，所以 from 为 undefined，然后调用了 then 方法打印错误的 css 代码。catch 方法中，我们调用了 errorToDiagnostic 方法将错误信息转换成 vscode 的诊断信息，最后打印出了诊断信息。
我们来看一下诊断信息的格式：
-- -------------------- ---- -------
-
-
-------- -------- -------- -------
------ -
------ - ----- -- ---------- - --
---- - ----- -- ---------- - -
--
--------- --
------- ---------
-
-诊断信息是以一个数组的形式返回，其中包含了错误的具体信息，以及错误所在的行、列信息。这个格式已经符合了 vscode 的诊断信息的格式要求，我们只需要将诊断信息交给 vscode 即可。
使用到 vscode 中
将 errorToDiagnostic 返回的诊断信息交给 vscode 的方法如下：
-- -------------------- ---- -------
----- ------ - ------------------
----------------
---------------------------------------------
------------------ -- -
----- --- - -----------------------------
------ ------------------- -------------
---我们首先引入了 vscode，然后创建了一个诊断集合。该集合的名称为 postcss-errors。然后我们指定了一个 uri，这里指定的是 style.css 文件，你可以根据你的实际情况调整。最后我们将 uri 和 diagnostics 传入集合的 set 方法中，就可以将诊断信息显示在 vscode 的编辑器中了。
总结
在开发中，致力于提高效率和减少 bug 都是我们需要一直追求的目标。使用 postcss 可以方便我们对 css 进行各种转换和优化，但是错误是难以避免的。通过使用 postcss-error-to-vscode-diagnostic 这个 npm 包，结合 vscode，我们可以更好地定位问题，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005540181e8991b448d15ad