2

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

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

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

欢迎任何建议！多谢你们！

4

2 回答 2

0

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

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

.ui-fresh {
    &__selector {}
}

但是您可以做的是创建一个弃用警告，在所有使用旧样式的元素周围显示（渲染时）。您可以将您的 webpack（或您使用的任何捆绑程序）配置为仅在 DEV 构建时包含弃用警告，但在 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;
    }
}

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

{
    loader: 'sass-loader',
    options: {
        additionalData: '$env: ' + process.env.NODE_ENV + ';'
    },
},
于 2021-09-20T10:05:09.230 回答
0

经过一些对话，我们有了一个解决方案 - IDE 中的 sassdoc 支持！
好的……快到了！Jetbrains 团队已经有一个功能请求！我们只需要推送数百个 VOTE - 然后它们将构建在 Jetbrains IDE 中。
去吧，伙计们！
https://youtrack.jetbrains.com/issue/WEB-12829
让我们的前端工作流程再次变得更好！我们一起可以做到！;)

于 2021-09-28T08:38:01.670 回答