Vue + Eslint + stylelint配合vscode自动保存配置

• 前端开发过程中由于要规范我们的代码，需要用到eslint+ stylelint对 js和css进行规范约束, 而按照规范配置我们开发者工具（vscode）显得尤为方便

// vscode setting配置, 可以实现ctrl+s保存根据eslint+style实现自动修复
  ...
  "eslint.validate": [
        "javascript",
        "vue",
        "html"
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true,
    },
    "stylelint.validate": [
        "vue",
        "html"
    ],
    "stylelint.enable": true,
    "css.validate": true,
    "scss.validate": true,
    "less.validate": true,
    ...

// eslintrc.js配置
// 需要安装的插件 eslint eslint-loader eslint-plugin-html eslint-plugin-vue
module.exports = {
  root: true,
  parserOptions: {
    sourceType: 'module',
    parser: 'babel-eslint',
  },
  env: {
    browser: true
  },
  extends: [
    'standard',
    'plugin:vue/recommended',
  ],
  // required to lint *.vue files
  plugins: ['html', 'vue'],
  // add your custom rules here
  rules: {
    'vue/max-attributes-per-line': [2, {
      singleline: 10,
      multiline: {
        max: 1,
        allowFirstLine: false
      }
    }],
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/name-property-casing': ['error', 'PascalCase'],
    'vue/no-v-html': 'off',
    'vue/require-v-for-key': 'error',
    'vue/no-use-v-if-with-v-for': ['error', {
      allowUsingIterationVar: false
    }],
    'vue/component-name-in-template-casing': ['error', 'kebab-case', {
      registeredComponentsOnly: false,
      ignores: []
    }],
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    // 要求在语句末尾使用分号
    'semi': [1, 'always', { omitLastInOneLineBlock: true }],
    // 要求或禁止函数圆括号之前有一个空格
    'space-before-function-paren': [1, 'never'],
    // 要求或禁止块内填充
    'padded-blocks': [0, { blocks: 'always' }],
    // 要求或禁止使用拖尾逗号
    'comma-dangle': [0, 'always-multiline'],
    // 强制使用一致的缩进
    'indent': [1, 2, { SwitchCase: 1, CallExpression: { arguments: 2 } }],
    // 禁止使用 空格 和 tab 混合缩进
    'no-mixed-spaces-and-tabs': 2,
    // 强制操作符使用一致的换行符风格（操作符后面换行）
    'operator-linebreak': [2, 'after'],
    // 强制js字符串使用单引号
    'quotes': [2, 'single'],
    // 允许在正则表达式中出现控制字2
    'no-control-regex': 0,
    // 强制每一行中所允许的最大语句数量
    'max-statements-per-line': ['error', { max: 1 }],
    // 强制使用一致的逗号风格
    'comma-style': [2, 'last', { exceptions: { CallExpression: false } }],
    // 禁止不必要的分号
    'no-extra-semi': 2,
    // 要求使用 let 或 const 而不是 var
    'no-var': 2,
    // 禁止在变量定义之前使用它们
    'no-use-before-define': [2, { functions: true, classes: true, variables: true }
    ],
    // 强制在 parseInt() 使用基数参数
    'radix': 2,
    // 要求对象字面量属性名称不用引号括起来
    'quote-props': [2, 'consistent-as-needed'],
    // 禁止扩展原生类型
    'no-extend-native': 2,
    // 强制函数最大代码行数
    'max-lines-per-function': [1, { max: 50 }],
    // 强制函数定义中最多允许的参数数量
    'max-params': [1, 6],
    // 要求 for-in 循环中有一个 if 语句
    'guard-for-in': 1,
  }
};

• stylelint配置

// 需要安装的插件 stylelint stylelint-config-standard stylelint-order css-properties-sorting
module.exports = {
  extends: ['stylelint-config-standard', 'css-properties-sorting'],
  plugins: ['stylelint-order'], // stylelint-order是CSS属性排序插件
  rules: {
    // "color-hex-case": "lower", // 颜色值为小写字母(stylelint-config-standard)
    'function-url-quotes': 'always', // 地址一定要写引号
    'number-leading-zero': 'never', // 要求或分数低于1的数字禁止前导零
    'number-no-trailing-zeros': true, // 禁止在数量尾随零
    'string-quotes': 'double', // 指定字串，双引号
    'value-keyword-case': 'lower', // 属性值小写
    'length-zero-no-unit': true, // 禁止零长度单位。
    'shorthand-property-no-redundant-values': true, // 不允许在简写属性冗余值
    'keyframe-declaration-no-important': true, // 不允许!important在关键帧声明
    'selector-class-pattern': '^[a-z]+([a-z0-9]?|[a-z0-9\\-]*[a-z0-9])$', // 指定一个模式类选择符，限制选择器名称写法, 限制连字符不允许使用'_'
    'max-nesting-depth': 5, // 允许嵌套的深度为5
    'no-duplicate-selectors': true, // 不允许重复的选择器
    'order/order': [ // 指定声明块内的内容顺序
      ['custom-properties', 'declarations'], {
        disableFix: true
      }
    ],
    'order/properties-order': [ // 指定声明块内属性的字母顺序
      // 定位属性
      'position',
      'display',
      'float',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'overflow',
      'clear',
      // 自身属性
      'width',
      'height',
      'max-width',
      'max-height',
      'min-width',
      'min-height',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'margin-collapse',
      'margin-top-collapse',
      'margin-right-collapse',
      'margin-bottom-collapse',
      'margin-left-collapse',
      // 文字属性
      'font',
      'font-family',
      'font-size',
      'font-smoothing',
      'osx-font-smoothing',
      'font-style',
      'font-weight',
      'hyphens',
      'src',
      'line-height',
      'letter-spacing',
      'word-spacing',
      'color',
      // 文本属性
      'text-align',
      'text-decoration',
      'text-indent',
      'text-overflow',
      'text-rendering',
      'text-size-adjust',
      'text-shadow',
      'text-transform',
      'word-break',
      'word-wrap',
      'white-space',
      'vertical-align',
      'list-style',
      // css3新增属性
      'content',
      'box-shadow',
      'border-radius',
      'transform'
    ]
  }
};

• 这样在实际的开发过程中 我们很方便的可以对我们代码进行按照我们自定的规范对我们写的代码规范处理。