這篇文章主要給大家介紹了關於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).
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對神馬文庫的支持。