vue项目添加stylelint

秒速五厘米 2022-12-04 15:57 309阅读 0赞

使用vue cli3.x创建一个初始项目代码风格: eslint + prettier

#### 项目中添加stylelint进行css代码规范 ####

安装

cnpm i stylelint stylelint-config-standard stylelint-config-rational-order stylelint-config-prettier stylelint-order stylelint-scss stylelint-declaration-block-no-ignored-properties stylelint-webpack-plugin -D

> stylelint-config-rational-order和stylelint-order是对css属性进行排序  
> stylelint-config-prettier 是结合prettier使用  
> stylelint-scss 处sass文件  
> stylelint-declaration-block-no-ignored-properties对css代码检测无效的属性  
> stylelint-webpack-plugin 添加webpack启动stylelint插件

添加stylelint的配置文件

// 根目录下新建stylelint.config.js
    module.exports = { 
        defaultSeverity: 'error',
        extends: [
            'stylelint-config-standard',
            'stylelint-config-rational-order', // 属性排序规则
            'stylelint-config-prettier'
        ],
        plugins: [
            'stylelint-order',
            'stylelint-scss',
            'stylelint-declaration-block-no-ignored-properties'
        ],
        rules: { 
            // 不要使用已被 autoprefixer 支持的浏览器前缀
            'media-feature-name-no-vendor-prefix': true,
            'at-rule-no-vendor-prefix': true,
            'selector-no-vendor-prefix': true,
            'property-no-vendor-prefix': true,
            'value-no-vendor-prefix': true,
            'no-descending-specificity': null,
            //https://github.com/stylelint/stylelint/issues/4114
            'function-calc-no-invalid': null,
            'function-url-quotes': 'always',
            'font-family-no-missing-generic-family-keyword': null,
            // 'plugin/declaration-block-no-ignored-properties': true,
            'unit-no-unknown': [true, {  ignoreUnits: ['rpx'] }],
            // 忽略v-deep伪元素
            'selector-pseudo-element-no-unknown': [
                true,
                { 
                    ignorePseudoElements: ['v-deep']
                }
            ],
            'at-rule-no-unknown': [
                true,
                { 
                    ignoreAtRules: [
                        'mixin',
                        'include',
                        'if',
                        'else',
                        'extend',
                        'for'
                    ]
                }
            ],
            indentation: 4
        }
    }

添加webpack插件

const StyleLintPlugin = require('stylelint-webpack-plugin')
    
    module.exports = { 
        chainWebpack: config => { 
            // stylelint配置
            config.plugin('stylelint').use(StyleLintPlugin, [
                { 
                    files: ['**/*.{html,vue,css,sass,scss}'],
                    fix: true, // 自动修复
                    cache: true,
                    emitError: true,
                    failOnError: false
                }
            ])
        }
    }

这样在运行代码后就会有css代码规范了,并且可以自动修复。(记得要开启编辑器的保存格式化功能)

#### git提交代码时进行css代码验证 ####

安装插件

cnpm i lint-staged husky -D

修改package.json文件

// 添加以下配置
    { 
    	"husky": { 
    	    "hooks": { 
    	      "pre-commit": "lint-staged"
    	    }
      	},
    	"lint-staged": { 
    	    "*.{html,vue,css,sass,scss}": [
    	      "stylelint --fix",
    	      "git add"
    	    ]
    	}
    }