如何弃用 IDE 中的 CSS 选择器

Question

我正在寻找解决方案，通过它我可以将我的 scss 文件中的选择器标记为已弃用。然后，如果我在处理 html 文件并且同时想使用这个“弃用选择器”，我的 IDE 应该标记选择器并且应该向我显示弃用消息。我想要类似的东西：

/**
 * @deprecated Please use '.ui-fresh__selector' instead!
 */
.ui-old__selector {...}

...就像我们使用 JSDoc 一样。使用 .editorconfig 或一些 linting 工具也可以实现这一点。例如，如果我可以在配置文件中设置一个数组，其中包含所有那些已弃用的选择器……或者类似的东西，那就太好了？在 IDE 中显示这些弃用消息也很重要，而不仅仅是在 build/compiling 阶段的后期。看起来很难找到合适的解决方案。

欢迎提出任何建议！谢谢大家！

Answer 1

那些东西属于 linters 的范畴。我对 html linters 的功能一无所知。但是您仍然会遇到另一个问题：在许多情况下，类名仅在 SASS 编译为 CSS.

时形成

/**
 * @deprecated Please use '.ui-fresh__selector' instead!
 */
.ui-old {
    &__selector {}
}

.ui-fresh {
    &__selector {}
}

但是您可以创建一个弃用警告，它会在所有使用旧样式的元素周围显示（呈现时）。您可以将您的 webpack（或您使用的任何捆绑器）配置为仅在开发构建时包含 弃用警告，但绝不会包含在 PROD 构建中。

@import "deprecation";

/**
 * @deprecated Please use '.ui-fresh__selector' instead!
 */
.ui-old {
    @include deprecated;
    &__selector {}
}

.ui-fresh {
    &__selector {}
}

和

// _deprecation.scss
@mixin deprecated {
    @if $env == development {
        border: 4px solid red !important;
    }
}

可以通过 sass-loader 选项在您的 webpack 配置中设置 $env 变量 additionalData

{
    loader: 'sass-loader',
    options: {
        additionalData: '$env: ' + process.env.NODE_ENV + ';'
    },
},

Answer 2

经过一些对话，我们找到了解决方案 - IDE 中的 sassdoc 支持！
好吧……差不多了！ Jetbrains 团队已经有一个功能请求！我们只需推动数百个投票 - 然后他们将在 Jetbrains IDEs.
中构建加油吧伙计们！
https://youtrack.jetbrains.com/issue/WEB-12829
让我们的前端工作流程再次变得伟大！我们一起可以做到！ ;)

如何弃用 IDE 中的 CSS 选择器

how to deprecate a CSS selectors in IDE

sass

ide

deprecation-warning

htmllint