問題描述

成都創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作，提供網(wǎng)頁設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，按需定制網(wǎng)站，網(wǎng)站開發(fā)公司，從2013年成立是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價(jià)值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開發(fā)，后臺程序制作以及后期項(xiàng)目運(yùn)營并提出專業(yè)建議和思路。

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

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)象一樣,問題是出現(xiàn)在配置中的processors項(xiàng)

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

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

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

文章題目：vue單文件組件linterror自動(dòng)fix與styleLint報(bào)錯(cuò)自動(dòng)fix詳解
標(biāo)題網(wǎng)址：http://www.chinadenli.net/article30/ipheso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站營銷、企業(yè)網(wǎng)站制作、網(wǎng)站排名、定制開發(fā)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)