1.安装依赖
stylelint
stylelint-config-stand
stylelint-scss
stylelint-webpack-plugin
yarn add stylelint stylelint-config-standard stylelint-scss stylelint-webpack-plugin --dev
2.配置webpack
vue.config.js配置webpack的写法
顶部引入StyleLintPlugin,configureWebpack里配置插件,示例如下
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://www.web-jshtml.cn/api/cars',
ws: true,
changeOrigin: true,
pathRewrite:{
"^/api":""
}
},
}
},
configureWebpack:{
plugins:[
new StyleLintPlugin({
'files': ['**/*.{html,vue,css,sass,scss}'],
'fix': false,
'cache': true,
'emitErrors': true,
'failOnError': false
})
]
}
}
3.编写stylelint配置文件
根目录新建stylelint.config.js文件,内如示例如下
module.exports = {
'defaultSeverity': 'error',
'extends': [ 'stylelint-config-standard' ],
'plugins': [ 'stylelint-scss' ],
'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
}
}
4.配置忽略文件
根目录新建.stylelintignore文件,和.gitignore完全一样的写法
ps:关于第3项,编写stylelint配置文件,也可以写成.stylelintrc文件,内如如下:
{
"extends": "stylelint-config-standard",
"plugins": ["stylelint-scss"],
"rules": {
"no-empty-source": null,
"property-no-vendor-prefix": null,
"number-leading-zero": null,
"number-no-trailing-zeros": true,
"length-zero-no-unit": true,
"value-list-comma-space-after": "always",
"declaration-colon-space-after": "always",
"value-list-max-empty-lines": null,
"shorthand-property-no-redundant-values": true,
"declaration-block-no-duplicate-properties": true,
"declaration-block-no-redundant-longhand-properties": true,
"declaration-block-semicolon-newline-after": "always",
"block-closing-brace-newline-after": "always",
"media-feature-colon-space-after": "always",
"media-feature-range-operator-space-after": "always",
"at-rule-name-space-after": "always",
"indentation": null,
"no-eol-whitespace": true,
"string-no-newline": null,
"no-descending-specificity":null,
"font-family-no-missing-generic-family-keyword":null,
"function-linear-gradient-no-nonstandard-direction":null,
"declaration-block-trailing-semicolon":null,
"at-rule-no-unknown": null,
"color-hex-case": null
}
}
// 这里面对应着一些规则,可以适当增删
网友评论