如何棄用 IDE 中的 CSS 選擇器

Question

我正在尋找一個解決方案，通過它我可以將我的 scss 文件中的一個選擇器標記為已棄用。 然后，如果我處理一個 html 文件並且同時想使用這個“棄用選擇器”，我的 IDE 應該標記選擇器並且應該向我顯示一條棄用消息。 我想要類似的東西：

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

...就像我們使用 JSDoc 一樣。 使用.editorconfig或一些 linting 工具也可以實現這一點。 例如，如果我可以在配置文件中設置一個數組，其中包含所有那些已棄用的選擇器……或者類似的東西，那就太好了？ 在 IDE 中顯示這些棄用消息也很重要，而不僅僅是在構建/編譯階段的后期。 看起來很難找到合適的解決方案。

歡迎任何建議！ 多謝你們！

Answer 1

那些東西屬於 linters 的 realm。 我對 html linters 的功能一無所知。 但是您仍然會遇到另一個問題：在許多情況下，類名僅在 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選項additionalData在你的 webpack 配置中設置

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

Answer 2

經過一些對話，我們有了一個解決方案——IDE 中的 sassdoc 支持！
好吧……差不多了。 Jetbrains 團隊已經有一個功能請求！ 我們只需推送數百個 VOTE - 然后它們將構建在 Jetbrains IDE 中。
伙計們，Go！
https://youtrack.jetbrains.com/issue/WEB-12829
讓我們的前端工作流程再次變得偉大； 我們一起可以做到！ ;)