插件清单

插件名称 用途 备注（快捷键）
koroFileHeader 添加文件注释
Auto Close Tag 自动添加HTML/XML关闭标记
Auto Rename Tag 自动修改匹配的 HTML 标签
Path Intellisense 输入文件路径时智能提示
Git History 查看git日志、文件历史记录、比较分支或提交
Git History Diff 查看git历史记录。查看提交文件的差异
Highlight Matching Tag 突出显示匹配的结束标记和开始标记
Open In Default Browser 在默认浏览器中打开文件
Vetur /Vue 3 Snippets / Vue TypeScript Snippets vue开发三件套
ESLint 、Prettier - Code formatter、 Prettier ESLint 前端开发代码规范自动检测
Todo Tree 显示TODO树
vscode-icons 文件图标
carbon-now-sh 将代码分享为图片
Codelf 给变量命名的网站
Turbo Console Log 一键 注释 / 启用 / 删除 所有 console.log。 快捷键：Control+Option+L
Regex Previewer 实时预览正则表达式的效果。
css-auto-prefix 自动添加 CSS 私有前缀。
CSS Peek 定位 CSS 类名
Minify 压缩 HTML、CSS、JS 代码。
Project manager 项目管理，可以随时切换
别名路径跳转 跳转别名命名的路径 按住cmd单击鼠标

编辑器参数配置

按照如下图所示，打开settings，快捷键（cmd+,）
image.png
点击这个按钮就能进入手动参数配置的页面
image.png
常用参数配置参考

  1. {
  2.     "typescript.locale": "zh-CN",
  3.     "editor.quickSuggestions": {
  4.         // 控制键入时是否应自动显示建议
  5.         "other": true,
  6.         "comments": true,
  7.         "strings": true
  8.     },
  9.     "window.zoomLevel": 0, // 调整窗口的缩放级别。原始大小是 0
  10.     "editor.fontSize": 14, // 显示的字体大小
  11.     "editor.tabSize": 2, // tab锁紧二个空格
  12.     "editor.insertSpaces": true,
  13.     "files.autoSave": "onFocusChange", // 控制已更新文件的自动保存,"onFocusChange" (编辑器失去焦点)
  14.     "editor.wordWrap": "on", // 是否一行太长自动换行
  15.     "emmet.triggerExpansionOnTab": true, // 是否启用Emmet展开缩写
  16.     "editor.renderWhitespace": "all", // 空格变成...
  17.     "eslint.validate": [
  18.         "javascript",
  19.         "javascriptreact",
  20.         "typescript",
  21.         "typescriptreact",
  22.         "html",
  23.         "vue"
  24.     ],
  25.     "editor.formatOnSave": true, // 每次保存的时候自动格式化
  26.     "prettier.singleQuote": true, // 使用单引号
  27.     "workbench.iconTheme": "material-icon-theme",
  28.     "[javascript]": {
  29.         "editor.defaultFormatter": "esbenp.prettier-vscode"
  30.     },
  31.     "[javascriptreact]": {
  32.         "editor.defaultFormatter": "esbenp.prettier-vscode"
  33.     },
  34.     "[jsonc]": {
  35.         "editor.defaultFormatter": "esbenp.prettier-vscode"
  36.     },
  37.     "[typescript]": {
  38.         "editor.defaultFormatter": "esbenp.prettier-vscode"
  39.     },
  40.     "[typescriptreact]": {
  41.         "editor.defaultFormatter": "esbenp.prettier-vscode"
  42.     },
  43.     "javascript.updateImportsOnFileMove.enabled": "always",
  44.     "typescript.updateImportsOnFileMove.enabled": "always",
  45.     "tslint.alwaysShowRuleFailuresAsWarnings": true,
  46.     "editor.formatOnPaste": true,
  47.     "path-intellisense.mappings": {
  48.         "@": "${workspaceRoot}/src"
  49.     },
  50.     "alias-skip.mappings": {
  51.         "@": "${workspaceRoot}/src"
  52.     },
  53.     "stylusSupremacy.insertColons": true, // 是否插入冒号
  54.     "stylusSupremacy.insertSemicolons": true, // 是否插入分好
  55.     "stylusSupremacy.insertBraces": true, // 是否插入大括号
  56.     "stylusSupremacy.insertNewLineAroundImports": true, // import之后是否换行
  57.     "stylusSupremacy.insertNewLineAroundBlocks": true, // 两个选择器中是否换行
  58.     "alias-skip.allowedsuffix": ["js", "vue", "jsx", "ts", "tsx"],
  59.     // 文件头部注释配置
  60.     "fileheader.customMade": {
  61.         "Author": "朽木白", // 创建文件的作者
  62.         "Date": "Do not edit", // 文件创建时间(不变)
  63.         "LastEditors": "朽木白", // 文件最后编辑者
  64.         "LastEditTime": "Do not edit", // 文件最后编辑时间
  65.         // 插件会自动将光标移动到Description选项中 方便输入 Description字段可以在specialOptions更改
  66.         "Description": "" // 介绍文件的作用、文件的入参、出参。
  67.     },
  68.     // 函数注释
  69.     "fileheader.cursorMode": {
  70.         "description": "", // 函数注释生成之后，光标移动到这里
  71.         "param": "", // param 开启函数参数自动提取 需要将光标放在函数行或者函数上方的空白行
  72.         "returns": "",
  73.     },
  74.     "fileheader.configObj": {
  75.         "autoAdd": false // 检测文件没有头部注释，自动添加文件头部注释
  76.     },
  77. }

常用代码片段配置

常用快捷键