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

2020-10-07  本文已影响0人  随风飞2019

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
  }
}

// 这里面对应着一些规则,可以适当增删
上一篇下一篇

猜你喜欢

热点阅读