目錄
插件安裝
本地配置
?忽略文件配置
依賴安裝
配置項文件
Endings?& Tips
插件安裝
我用的軟件是VScode，搜索插件：Stylelint? ?(?版本:v1.2.2 )
本地配置
打開VScode的設(shè)置，打開settings.json或者直接在設(shè)置里點擊這個圖標(biāo)可以自動跳轉(zhuǎn)：
?在里面配置一下代碼，可根據(jù)自己的需求增減：
//開啟自動修復(fù)
"editor.codeActionsOnSave": {
"source.fixAll": true, // 開啟自動修復(fù)
"source.fixAll.stylelint": true, // 開啟stylelint自動修復(fù)
},
// 配置stylelint檢查的文件類型范圍
"stylelint.validate": [
"css",
"less",
"postcss",
"scss",
"sass",
"vue"
],
"stylelint.enable": true,
"css.validate": false,
"less.validate": false,
"scss.validate": false,?忽略文件配置
創(chuàng)建文件.stylelintignore，位置與package.json文件同級。此文件防止格式化的時候會忽略此目錄下或者后綴的文件，具體的需要根據(jù)自己的情況設(shè)置
# .stylelintignore
# 舊的不需打包的樣式庫
*.min.css
# 其他類型文件
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff
*.json
# 測試和打包目錄
/test/
/dist/
/node_modules/
/lib/
依賴安裝
這里為了避免安裝包版本問題，我建議大家直接復(fù)制到package.json文件再npm i 安裝：
"devDependencies": {
"postcss": "^8.4.12",
"postcss-html": "^1.3.0",
"stylelint": "^14.6.0",
"stylelint-config-html": "^1.0.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended": "^7.0.0",
"stylelint-config-recommended-less": "^1.0.4",
"stylelint-config-recommended-scss": "^7.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^25.0.0",
"stylelint-config-standard-scss": "^4.0.0",
"stylelint-less": "^1.0.5",
"stylelint-order": "^5.0.0",
}?再加上這句話，就可以在終端： npm run?lint:stylelint 直接進行全局檢查，但是會忽略掉.stylelintignore中的文件，如果有文件出現(xiàn)錯誤就會提示
"scripts":{
"lint:stylelint": "stylelint src/**/*.{vue,scss,css,sass,less} --fix"
}配置項文件
創(chuàng)建文件.stylelintrc.js，創(chuàng)建位置與package.json文件同級，將以下代碼復(fù)制到里面
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-prettier',
'stylelint-config-html/vue',
'stylelint-config-recommended-vue/scss',
'stylelint-config-recommended-less',
'stylelint-config-recommended-scss',
],
plugins: ['stylelint-order'],
overrides: [
{
"files": ["**/*.vue"],
"customSyntax": "postcss-html"
}
],
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json', ],
rules: {
indentation: 2,
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep', ':deep']
}
],
'number-leading-zero': 'always',
'no-descending-specificity': null,
'function-url-quotes': 'always',
'string-quotes': 'single',
'unit-case': null,
'color-hex-case': 'lower',
'color-hex-length': 'long',
'rule-empty-line-before': 'never',
'font-family-no-missing-generic-family-keyword': null,
'selector-type-no-unknown': null,
'block-opening-brace-space-before': 'always',
'at-rule-no-unknown': null,
'no-duplicate-selectors': null,
'property-no-unknown': null,
'no-empty-source': null,
'selector-class-pattern': null,
'keyframes-name-pattern': null,
'selector-pseudo-class-no-unknown': [
true,
{ ignorePseudoClasses: ['global', 'deep'] }
],
'function-no-unknown': null,
'order/properties-order': [
'position',
'top',
'right',
'bottom',
'left',
'z-index',
'display',
'justify-content',
'align-items',
'float',
'clear',
'overflow',
'overflow-x',
'overflow-y',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'font-size',
'font-family',
'font-weight',
'border',
'border-style',
'border-width',
'border-color',
'border-top',
'border-top-style',
'border-top-width',
'border-top-color',
'border-right',
'border-right-style',
'border-right-width',
'border-right-color',
'border-bottom',
'border-bottom-style',
'border-bottom-width',
'border-bottom-color',
'border-left',
'border-left-style',
'border-left-width',
'border-left-color',
'border-radius',
'text-align',
'text-justify',
'text-indent',
'text-overflow',
'text-decoration',
'white-space',
'color',
'background',
'background-position',
'background-repeat',
'background-size',
'background-color',
'background-clip',
'opacity',
'filter',
'list-style',
'outline',
'visibility',
'box-shadow',
'text-shadow',
'resize',
'transition'
]
}
};Endings?& Tips
到這里就是整個配置過程，可以去試一下 Ctrl + S 試一下。
但是如果你開啟了保存格式化的時候，Ctrl+S會出現(xiàn)空行，以至于出現(xiàn)紅色小波浪線。像這樣：
這個時候，需要去關(guān)閉你的保存格式化，再 Ctrl + S就可以了。在settings.json里面的：文章來源：http://www.zghlxwxcb.cn/news/detail-445293.html
"editor.formatOnSave": false最后就是這是官網(wǎng)：Home | Stylelintnpm versionhttps://stylelint.io/文章來源地址http://www.zghlxwxcb.cn/news/detail-445293.html
到了這里，關(guān)于2022 Stylelint 配置詳細(xì)步驟（css、less、sass、vue適用）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
