优化编辑器

Better Comments 你可以使用不同的前缀来让注释显示为不同的颜色。 非常适合快速扫描并发现重要的代码片段。 若使用的话, 建议团队统一规范.

vscode插件推荐 - 图1

你是否经常在项目中出现查找是否缺失括号. 这是一件非常浪费时间的事情. 使用上面这款插件, 它可以帮你用不同的颜色标识括号, 是不是很棒.

vscode插件推荐 - 图2

通过颜色区分, 让你一眼就看出缩进，使得对齐更加具有可读性。

vscode插件推荐 - 图3

光标悬浮在图片路径上时，显示图片预览，这样我们在敲代码的时候一下子就能知道有没有引用了正确的图片或图标。

vscode插件推荐 - 图4

主题

vscode插件推荐 - 图5

  • vscode-perfect-dark-color-theme

image.png

版本控制

侧边栏添加git版本管理操作按钮，更好的管理git仓库

image.png

代码格式化

我们日常敲代码很多命名都是使用英文单词，粗心的小伙伴可能会拼错，这个插件就是单词拼写错时的拯救神器，它可以标志错的单词，还可以提示单词的正确拼法。有了它，就再也不用因为单词拼错找半天的 bug 了

vscode插件推荐 - 图8

运行代码工具

vscode插件推荐 - 图9

做前端开发的时候，我们需要打开浏览器进行预览和调试页面。这个插件就可以实现静态、动态页面的实时预览，保存就能看见页面更新，不需要手动去刷新。
vscode插件推荐 - 图10

可以把代码保存成美观的图片，主题不同，代码配色方案也不同，也可以自己设置边框颜色、大小、阴影，在教程或者文档中提供代码示例时挺有用的。

vscode插件推荐 - 图11

小程序相关

参考配置：https://www.yuque.com/docs/share/d5feace7-f10d-4b86-a919-1bf7eacc795b?#

上班摸鱼必备

参考配置：

  1. {
  2.     // 编辑器侧边栏
  3.     "workbench.sideBar.location": "right",
  4.     // 编辑器字体大小
  5.     "editor.fontSize": 17,
  6.     // 编辑器默认tab空格数
  7.     "editor.tabSize": 2,
  8.     //  自动格式化  
  9.     "editor.formatOnPaste": true,
  10.     "editor.formatOnSave": true,
  11.     "editor.formatOnType": true,
  12.     // 是否显示缩略图
  13.     "editor.minimap.enabled": false,
  14.     // 控制目录树缩进
  15.     "workbench.tree.indent": 4,
  16.     // js 格式化配置
  17.     "[javascript]": {
  18.         "editor.defaultFormatter": "vscode.typescript-language-features"
  19.     },
  20.     // html 格式化配置
  21.     "[html]": {
  22.         "editor.defaultFormatter": "vscode.html-language-features"
  23.     },
  24.     // json 格式化配置
  25.     "[json]": {
  26.         "editor.defaultFormatter": "HookyQR.beautify"
  27.     },
  28.     //!图标主题
  29.     "workbench.iconTheme": "material-icon-theme",
  30.     //! minapp 配置
  31.     "files.associations": {
  32.         "*.cjson": "jsonc",
  33.         "*.wxss": "css",
  34.         "*.wxs": "javascript"
  35.     },
  36.     "emmet.includeLanguages": {
  37.         "wxml": "html"
  38.     },
  39.     "minapp-vscode.disableAutoConfig": true,
  40.     "minapp-vscode.wxmlFormatter": "prettyHtml", //指定格式化工具
  41.     //! sync 同步配置
  42.     "sync.gist": "d59c918e156f7f0f4c16b1916958fa13",
  43.     //! 配置终端类型
  44.     "terminal.external.windowsExec": "D:\\develop\\Git\\bin\\bash.exe",
  45.     "terminal.integrated.shell.windows": "D:\\develop\\Git\\bin\\bash.exe",
  46.     //! shell插件 终端配置
  47.     "shellLauncher.shells.windows": [
  48.         {
  49.             "shell": "C:\\WINDOWS\\System32\\cmd.exe",
  50.             "label": "cmd"
  51.         },
  52.         {
  53.             "shell": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  54.             "label": "PowerShell"
  55.         },
  56.         {
  57.             "shell": "D:\\develop\\Git\\bin\\bash.exe",
  58.             "label": "Git bash"
  59.         },
  60.         {
  61.             "shell": "D:\\develop\\cmder\\Cmder.exe",
  62.             "label": "Cmder"
  63.         }
  64.     ],
  65.     //! easy less 配置
  66.     "less.compile": {
  67.         "compress": true, // true => remove surplus whitespace
  68.         "sourceMap": false, // true => generate source maps (.css.map files)
  69.         "out": true, // false => DON'T output .css files (overridable per-file, see below)
  70.         "outExt": ".wxss"
  71.     },
  72.     //! todo-tree 配置
  73.     "todo-tree.regex.regex": "((\\*|//|#|<!--|;|/\\*|^)\\s*($TAGS):|^\\s*- \\[ \\])",
  74.     "todo-tree.general.tags": [
  75.         "todo",
  76.         "tag",
  77.         "done",
  78.         "note",
  79.         "fix"
  80.     ],
  81.     "todo-tree.regex.regexCaseSensitive": false,
  82.     "todo-tree.tree.showInExplorer": true,
  83.     "todo-tree.highlights.defaultHighlight": {
  84.         /* "foreground": "white",
  85.     "background": "yellow",
  86.     "icon": "check",
  87.     "rulerColour": "yellow", */
  88.         "type": "line",
  89.         /* "iconColour": "yellow" */
  90.     },
  91.     "todo-tree.highlights.customHighlight": {
  92.         "todo": {
  93.             "foreground": "#f90",
  94.             "rulerColour": "#f90",
  95.             "iconColour": "#f90",
  96.         },
  97.         "done": {
  98.             "icon": "issue-closed",
  99.             "foreground": "#fdff03",
  100.             "rulerColour": "#fdff03",
  101.             "iconColour": "#fdff03"
  102.         },
  103.         "fix": {
  104.             "icon": "beaker",
  105.             "foreground": "#fb0200",
  106.             "rulerColour": "#fb0200",
  107.             "iconColour": "#fb0200",
  108.             "rulerLane": "full"
  109.         },
  110.         "tag": {
  111.             "icon": "tag",
  112.             "foreground": "#67cdfe",
  113.             "rulerColour": "#67cdfe",
  114.             "iconColour": "#67cdfe",
  115.             "rulerLane": "full"
  116.         },
  117.         "note": {
  118.             "foreground": "#02dc00",
  119.             "icon": "note",
  120.             "rulerColour": "#02dc00",
  121.             "iconColour ": "#02dc00"
  122.         }
  123.     },
  124. }