vue项目中配置stylelint

最新推荐文章于 2024-09-13 07:20:10 发布

往后余生cq

最新推荐文章于 2024-09-13 07:20:10 发布

阅读量7.7k

点赞数

分类专栏： Javascript 代码规范文章标签： stylelint 代码规范 webpack

本文链接：https://blog.csdn.net/luchuanqi67/article/details/84673363

版权

Javascript 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

代码规范

2 篇文章 0 订阅

订阅专栏

本文介绍Stylelint——一款强大的CSS代码检查工具，用于规范CSS代码风格，提升代码质量。文章详细讲解了如何使用npm安装依赖包，配置webpack进行文件监测，以及如何设置检查规则，帮助开发者遵循统一的编码标准。

摘要由CSDN通过智能技术生成

stylelint 是css的代码检查工具，方便规范css带啊吗规范

依赖包


npm i stylelint stylelint-webpack-plugin stylelint-config-standard --save-dev

配置文件

webpack.dev.conf.js

const StyleLintPlugin = require('stylelint-webpack-plugin')


plugins中添加

new StyleLintPlugin({
	// 正则匹配想要lint监测的文件
	files: ['src/**/*.vue', 'src/assets/css/*.l?(e|c)ss']
}),

忽略检查文件 .stylelintignore

根据自己项目来把, 比如

src/assets/css/*.css

检查规则 .stylelintrc.js

module.exports = {
    "extends": "stylelint-config-standard",
    "rules": {
        "rule-empty-line-before": "never",
        "selector-list-comma-newline-after": "never-multi-line",
        "string-quotes": "single",
        "indentation": 4,
        "selector-pseudo-element-colon-notation": "single",
        "no-descending-specificity": null
    }
}