标签：style right 网页 stylelint color CDN 访问速度 width border

这里写自定义目录标题

• • 1.配置并安装
  • 2.新建.stylelintrc.js文件
  • 3.配置package.json
  • 4.下载vscode插件之stylelint插件，配置settings.json
  • 4.忽略stylelint对css的检验
  • 保存见证效果

css的书写顺序很重要，会影响浏览器的渲染。正确的书写可以减少浏览器的回流，提升浏览器的dom渲染。

1.配置并安装

npm i stylelint stylelint-config-standard stylelint-order -D

2.新建.stylelintrc.js文件

module.exports = {
    extends: ['stylelint-config-standard'],
    plugins: ['stylelint-order'],
    rules: {
        'no-descending-specificity': null,
        'function-url-quotes': 'always',
        'string-quotes': 'double',
        indentation: 4,
        'unit-case': null,
        'color-hex-case': 'lower',
        'color-hex-length': 'long',
        'rule-empty-line-before': 'never',
        'font-family-no-missing-generic-family-keyword': null,
        'block-opening-brace-space-before': 'always',
        'property-no-unknown': null,
        'no-empty-source': null,
        'selector-pseudo-class-no-unknown': [
            true,
            {
                ignorePseudoClasses: ['deep'],
            },
        ],
        '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',
        ],
    },
}

3.配置package.json

"style": "stylelint 'src/**/*.(vue|css|less)' --fix",

4.下载vscode插件之stylelint插件，配置settings.json

{
    "editor.codeActionsOnSave": { "source.fixAll.stylelint": true }
}

4.忽略stylelint对css的检验

1. 忽略整个文件，在首行加入 /* stylelint-disable */

/* stylelint-disable */
div{
    width:100px;
}

2. 忽略多行

/* stylelint-disable */
div {
    color: red;
}
/* stylelint-enable */

3. 忽略一行， 在样式前加入 /* stylelint-disable-next-line */ 以忽略该行

#id {
  /* stylelint-disable-next-line */
  color: pink !important;
}

4. 在 .stylelintrc.json 內设定需要忽略的文件

{
  ignoreFiles: ["dist/**/*", "src/assets/scss/abc.scss"]
}

保存见证效果

之前:

ctrl+s之后:

标签：style,right,网页,stylelint,color,CDN,访问速度,width,border
来源： https://blog.csdn.net/feiyu361/article/details/120243727

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。