vscode格式化代码以及插件推荐

通用插件

代码格式化

Vue 相关插件

vscode 字体设置

作为一名合格的码农, 肯定要有一个适合自己的字体, 搬起砖来也是兴趣满满的 ;

这里我给大家推荐一款字体 Fira code 下载地址

下载zip -- distr 文件夹 -- ttf文件夹 -- 全选 -- 右键 -- 安装

如果想看下字体的效果 百度搜一下还是很多的这里我就不给大家演示了😎 ；

然后打开 vscode -- 文件 -- 首选项 -- 设置 -- （右上角）打开 setting.json 新增以下代码

"editor.fontFamily": "Fira code",
// Fira code 特殊符号显示设置
"editor.fontLigatures": true,

vue工程的代码格式化

首先你要确保上面关于格式化和 vue 的插件你都已经下载了 ；

关于 eslint 的配置

在配置这个的时候还是挺坑的感觉 ；

• 出现了格式化冲突的问题， 去官网看了下大致就是说有些配置过时了还能用，打开某个的时候一定要关闭某一个不然会出现格式化两次的情况
• 出现了vue工程中不配置规则的话，不会完全走本地的配置，导致格式化以后还是满屏的黄色警告；

"eslint.options": {
    "extensions": [".js", ".vue", ".ts"]
},
// eslint 检测文件类型
"eslint.validate": ["html", "vue", "vue-html", "javascript", "typescript", "javascriptreact", "typescriptreact"],
// 二选一的配置 https://github.com/microsoft/vscode-eslint#settings-migration
"editor.formatOnSave": true,
// "editor.codeActionsOnSave": {
//   "source.fixAll": true
// },
// 忽略警告
"eslint.quiet": true,

关于prettier的配置

这个配置就没有什么好说的了，个人理解如果是个人开发为了方便还是直接在 vscode 中配置好比较省事；如果是多人合作其实本人还是建议在工程下建立格外的 prettier 配置文件比较好，毕竟这样做规范了多有成员；

// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 使用单引号
"prettier.singleQuote": true,
// prettier 设置单行最大字符数
"prettier.printWidth": 120,
// jsx 的 > 放到最后一行的末尾
"prettier.jsxBracketSameLine": true,
// jsx 使用双引号
"prettier.jsxSingleQuote": false,

关于vetur的配置

这个就说两种情况吧

• prettierhtml 其实官方不推荐的操作了推荐使用 js-beautify-html 大家可以查阅配置；我这反正也能用所以我也就没有再去细看配置（毕竟这是软实力没有多看点代码香😝）
• 关于 less 的格式化，格式比较乱的 less 还是可以格式化的， 但是由于插件中less默认中的就是 prettier 配置，为了在 js 中去除分号就导致了 less 保存时不会自动补全分号（算是个小遗憾，不过这就足够了，毕竟这个也只是辅助）

"vetur.format.defaultFormatter.html": "prettier", // prettyhtml
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.sass": "sass-formatter",
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "printWidth": 120,
        "semi": false, // 格式化不加分号
        "singleQuote": true // 格式化以单引号为主
     },
    "prettyhtml": {
        "semi": false,
        "printWidth": 120
    }
},
// vue 扩展的文件默认使用 prettier 进行格式化
"[vue]": {
	"editor.defaultFormatter": "esbenp.prettier-vscode"
}

完整的配置文件

内容有点多；可以展开后观看；

留在最后，温馨提示：在复制配置的同时，一定要注意时间节点，有可能插件升级了就不能用了，笔者在重装系统后直接复制之前的配置就不可用了；把自己小坑了一下

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "diffEditor.ignoreTrimWhitespace": true,
  "git.enableSmartCommit": true,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.activityBar.visible": false,
  "gitlens.gitCommands.closeOnFocusOut": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.wordWrapColumn": 120,
  "editor.mouseWheelZoom": true,
  "files.autoSave": "afterDelay",
  "editor.fontFamily": "Fira code, Source Code Pro",
  // Fira code 特殊符号显示设置
  "editor.fontLigatures": true,
  // 触控板可以x/y轴任意滚动
  "editor.scrollPredominantAxis": false,
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },
  "eslint.options": {
    "extensions": [".js", ".vue", ".ts"]
  },
  // eslint 检测文件类型  "vue-html",
  "eslint.validate": ["html", "vue", "javascript", "typescript", "javascriptreact", "typescriptreact"],
  // 二选一的配置 https://github.com/microsoft/vscode-eslint#settings-migration
  "editor.formatOnSave": true,
  // "editor.codeActionsOnSave": {
  //   "source.fixAll": true
  // },
  // 忽略警告
  "eslint.quiet": true,
  // prettier 设置语句末尾加分号
  "prettier.semi": false,
  // prettier 使用单引号
  "prettier.singleQuote": true,
  // prettier 设置单行最大字符数
  "prettier.printWidth": 120,
  // jsx 的 > 放到最后一行的末尾
  // "prettier.jsxBracketSameLine": true,
  // jsx 使用双引号
  "prettier.jsxSingleQuote": false, // prettyhtml
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 120,
      "semi": false, // 格式化不加分号
      "singleQuote": true // 格式化以单引号为主
    },
    "prettyhtml": {
      "semi": false,
      "printWidth": 120,
      "singleQuote": true
    }
  },
  // vue 扩展的文件默认使用 prettier 进行格式化
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.arrowParens": "avoid",
  "prettier.trailingComma": "none",
  "terminal.integrated.shell.windows": "D:\\tools\\git\\Git\\bin\\bash.exe",
  "explorer.confirmDelete": false
}

配置后还是不能成功 ?

如果是 vue 的项目你配置后还是不能成功的格式化的你程序, 此时可能是因为你的项目工程下存在了 .editorconfig 这个配置文件 , 关于此文件如何使用 ? 参考官网 , 为什么不能使用了呢, 原因就是 prettier 在 3.7 版本以后会默认优先读取项目根目录下的 editorconfig or prettier config , 所以想要解决这个问题, 要么删除 editconfig 要么就是在根目录再添加一个 .prettier 文件加一些自己额外的配置 ;