vscode代码格式化

第一种解决方案

1. ctrl + shift + X
2. eslint 安装
3. ctrl + , 或者打开C:UsersAdministratorAppDataRoamingCodeUsersetting.json 又或者 文件首选项设置设置json

{
   "editor.tabSize": 2, // 一个制表符等于的空格数。在 #editor.detectIndentation# 启用时，根据文件内容，该设置可能会被覆盖。
   "files.associations": { //配置语言的文件关联 (如: "*.extension": "html")。这些关联的优先级高于已安装语言的默认关联。
       "*.vue": "vue"
   },
   "eslint.autoFixOnSave": true, //开启或关闭“自动修复”功能。
   "eslint.options": { //eslint options对象，提供从命令行执行时通常传递给eslint的arg
       "extensions": [
           ".js",
           ".vue"
       ]
   },
   "eslint.validate": [ //应该由ESLint验证的语言数组
       "javascript", {
           "language": "vue",
           "autoFix": true
       }, "html",
       "vue"
   ],
   "search.exclude": { //配置在搜索中排除的文件和文件夹的 glob 模式。已经继承 #files.exclude# 设置的所有 glob 模式。可在此处阅读有关 glob 模式的详细信息。
       "**/node_modules": true,
       "**/bower_components": true,
       "**/dist": true
   },
   "emmet.syntaxProfiles": { //为指定的语法定义配置文件或使用带有特定规则的配置文件。
       "javascript": "jsx",
       "vue": "html",
       "vue-html": "html"
   },
   "git.confirmSync": false, // 同步 Git 存储库前请先进行确认
   "window.zoomLevel": 0, //调整窗口的缩放级别。原始大小是 0，每次递增(例如 1)或递减(例如 -1)表示放大或缩小 20%。也可以输入小数以便以更精细的粒度调整缩放级别。
   "editor.renderWhitespace": "boundary", // 控制编辑器在空白字符上显示符号的方式。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, //控制是否在编辑器中显示 CodeLens。
   "editor.snippetSuggestions": "top", //控制代码片段是否与其他建议一起显示及其排列的位置。top: 在其他建议上方显示代码片段建议。    
   "search.followSymlinks": false, //控制是否在搜索中跟踪符号链接。
   "workbench.colorTheme": "Visual Studio Light", //指定用在工作台中的颜色主题。
   "workbench.startupEditor": "newUntitledFile", //在没有从上一会话中恢复出信息的情况下，控制启动时显示的编辑器。   newUntitledFile: 打开新的无标题文件 (仅在打开空工作区时适用)。


   "[html]": { //针对某种语言，配置替代编辑器设置。
       "editor.defaultFormatter": "HookyQR.beautify"
   },
   "terminal.integrated.shell.windows": "C:\Windows\System32\cmd.exe", //终端在 Windows 上使用的 Shell 的路径。
   "[javascript]": { //针对某种语言，配置替代编辑器设置。
       "editor.defaultFormatter": "vscode.typescript-language-features"
   },
}

5. OK