如何在 IDE 中弃用 CSS 选择器

Question

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

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

...就像我们对 JSDoc 所做的那样。使用

.editorconfig

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

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

Answer 1

这些东西属于 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

选项在 webpack 配置中设置

sass-loader

变量

additionalData

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

Answer 2

好的...差不多了！ Jetbrains 团队已经有一个功能请求！我们只需推动数百个投票 - 然后它们将在 Jetbrains IDE 中构建。

加油吧伙计们！

https://youtrack.jetbrains.com/issue/WEB-12829
让我们的前端工作流程再次变得伟大！我们一起可以做到这一点！ ;)

Answer 3

eslint-plugin-deprecate-classnames

这样的 linter 来确保您的代码是安全的： 安装 ESLint：

npm install eslint --save-dev

安装

eslint-plugin-deprecate-classnames

：

npm install eslint-plugin-deprecate-classnames --save-dev

配置 ESLint：

将 deprecate-classnames 添加到

.eslintrc

文件的插件部分：

{
    "plugins": [
        "deprecate-classnames"
    ]
}

为已弃用的类添加规则：

{
    "rules": {
        "deprecate-classnames/classnames": ["error",
            { "name": "old-class", "use": "new-class" }
        ]
    }
}

此配置将标记旧类的任何使用，并建议使用新类。

清理未使用的 CSS 开始使用新类后，请使用 Chrome DevTools Coverage 工具来识别并删除未使用的 CSS。

通过使用

eslint-plugin-deprecate-classnames

以及 Chrome DevTools 覆盖工具，您可以顺利过渡到新类并维护干净的代码库。