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
  3. // VSCode里面，中间不管你什么代码，都会通过上面的注释和下面的注释折叠起来
  5. //#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代码提示，当前还不是很好用，有待发展