问题描述
之前用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
}
};