vscode配置和eslint规则一样的格式化

这几天被eslint搞疯了 写代码一直报错 连代码格式化也起冲突 简直气的砸电脑
接下来教大家如何配置vscode和eslint一样的格式化规则：
首先要声明的是
1、目前还没找到插件可以自动配置和eslint一样的格式化规范 有的话请留言告诉我 让我也学习一下
2、每个人的eslint中都有自己加的规则 或者继承别的规则 所以每个人的配置都不大一样 我这边的配置代码时根据eslint的默认配置走的 不是按eslint默认配置走的可能要自己修改一些配置项
3、写这个配置之前需要安装三个插件（切记 不要 仅仅只装这三个美化工具 不要装beautiful之类的其他插件 会冲突）

ESLint
Vetur
Prettier - Code formatter

这三个插件能帮忙检查出当前代码中的错误 并高亮提示

然后就是配置
Windows为例 打开文件 -首选项-设置 搜索eslint

会出现右侧红框中内容 看清楚 不要点错 下面这个和他蛮像的
点击这个在setting.json中编辑 进到我们的配置页

全选配置项 删除 替换成我这个：

{
    "editor.fontSize": 26,// 字体大小
    "editor.tabSize": 2,// tab 空格数
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
    "files.associations": {
        "*.vue": "vue"
    },
    "editor.codeActionsOnSave": { "source.fixAll.tslint":true },
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
  "eslint.validate": [
      "javascript",
      "html",
      "vue"
  ],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "git.confirmSync": false,
    "window.zoomLevel": 0,
    "typescript.validate.enable": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",// HTML采用js-beautify-html这种方式格式化
    "vetur.format.defaultFormatterOptions": {//选择哪种方式进行格式化并且该方式的格式化要写在对象里 写对象外无效

            "js-beautify-html": {//HTML的格式化方式
                "wrap_attributes": "force-expand-multiline"
                // "wrap_attributes": "force-aligned" //属性强制折行对齐
            },
            "prettier": {//这行为js的格式化方式
                "singleQuote": true,
                "semi": false,
                "trailingComma": "none"
            },
            "prettyhtml": {
                "printWidth": 20,
                "singleQuote": true,
                "wrapAttributes": true,
                "sortAttributes": false
            }
     },
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": false,
    "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.codeLens": true,
    "editor.snippetSuggestions": "top",
    "eslint.codeAction.disableRuleComment": {

    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "vetur.completion.scaffoldSnippetSources": {
    
    },
    "editor.wordWrap": "on",
    "eslint.codeAction.showDocumentation": {
    
        "enable": true
    },

  }

有几点 需要注意 ：
1、这个是2020.09.12号的配置 如果时间久了 eslint配置可能会更新 有些配置项就会不通用
2、如果粘贴进去发现有些地方黄线警告 需要将该问题解决 否者 该配置项不起作用

另外在网上找了两篇别人的配置 配置项会比较多 也比较全 如果你有一些独特的配置是找不到的可以到这里面找 （注意 他们的有可能有别的插件专用的配置 这个要认清 仅做参考 ）

{
    // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
    "editor.formatOnSave": false,
    //设置tab的缩进为2
    "editor.tabSize": 2,
    // #每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue-html",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.run":"onSave",
    "eslint.autoFixOnSave": false,
    //  #让prettier使用eslint的代码格式进行校验
    // vscode 更新后已经统一使用editor.codeActionsOnsave
    //  #代码结尾加分号为好
    "prettier.semi": true,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按"prettier"格式进行格式化
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // #vue组件中html代码格式化样式
            "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
            "wrap_line_length": 200,
            "end_with_newline": false,
            "semi": false,
            "singleQuote": true
        },
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "prettier.useTabs": true,
    "files.autoSave": "off",
    "explorer.confirmDelete": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },// 两个选择器中是否换行


    //在vue文件里设置html关联
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "explorer.confirmDragAndDrop": false,
    "terminal.integrated.rendererType": "dom",
    "files.associations": {
        "*.ejs":"html",
        "*.vue":"html"
        },
        "emmet.triggerExpansionOnTab": true,
        "emmet.includeLanguages":{
        "vue-html":"html",
        "vue":"html"
    }
}

还有一篇:

{
"editor.lineNumbers": "on", //开启行数提示
"editor.quickSuggestions": { //开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"prettier.useTabs": true,//使用制表符缩进
"editor.tabSize": 2, //制表符符号eslint
"editor.formatOnSave": true, //每次保存自动格式化
"prettier.semi": true, //去掉代码结尾的分号
"prettier.singleQuote": true, //使用单引号替代双引号
"prettier.trailingComma": "none", //去除对象最末尾元素跟随的逗号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.run": "onSave",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"prettier.printWidth": 200,//指定代码长度，超出换行
"prettier.requireConfig": true,//需要prettier.requireConfig格式化
"prettier.useEditorConfig": false,
"eslint.validate": [
//开启对.vue文件中错误的检查
 "javascript",
"javascriptreact",
"html",
"vue"
 ],
"terminal.integrated.rendererType": "dom",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

最后希望大家好好写代码 不行的话去送外卖 今天刚得到消息 一单外卖店家收款15元 其中给了9快给外卖配送的 外卖送一天赚350以上 咱码农才多少钱？ 头发不值钱？