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

番茄西红柿发布于2019-04-23 11:56 / 2075人阅读

摘要：如何为你的项目添加配置如何为你的项目添加配置现在已经是年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如已经不再维护，以及之后文件只剩下部分等。如有疑问或授权协商请与我联系。

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

现在已经是 9102 年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如 stylelint-processor-html 已经不再维护，以及 --fix 之后 .vue 文件只剩下

但是随之而来的是一个常见错误：你在文件头部忽略了对浏览器前缀的提示，却在另一个遥远的地方由于暂时性允许同名属性，通过 /* stylelint-enable */ 把之前所有忽略的规则都重新开启了。所以一定要注意，只 enable 对应的规则，形成呼应：

其他注意事项

解析 .vue 文件（单文件组件）时请勿使用 processors

网上一些过时的教程包括 github 上的讨论都推荐使用 stylelint-processor-html 或者 @mapbox/stylelint-processor-arbitrary-tags 来解析 html 或 vue 中的 css ，这本身并没有什么问题，但是这个插件有个 bug ，当指定 stylelint 的 --fix 后将会把 vue 文件中以外的部分删掉。

我们使用自定义语法 postcss-html 或者保留 stylelint-scss 插件就足够了。
一些规则在跑 --fix 选项时是有 bug 的

比如 declaration-block-semicolon-newline-after 设置 "always" 时，不允许多条 css 规则写在一行，但自动修复后可能会出现缩进不正确：
修复后（示例，之前配置时没尝试去找必现路径）：
如果你也出现这种情况，可以再指定 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 以及本文链接 http://www.cnblogs.com/BlackStorm/p/add-stylelint-to-your-vue-project.html ，且未经许可不能用于商业目的。如有疑问或授权协商请与我联系。

GPU云服务器云服务器如何为自己的vps充值如何为阿里云服务器创建快照如何为阿里云服务器创建子账号如何用vue开发实时音视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1365.html

工程搭建---代码风格统一

摘要：为此我们需要安装这个是用于提交代码的钩子函数安装完之后，我们就需要在增加运行钩子函数。等钩子函数这样就简单的成功对代码进行效验了，当然这边更进一步的可以使用这个可以将取得所有被提交的文件依次执行写好的任务。一个项目是会有多个成员来开发的，因此统一开发规范是很有必要的，不然每个人都有自己的风格，同步之后代码都会报错。我这边是用Vscode编译器的。首先用vue-cli3.0创建一个工...

levius 2019-08-23 16:05 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

call_me_R 2019-08-23 13:43 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

wzyplus 2019-08-02 12:08 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

aristark 2019-08-29 17:24 评论0 收藏0
【翻译】用PostCSS改善你的CSS代码质量

摘要：代码质量这个术语对于程序员来说并不陌生。在本文中，我们将探讨我们如何能够利用帮助我们，保持我们的代码质量更高。怎样使用在这篇文章中，我们重点介绍几个插件，可以帮助我们提高代码质量。使用相当简单的。这两个插件可用于代码分析。代码质量这个术语对于程序员来说并不陌生。毕竟，每个开发人员都知道，代码只是能工作是不够的。它还应该具备其他要素：它应该是可读的，良好的格式和一致性。它也应该符合一些...

sorra 2019-08-30 12:59 评论0 收藏0