VScode

自定义代码片段

快速生成代码块:https://snippet-generator.app/

image.png

我自己常用的代码块

  1. {
  2. // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  3. // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  4. // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  5. // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  6. // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  7. // Placeholders with the same ids are connected.
  8. // Example:
  9. // "Print to console": {
  10. // "scope": "javascript,typescript",
  11. // "prefix": "log",
  12. // "body": [
  13. // "console.log('$1');",
  14. // "$2"
  15. // ],
  16. // "description": "Log output to console"
  17. // }
  18. "vue3 template": {
  19. "prefix": "vue",
  20. "body": [
  21. "<template>",
  22. " <div>",
  23. " ",
  24. " </div>",
  25. "</template>",
  26. "",
  27. "<script lang='ts'>",
  28. "export default {",
  29. " inheritAttrs: false,",
  30. " name: 'yourName'",
  31. "}",
  32. "</script>",
  33. "",
  34. "<script setup lang='ts'>",
  35. "",
  36. "</script>",
  37. "",
  38. "<style lang='less'>",
  39. "",
  40. "</style>"
  41. ],
  42. "description": "vue3模板"
  43. },
  44. "Kfunction": {
  45. "prefix": ">",
  46. "body": ["()=>{", " $1", "}"],
  47. "description": "箭头函数"
  48. },
  49. "then + catch": {
  50. "body": [".then((res)=>{", " $1", "})", ".catch((err)=>{", " $2", "})"],
  51. "description": "Promise处理,then catch",
  52. "prefix": "then"
  53. },
  54. "then": {
  55. "body": [".then((res)=>{", " $1", "})"],
  56. "description": "Promise处理,then",
  57. "prefix": "then"
  58. },
  59. "new Promise": {
  60. "body": [
  61. "new Promise((resole,reject) =>{",
  62. " $1",
  63. " return resole();",
  64. "});"
  65. ],
  66. "description": "Promise对象",
  67. "prefix": "newpromise"
  68. },
  69. "console.log": {
  70. "body": ["console.log('$1',$1)"],
  71. "description": "控制台输出",
  72. "prefix": "clog"
  73. },
  74. "watch": {
  75. "body": [
  76. "watch(()=>{",
  77. " return ?",
  78. "},(newValue)=>{",
  79. "",
  80. "},{",
  81. " immediate:true,",
  82. " deep:true",
  83. "})"
  84. ],
  85. "description": "vue3 setup watch",
  86. "prefix": "watch"
  87. },
  88. }

自定义折叠区域

  1. //#region
  2. // VSCode里面,中间不管你什么代码,都会通过上面的注释和下面的注释折叠起来
  3. //#endregion

插件

Auto Close Tag:html自动加尾标签
Auto Import :自动帮你加引入其他模块
Auto Rename Tag:自动帮你重命名对应的html标签,比如你改头标签,它会自动改尾标签
Better Comments:更好的文档注释,多种颜色
Bookmarks:给代码加书签,后面点击书签可以快速跳到对应的位置,但是偶尔位置不准确
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code:vscode官方中文包
Draw.io Integration:可以在vscode里面画流程图,也可以用语雀
Prettier - Code formatter:Prettier插件,如果项目使用了Prettier,可以帮助你直接格式化代码
Project Manager:项目管理,直接保存项目,后面方便切换项目(体验更好的官方的工作区)
Vetur:Vue的代码提示,用了很多还是这个好用,唯一的缺点就是vue3 setup语法糖,检测不到我在template里使用了组件
Vue Language Features (Volar):尤大神推荐的Vue3代码提示,当前还不是很好用,有待发展