vscode 配合eslint 保存自动格式化

最近做项目时使用vs-code编辑器，项目中也使用了eslint，但很多时候不小心写到不规范的代码就会冒红，虽然不影响运行，但有代码洁癖的我是不允许这样的代码存在的，为了代码的规范性，加入了eslint格式校验，并且配置了自动化符合eslint格式的设置。

安装eslint和vetur插件

配置settingjs.json文件

路径：文件 -> 首选项 -> 设置 -> 找到settingjs.json ->. 点击编辑

清空代码，复制如下代码：

{
    "extensions.ignoreRecommendations": false,
    "files.associations": {
        "*.vue": "vue",
        "*.wxml": "html",
        "*.wxss": "css"
    },
    "[scss]": {},
    "git.autofetch": true,
    "editor.fontSize": 16, //以像素为单位控制字号
    // "editor.fontFamily": "monospace",                            //控制字体系列
    "git.enableSmartCommit": true, //在没有暂存的更改时提交所有更改
    "explorer.confirmDelete": true, //控制资源管理器是否应在删除文件到废纸篓时进行确认
    "editor.wordWrap": "on", //控制折行方式  off-禁用折行  on-根据视区宽度折行
    // "editor.formatOnType": true, //控制编辑器是否应在键入后自动设置行的格式
    // "workbench.colorTheme": "Visual Studio Dark", //指定工作台中使用的颜色主题
    //打开新页面  welcomePage-打开默认页面  none-不打开
    "workbench.startupEditor": "newUntitledFile",
    //控制在资源管理器内拖放移动文件或文件夹时是否进行确认
    "explorer.confirmDragAndDrop": false,
    "window.zoomLevel": 0, //调整窗口的缩放级别。原始大小是 0
    "git.confirmSync": false,
    //保存时设置文件的格式。格式化程序必须可用，不能自动保存文件，并且不能关闭编辑器
    // "gitlens.historyExplorer.enabled": true, 
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-expand-multiline" //强制展开多行
            // "wrap_attributes": "force-aligned"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": true,
            "wrapAttributes": false,
            "sortAttributes": true,
        }
    },
    "beautify.config": {
        "brace_style": "collapse,preserve-inline" //解决花括号中换行
    },
    "vetur.format.defaultFormatter.js": "vscode-typescript", //格式化js代码
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化html代码
    "editor.formatOnSave": true,
    "vetur.format.options.tabSize": 2,
    // "vetur.format.options.useTabs": true, //是否在每一行的末尾添加分号
    "editor.tabSize": 2,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "editor.minimap.enabled": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}
{
    "extensions.ignoreRecommendations": false,
    "files.associations": {
        "*.vue": "vue",
        "*.wxml": "html",
        "*.wxss": "css"
    },
    "[scss]": {},
    "git.autofetch": true,
    "editor.fontSize": 16, //以像素为单位控制字号
    // "editor.fontFamily": "monospace",                            //控制字体系列
    "git.enableSmartCommit": true, //在没有暂存的更改时提交所有更改
    "explorer.confirmDelete": true, //控制资源管理器是否应在删除文件到废纸篓时进行确认
    "editor.wordWrap": "on", //控制折行方式  off-禁用折行  on-根据视区宽度折行
    // "editor.formatOnType": true, //控制编辑器是否应在键入后自动设置行的格式
    // "workbench.colorTheme": "Visual Studio Dark", //指定工作台中使用的颜色主题
    //打开新页面  welcomePage-打开默认页面  none-不打开
    "workbench.startupEditor": "newUntitledFile",
    //控制在资源管理器内拖放移动文件或文件夹时是否进行确认
    "explorer.confirmDragAndDrop": false,
    "window.zoomLevel": 0, //调整窗口的缩放级别。原始大小是 0
    "git.confirmSync": false,
    //保存时设置文件的格式。格式化程序必须可用，不能自动保存文件，并且不能关闭编辑器
    // "gitlens.historyExplorer.enabled": true, 
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-expand-multiline" //强制展开多行
            // "wrap_attributes": "force-aligned"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": true,
            "wrapAttributes": false,
            "sortAttributes": true,
        }
    },
    "beautify.config": {
        "brace_style": "collapse,preserve-inline" //解决花括号中换行
    },
    "vetur.format.defaultFormatter.js": "vscode-typescript", //格式化js代码
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化html代码
    "editor.formatOnSave": true,
    "vetur.format.options.tabSize": 2,
    // "vetur.format.options.useTabs": true, //是否在每一行的末尾添加分号
    "editor.tabSize": 2,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "editor.minimap.enabled": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}

保存关闭编辑器重新打开项目运行保存文件就可以自动化根据eslint格式你的代码啦！最后，可根据个人喜好更爱settingjs.json的配置，如我的配置是"editor.tabSize": 2,你可以改为4，代表一个tab的距离。快去试试吧