vscode格式化代码（eslint csscomb minapp）

1.安装插件。 2.在项目中添加eslint依赖。 balel-eslint eslint eslint-friendly-formatter eslint-loader eslint-plugin-vue 3.配置项目中的eslintrc.js文件及eslintignore文件。 先配置项目中不需要格式化的文件

build/*.js
config/*.js
src/assets

配置项目eslint规则

module.exports = {
    root:true,
    parseOptions:{
        parser:'babel-eslint',
        sourceType:'module'
    },
    env:{
        browser:true,
        node:true,
        es6:true
    },
    extends:['plugin:vue/recommrnded','eslint:recommended'], // 如果是vue3 就更换为vue3适用的插件
    rules:{
        // 自定义规则 可上eslint官网查询
    }
}

4.确保eslint在vscode已经开启。 5.配置vscode setting.json。

// 保存时格式化代码
editor.formatOnSave:true, // 旧版
editor.codeActionsOnSave:{ // 新版
    'source.fixAll.eslint:true
}
// 需要使用eslint格式化的代码
eslint.codeAction.showDocumentation:{
    enable:true
}
eslint.alwaysShowStatus:true
eslint.debug:true
eslint.format.enable:true
eslint.validate:{
    javascript,
    vue,
    html,
    jsx,
    js
}
// 需要用csscomb格式化的代码
csscomb.formateOnSave:true
csscomb.preset:{
    // 可使用官网配置也可以自行配置
    sort-order：[
        // css属性排序
    ]
}
// 需minapp格式化的小程序代码
minapp-vscode.disableAutoConfig:true,
minapp-vscode.decorateComplexInterpolation:false,
minapp-vscode.foratMaxLineCharacters:800, // 为什么要设置这么大 因为小程序格式里的换行空格会影响样式（导致错乱）
minapp-vscode.wxmlQuoteStyle:"'",
minapp-vscode.prettyHtml:{
    *.wxml:{
        useTabs:false,
        tabWidth:2,
        printWidth:100,
        usePretter:true,
        wrapAttributes:false,
        sortAttributes:false
    }
}

6.为csscomb插件格式化创建一个快捷键，以便在.vue .html等文件中格式化css代码块。

以上配置均为项目中所用，有局限也有不足。