如何为你的 Vue 项目添加配置 Stylelint (3)

比如 declaration-block-semicolon-newline-after 设置 "always" 时，不允许多条 css 规则写在一行，但自动修复后可能会出现缩进不正确：

<style> .classA { display: block; } a { color: pink; top: 0; } </style>

修复后（示例，之前配置时没尝试去找必现路径）：

<style> .classA { display: block; } a { color: pink; top: 0; } </style>

如果你也出现这种情况，可以再指定 indentation 规则的基准缩进（ baseIndentLevel ）：

module.exports = { ... rules: { ... 'indentation': [2, { 'baseIndentLevel': 1, }], 'declaration-block-semicolon-newline-after': 'always' } };

参考链接

Prettier + Stylelint: Writing Very Clean CSS (Or, Keeping Clean Code is a Two-Tool Game)

如何在Vue+Webpack下配置Stylelint - 简书

vue单文件组件lint error自动fix及styleLint报错自动fix - segmentfault

Stylelint in .vue - 掘金

本文基于

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 发布，欢迎引用、转载或演绎，但是必须保留本文的署名 BlackStorm 以及本文链接 ，且未经许可不能用于商业目的。如有疑问或授权协商请与我联系。