美文网首页
vue已有项目,添加stylelint,规范代码

vue已有项目,添加stylelint,规范代码

作者: 随风飞2019 | 来源:发表于2020-10-07 09:53 被阅读0次

    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
      }
    }
    
    // 这里面对应着一些规则,可以适当增删
    

    相关文章

      网友评论

          本文标题:vue已有项目,添加stylelint,规范代码

          本文链接:https://www.haomeiwen.com/subject/aoffpktx.html