自动eslint格式校验

前言

看同事用vscode保存代码都自动进行格式校验，且符合eslint规则。
于是开始了我的十万个为什么？

vscode保存不自动校验格式
Prettier - Code formatter不生效
Prettier格式校验和eslint冲突规则不一致

结果

搜了个遍也没有满意答案，后来发现是编辑器首选项的设置问题。
文件-首选项-设置

参考

https://blog.csdn.net/weixin_36222137/article/details/80040758

满意的首选项

{
    "editor.fontSize": 22, // 字体大小
    "workbench.colorTheme": "greenery", // 工作台主题颜色
    "editor.minimap.enabled": false, //关闭快速预览
    "editor.formatOnSave": true, //每次保存自动格式化
    "editor.codeActionsOnSave": { // 每次保存的时候将代码按eslint格式进行修复
        "source.fixAll.eslint": true
    },
    // "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格 好像注释了也可以
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // "wrap_attributes": "force-aligned" //属性强制折行对齐 那个html文件巨长了就
        }
    },
    "editor.wordWrap": "on", // 控制折行方式 - "on" (根据视区宽度折行)
    // "vetur.colorDecorators.enable": false,
    "editor.colorDecorators": false, // 控制编辑器是否显示内联颜色修饰器和颜色选取器。
    "editor.snippetSuggestions": "top", // 将建议的代码段优先级提前选择，比如输入for第一个提示是for循环代码段。
    "files.associations": { // 文件关联语言的优先级配置
        "*.vue": "vue",
        "*.cshtml": "html",
        "*.js": "javascript",
        "*.dwt": "html"
    }
}