vue單文件組件lint error自動fix及styleLint報錯自動fix

問題描述

以前用Vue(多入口打包成多頁)的項目,要修改遷移並修改成一個單頁應用,且使用Vue腳手架生成項目,要對js,vue,css文件的代碼作lint,在修改Webpack配置後第一次跑lint竟然報了幾萬個Error,且是在eslint加了--fix選項的狀況下,且錯誤大多集中在順序問題上也就是vue/order-in-components和order/properties-order的錯誤.如下是問題的解決方式及過程記錄.

stylelint中css屬性順序錯誤

• .stylelint的配置

// .stylelint
{ 
  "processors": ["@mapbox/stylelint-processor-arbitrary-tags"],
  "plugins": [
    "stylelint-order",
    "stylelint-scss"
    ],
  "extends": ["css-properties-sorting"],
  "rules": {
    "order/order": [
      "custom-properties",
      "declarations"
    ],
    "color-no-invalid-hex": true,
    "unit-no-unknown": true,
    "property-no-unknown": true,
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-element-no-unknown": true,
    "comment-no-empty": true,
    "number-leading-zero": "always",
    "number-no-trailing-zeros": true,
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never"
  }
}

• 在stylelint中加上--fix選項後,自動修復會把Vue文件中全部內容都移除掉,只剩css代碼
• 首先在stylelint的issue中發現了這樣的一個issue,基本現象同樣,問題是出如今配置中的processors項
• 移除配置中的processors後,發現stylelint檢測了各類文件(包括js/png等),執行lint的命令爲: stylelint **/*.{vue,css,scss} --fix
• 添加.stylelintignore文件,裏面忽略不用lint的文件後綴,最後完美解決css(包括scss/vue文件style標籤)中屬性順序錯誤自動修復問題

// .stylelintignore
*.js
*.png
*.eot
*.ttf
*.woff

eslint時vue文件中屬性順序錯誤

• eslint-plugin-vue版本: 4.0.0
• .eslintrc.js配置文件

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
  },
  extends: [
    'plugin:vue/recommended',
    'standard'
  ],
  plugins: ['vue'],
  rules: {
    'generator-star-spacing': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'semi': 0,
    'indent': 0,
    'no-unused-vars': 0
  }
};

• 首先在eslint-plugin-vue的文檔中發現vue/order-in-componentsrule是支持自動修復的,而後去翻看了issue,發現這個issue中提到這個error不能自動修復的問題已經提了PR且merge了,因而果斷更新eslint-plugin-vue到最新版本(4.3.0)完美解決問題(ps:升級後又出現了個vue/attributes-order的錯誤,且文檔說不能自動修復,因而果斷ignore).