問(wèn)題描述

之前用Vue(多入口打包成多頁(yè))的項(xiàng)目,要修改遷移并修改為一個(gè)單頁(yè)應(yīng)用,且使用Vue腳手架生成項(xiàng)目,要對(duì)js,vue,css文件的代碼做lint,在修改Webpack配置后第一次跑lint居然報(bào)了幾萬(wàn)個(gè)Error,且是在eslint加了--fix選項(xiàng)的情況下,且錯(cuò)誤大多集中在順序問(wèn)題上也就是vue/order-in-components和order/properties-order的錯(cuò)誤.以下是問(wèn)題的解決方式及過(guò)程記錄.

stylelint中css屬性順序錯(cuò)誤

.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選項(xiàng)后,自動(dòng)修復(fù)會(huì)把Vue文件中所有內(nèi)容都移除掉,只剩css代碼

首先在stylelint的issue中發(fā)現(xiàn)了這樣的一個(gè)issue,基本現(xiàn)象一樣,問(wèn)題是出現(xiàn)在配置中的processors項(xiàng)

移除配置中的processors后,發(fā)現(xiàn)stylelint檢測(cè)了各種文件(包括js/png等),執(zhí)行l(wèi)int的命令為: stylelint **/*.{vue,css,scss} --fix

添加.stylelintignore文件,里面忽略不用lint的文件后綴,最后完美解決css(包括scss/vue文件style標(biāo)簽)中屬性順序錯(cuò)誤自動(dòng)修復(fù)問(wèn)題

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

eslint時(shí)vue文件中屬性順序錯(cuò)誤

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的文檔中發(fā)現(xiàn)vue/order-in-componentsrule是支持自動(dòng)修復(fù)的,然后去翻看了issue,發(fā)現(xiàn)這個(gè)issue中提到這個(gè)error不能自動(dòng)修復(fù)的問(wèn)題已經(jīng)提了PR且merge了,于是果斷更新eslint-plugin-vue到最新版本(4.3.0)完美解決問(wèn)題(ps:升級(jí)后又出現(xiàn)了個(gè)vue/attributes-order的錯(cuò)誤,且文檔說(shuō)不能自動(dòng)修復(fù),于是果斷ignore).

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)錯(cuò)新站長(zhǎng)站的支持。