eslint 无法格式化ts_vscode保存代码，自动按照eslint规范格式化代码设置

vscode保存代码，自动按照eslint规范格式化代码设置

编辑器代码风格一致，是前端代码规范的一部分。我们现在前端绝大部分都在使用eslint，或者将要把代码改为eslint，那么此时我们怎么方便使用这个规范呢，下面我来介绍一下使用vscode+eslint 自动保存，自动格式化的一种方式！

首先需要装一些vscode插件

eslint、Vetur、Prettier，具体的插件说明可参考作者之前的一篇文章。

vscode插件安装

安装完成后需要配置一下eslint，打开eslint的配置文件(左下角有个设置,点开搜索settings.json)

打开settings.jons，贴上如下配置，注意自己原有的vscode主题和字体等不要替换掉

{  "workbench.colorTheme": "One Monokai",  "editor.fontSize": 14,  "eslint.enable": true, //是否开启vscode的eslint  "eslint.autoFixOnSave": true, //是否在保存的时候自动fix eslint  "editor.formatOnSave": true, // #每次保存的时候自动格式化  "eslint.options": { //指定vscode的eslint所处理的文件的后缀    "extensions": [      ".js",      ".vue",      ".ts",      ".tsx"    ]  },  "eslint.validate": [ //确定校验准则    "javascript",    "javascriptreact",    {      "language": "html",      "autoFix": true    },    {      "language": "vue",      "autoFix": true    },    {      "language": "typescript",      "autoFix": true    },    {      "language": "typescriptreact",      "autoFix": true    }  ],  "files.autoSave": "off",  "files.associations": {    "*.wpy": "vue",    "*.wxml": "wxml",    "*.cjson": "jsonc",    "*.wxss": "css",    "*.wxs": "javascript",    "*.html": "html"  },  "emmet.includeLanguages": {    "wxml": "html"  },  "minapp-vscode.disableAutoConfig": true,  // vscode默认启用了根据文件类型自动设置tabsize的选项  "editor.detectIndentation": false,  // 重新设定tabsize  "editor.tabSize": 2,  //  #让prettier使用eslint的代码格式进行校验   "prettier.eslintIntegration": true,  //  #去掉代码结尾的分号   "prettier.semi": false,  //  #使用单引号替代双引号   "prettier.singleQuote": true,  //  #让函数(名)和后面的括号之间加个空格  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,  // #让vue中的js按编辑器自带的ts格式进行格式化   "vetur.format.defaultFormatter.js": "vscode-typescript",  "git.enableSmartCommit": true,  "editor.quickSuggestions": {    "strings": true  },  //一定要在vutur.defaultFormatterOptions参数中设置，单独修改prettier扩展的设置是无法解决这个问题的，因为perttier默认忽略了vue文件(事实上从忽略列表移除vue也不能解决这个问题)  "vetur.format.defaultFormatterOptions": {    "js-beautify-html": {      // force-aligned | force-expand-multiline      "wrap_attributes": "force-aligned"    },    "prettyhtml": {      "printWidth": 100,      "singleQuote": false,      "wrapAttributes": false,      "sortAttributes": true    },    "prettier": {      //  #去掉代码结尾的分号       "semi": false,      //  #使用单引号替代双引号       "singleQuote": true    }  },  // 插件KoroFileHeader  // 文件头部注释-快捷键crtl+alt+i(window),ctrl+cmd+t (mac)  "fileheader.customMade": {    "Descripttion": "",    //"version": "",    "Author": "voanit",    "Date": "Do not edit",    "LastEditors": "voanit",    "LastEditTime": "Do not Edit"  },  //函数注释-快捷键ctrl+alt+t (window), ctrl+alt+t(mac)  "fileheader.cursorMode": {    "name": "",    // "test": "test font",    // "msg": "",    "param": "",    "return": ""  },  //安装live Server插件  "liveServer.settings.donotVerifyTags": true,  "liveServer.settings.donotShowInfoMsg": true,  "liveServer.settings.NoBrowser": true,  "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器  "liveServer.settings.host": "127.0.0.1",  "liveServer.settings.port": 5000, //设置本地服务的端口号  "liveServer.settings.root": "/dist"}

接下来就可以愉快的使用自动保存eslint格式了。