当前位置 : 主页 > 编程语言 > 其它开发 >

详细了解VSCode中前端常用插件安装及配置

来源：互联网 收集：自由互联 发布时间：2021-08-12
本篇文章给大家详细介绍一下VSCode中前端常用插件安装及配置。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 整理这篇文章的契机呢，是因为最近给小伙伴安
本篇文章给大家详细介绍一下VSCode中前端常用插件安装及配置。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

整理这篇文章的契机呢，是因为最近给小伙伴安利了几款个人觉得好用的 VSCode 插件，结果有些插件他安装了不会配置。刚好趁最近有空，把自己常用的插件和配置整理出来分享一下。【推荐学习：《vscode教程》】

安装 Visual Studio Code

官网下载安装，安装完成后使用快捷键ctrl + shift + x搜索插件。

界面优化

1、汉化

1.png

安装 Chinese (Simplified) Language Pack for Visual Studio Code 插件，完成后重启 VS Code 即可。

2. 背景图片

为你的编辑器添加一个背景图片（支持 gif 格式）。

2.png

安装 background 插件，完成后重启编辑器，VS Code 会有如下提示，忽略即可。

3.png

这是默认的效果：

4.png

如果想修改为自定义的图片，可在settings.json中添加如下修改：

{
    "background.useDefault": false, // 是否使用默认图片
    "background.customImages": [    // 自定义图片地址，可使用网络图片
        "C:/Users/images/1.png",
        "C:/Users/images/2.png",
        "C:/Users/images/3.png"
    ],
    "background.style": {           // css 样式
        "opacity": 0.4
    }
}

保存后 restart vscode 即可生效。

5.png

3. 注释美化

为不同类型的代码注释添加不同颜色加以区分。支持各种文件类型的注释。

6.png

安装 Better Comments 即可。

7.png

默认的效果和上图会有所区别，我们可以在settings.json中自行配置关键字、颜色、样式。

保存后 restart vscode 即可生效。

"better-comments.tags": [
    {
        "tag": "fix",                     // 关键字（不区分大小写），Better Comments 检测到关键字后才会将这行注释转换样式
        "color": "#FF2D00",               // 文字颜色
        "strikethrough": false,           // 是否显示删除线
        "underline": false,               // 是否显示下划线
        "backgroundColor": "transparent", // 背景颜色
        "bold": false,                    // 是否加粗
        "italic": false                   // 是否启用斜体文字
    },
    ...多个关键字配置
]

4. 括号上色

为代码中成对的括号设置不同的颜色高亮，便于阅读。

8.png

安装 Bracket Pair Colorizer 2 插件（相较于 Bracket Pair Colorizer，Bracket Pair Colorizer 2 的性能更优）。

配置的话，可以在settings.json中加上这一行："bracket-pair-colorizer-2.showBracketsInGutter": true，意思是在行号前显示配对的括号，方便定位。其它设置就没啥必要了。修改了setting.json后记得要restart vscode哦！

9.png

5. 显示文件大小

安装 filesize 插件后，在状态栏显示当前文件的大小。

10.png

11.png

6. 缩进高亮

高亮显示文本前面的缩进，交替使用四种不同的颜色。

12.png

安装插件 indent-rainbow

配置：

{
    // 高亮颜色
    "indentRainbow.colors": [
        "rgba(40,140,160,0.3)",
        "rgba(40,160,140,0.3)",
        "rgba(60,140,140,0.3)",
        "rgba(60,160,160,0.3)"
    ],
    // tabSize 错误时的高亮颜色
    "indentRainbow.errorColor": "rgba(128,32,32,0.6)",
    // 混用空格和 tab 缩进时的高亮颜色
    "indentRainbow.tabmixColor": "rgba(128,32,96,0.6)",
    // 需要高亮显示的文件类型
    "indentRainbow.includedLanguages": [
        "vue",
        "html"
    ],
}

13.png

7. 文件图标

Material Icon Theme 插件，安装即可。

14.png

语言支持

8. VUE 支持

Vetur 插件提供 Vue 语法高亮，代码片段，自动补全，格式化代码等功能。

1.png

9. SVG

SVG 插件提供语法高亮，自动补全，文档提示，颜色选择，URL 跳转，ID 快速修改，SVG 预览与导出 PNG 等功能。

2.png

3-1.gif

代码片段

10. 30-seconds-of-code

基于 30-seconds-of-code 库的插件，提供一些简单实用的 JS 方法。你不仅可以在项目中使用，同时它也是一份不错的学习资料。

4.png

安装完成后，在编辑器中 输入 30s 关键字，将会出现代码提示，选中需要的 snippets 后，按下 Tab 键即可。官方文档中建议使用"editor.snippetSuggestions": "top"设置，意思是控制代码片段与其他建议排列的位置。这个看个人需求，不设置也是可以的。我感觉默认的 "inline" 要好用些。

11. vscode-element-helper

一款基于 ElementUI 的自动补全插件。

5.png

12. HTML5 模板

提供了在所有web应用程序中使用的标准HTML样板代码。

6.png

安装 HTML Boilerplate 插件，在.html文件中输入html5，选择提示的html5-boilerplate，将生成如下的模板：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
  </head>
  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    
    <script src="" async defer></script>
  </body>
</html>

项目管理

13. 统一代码风格

EditorConfig 有助于维护跨多个编辑器和IDE从事同一项目的多个开发人员的一致编码风格。

7.png

在项目根目录下新建一个.editorconfig文件，该文件用来定义项目的编码规范，并且其优先级比编辑器自身的设置要高。安装 EditorConfig for VS Code 插件后，保存/格式化文件时.editorconfig中的配置将应用到编辑文件中。注意，格式化规则一定要和各种 lint 规则保持一致。

# 如果未指定 root = true，则 EditorConfig 将继续在项目外部查找 .editorconfig 文件。
root = true

# 设置文件字符集
charset = utf-8

# 以下配置适用文件类型，可对不同文件类型设置不同规则
[*.{js,jsx,ts,tsx,vue,scss,json}]

# 保存时将换行符转换为 LF
end_of_line = lf

# 缩进格式
indent_style = space
indent_size = 2

# 保存时自动删除行尾的空白字符
trim_trailing_whitespace = true

# 保存时在文件末尾插入空白行
insert_final_newline = true

14. ESLint

代码格式检查工具，安装 ESLint 插件之前，需要运行npm install -g eslint。

8.png

在项目根目录添加规则文件.eslintrc.js，插件将根据其中的规则检查代码，具体配置请看这里，以下是一个简单示例：

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true
  },
  extends: [
    'standard'
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 11
  },
  rules: { }
}

如果不想让工具检查某个文件或某行代码，可在代码前写入注释/* eslint-disable */禁用。

如果需要忽略多个文件的 lint 检查，可在项目根目录创建一个.eslintignore文件，写在该文件内的目录/文件将被忽略。

build
node_modules
doc

在settings.json中加入下面的配置，保存时尝试修复错误：

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

有这些配置基本上就够了，Prettier什么的没啥必要。

15. Git 可视化

VS Code 中的 SourceTree。

9.png

安装 Git Graph 插件，使用快捷键Shift + Alt + G打开 Git Graph 页面。

10-1.gif

16. Git 日志

一个强大的 Git 日志管理工具 GitLens — Git supercharged

11.png

安装完成后，每一行代码旁边都会显示日志，默认格式为：提交者 + 修改日期 + commit message

12.png

13.png

17. 项目切换

保存项目目录，方便切换不同项目。

14.png

安装 Project Manager 插件。完成后多出一个 Project Manager 活动栏，已保存的项目都在这里面进行管理。常用命令如下：

15.png

18. npm 管理

npm 扩展支持运行 package.json 文件中定义的 npm 脚本，并支持根据 package.json 中定义的依赖项验证已安装的模块。

16.png

当 package.json 中的 modules 出现以下情况时，插件会提示警告：

  • 在 package.json 中定义了却没有安装
  • 已安装模块，但是却没有在 package.json 中定义
  • 已安装模块的版本号与 package.json 中定义的版本号不一致

实用工具

19. 书签管理

为你的项目添加书签管理功能。

17.png

安装 Bookmarks 插件。安装完成后，活动栏会多出一个“书签”菜单，这里会列出当前项目下的所有书签。

18.png

  • 添加/删除书签：

    • 快捷键Ctrl + Alt + K
    • 使用鼠标右键菜单，选择“书签：开关”

  • 书签间跳转：

    • 上一个Ctrl + Alt + J。或者鼠标右键菜单，选择“书签：跳至上一个”
    • 下一个Ctrl + Alt + L。或者鼠标右键菜单，选择“书签：跳至下一个”

  • 列出所有书签：

    • 活动栏查看
    • F1 调出搜索框，搜索Bookmarks: List

  • 为书签添加描述：在活动栏中找到书签，点击编辑按钮添加描述信息。

19.png

20. 内置浏览器

在 VSCode 内部的 Chrome 浏览器。

20.png

安装 Browser Preview 插件，完成后左侧活动栏会多出一个 “Browser Preview” 菜单，点击菜单即可在编辑器中打开一个浏览器标签页。使用此插件的前提是：你必需先安装 Google Chrome 浏览器。

settings.json中添加"browser-preview.startUrl": "http://localhost:8080"可设置默认打开的页面地址。

如果安装了 Debugger for Chrome 插件，在.vscode/launch.json中写入以下配置，即可在Browser Preview中启用调试。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "browser-preview",
      "request": "attach",
      "name": "Browser Preview: Attach"
    },
    {
      "type": "browser-preview",
      "request": "launch",
      "name": "Browser Preview: Launch",
      "url": "http://localhost:8080"
    }
  ]
}

按下F5运行调试，可能会出现如下错误：

21.png

只需要先打开一个 Browser Preview 窗口，再运行调试即可。

21. 一键切换命名格式

快速更改当前选择或当前单词的大小写。

22.png

安装完成后，运行对应的命令即可：

  • Change Case Commands: 列出所有更改案例命令，如果只有一个单词被选中，将附带预览功能
  • Change Case Camel: 改为驼峰格式，用下一个单词的首字母大写表示的分隔符转换为字符串
  • Change Case Constant: 转换为大写字母，下划线分隔字符串
  • Change Case Dot: 转换为小写，句点分隔的字符串
  • Change Case Kebab: 转换为小写字母，用 "-" 分隔的字符串
  • Change Case Lower: 转换为小写字符串
  • Change Case LowerFirst: 转换为首字母小写的字符串
  • Change Case No: 转换不带任何大小写的字符串（小写字母，空格分隔）
  • Change Case Param: 转换为小写字母，用 "-" 分隔的字符串
  • Change Case Pascal: 首字母大写的驼峰格式
  • Change Case.Path: 转换为小写、斜杠分隔的字符串
  • Change Case Sentence: 转换为小写（第一个单词首字母大写）的空格分隔的字符串
  • Change Case Snake: 转换小写，下划线分隔的字符串
  • Change Case Swap: 转换为字符串，每个字符大小写颠倒
  • Change Case Title: 转换为以空格分隔的字符串，每个单词的首字符大写
  • Change Case Upper: 转换为大写字符串
  • extension.changeCase.upperFirst: 转换为首字母大写的字符串

22. 代码运行

在 VS Code 中快速运行代码

23.png

安装 Code Runner 后，可直接运行当前文件/当前选中的代码。运行结果会展示在“输出”面板中。

Crtl + Alt + N 运行代码

Ctrl + Alt + M 停止运行

Ctrl + Alt + L 选择运行代码的语言

如果想运行 TS 代码，需要安装ts-node

npm install -g ts-node

23. 拼写检查

如果你的项目中出现了类似userInfor,bulid,chorme这样的词汇，那么你需要这个插件。如果你不明白我为什么这样说，那么你绝对离不开这个插件。

24.png

Code Spell Checker 这个插件可以检查代码中的拼写错误，在拼写错误的单词下会有下划线提示。在“问题”面板中会列出项目中所有的拼写错误。

但是有些词汇我们并不希望它提示错误，比如readonly这种网络词汇。那么我们可以在settings.json中添加如下设置：

{
    "cSpell.userWords": ["readonly", ...otherWords]
}

当然，你也可以通过在文件中添加注释来禁用检查：

  • /* cSpell:disable */
  • /* spell-checker: disable */
  • /* spellchecker: disable */
  • /* cspell: disable-line */
  • /* cspell: disable-next-line */

启用检查：

  • /* cSpell:enable */
  • /* spell-checker: enable */
  • /* spellchecker: enable */

24. 快捷搜索

在 VS Code 中打开默认浏览器并搜索关键字，可编辑搜索引擎。

25.png

CodeBing 插件安装完成后，使用快捷键Ctrl + Alt + F即可使用。但是，为了使用起来更方便，我们来修改一点点设置：

首先就是修改快捷键，先后按下Ctrl + K,Ctrl + S打开快捷键设置页面，搜索codebing.search将键绑定改为 Alt + F（个人习惯）。

在说明文档里可以看到，作者提供了如下默认配置，如果有需要可以自行修改，至于它有什么用，请往下看。

{
    "codebing.searchProviders": {
        "b": "https://www.bing.com/search?q={query}",
        "g": "https://www.google.com/search?q={query}",
        "yh": "https://search.yahoo.com/search?p={query}",
        "ddg": "https://duckduckgo.com/?q={query}",
        "wiki": "https://en.wikipedia.org/wiki/{query}",
        "yt": "https://www.youtube.com/results?search_query={query}",
        "twit": "https://twitter.com/search?q={query}",
        "gh": "https://github.com/search?utf8=✓&q={query}",
        "so": "https://stackoverflow.com/search?q={query}"
    }
}

然后打开settings.json，添加配置项："codebing.defaultProvider": "so"，这里的值就是上面配置的搜索引擎的快捷方式。

可以考虑再添加这条配置："codebing.noInputBoxIfTextSelected": true，意思是当使用搜索命令时存在鼠标选中文本时，不再弹出搜索框，而是直接搜索鼠标选中内容。

现在就可以愉快的使用啦：

  • 没有选中文本时，按下快捷键Alt + F，在弹出的输入框中输入内容，回车。
  • 在输入框中可以使用快捷方式 + 空格指定搜索引擎。比如输入“g vue”将使用谷歌搜索 vue。
  • 鼠标选中文本，按下快捷键，直接搜索选中内容。

25. 命名神器

如果你有命名困难，可以尝试一下 Codelf。

26.png

在使用Codelf插件时，发现该插件只是在默认浏览器打开了这个网址（Codelf）并搜索关键字。所以我们完全可以不安装这个插件，通过配置CodeBing实现相同的效果。

在settings.json中添加如下设置：

{
    "codebing.searchProviders": {
        "c": "https://unbug.github.io/codelf/#{query}"
    }
}

然后使用快捷方式 + 空格指定搜索引擎的方式（例如：输入“c 用户”）发起Codelf搜索。

同样的，添加以下设置使用百度翻译功能：

{
    "codebing.searchProviders": {
        "tec": "https://fanyi.baidu.com/#en/zh/{query}",
        "tce": "https://fanyi.baidu.com/#zh/en/{query}"
    }
}

26. CSS 自动排序

为 CSS 属性排序, 让我们的代码更加简洁优雅。

27.png

安装 CSScomb 插件。在settings.json中添加配置：

{
    "csscomb.formatOnSave": true, // 保存时自动格式化
    "csscomb.preset": "csscomb" // 格式化模板
}

一定要配置"csscomb.preset"，它的默认值为{},如果不做配置，插件使用无效。官方提供 3 种不同配置（csscomb，zen 和 yandex）,也可自定义一份配置文件。

使用官方配置时，发现排版有点问题，排序后如下图所示：

28.png

因此需要对官方配置稍作修改。这里以csscomb为例。

  • 首先删除settings.json中"csscomb.preset": "csscomb"这行配置，然后在项目根目录新建一个csscomb.json文件（或者也可以直接设置"csscomb.preset"的值为你的自定义 JSON 对象）。
  • 复制官方配置文件内容到csscomb.json。
  • 修改如下：
// 修改缩进格式
+ "block-indent": "  ",
- "block-indent": "    ",
// 花括号前不换行
+ "space-before-opening-brace": " ",
- "space-before-opening-brace": "\n",
// CSS 声明之间插入换行符
+ "space-between-declarations": "\n",

然后再次保存我们的 CSS 文件即可。

29.png

27. 文件预览

在 VS Code 中，将鼠标移至文件路径上并点击，可以在新的标签页打开对应的文件。而安装了 File Peek 后，可以打开一个文件预览窗口，预览文件内容，并支持文件编辑。

1.png

将鼠标光标放到文件路径上，使用快捷键F12打开预览窗口，双击预览窗口在新标签页打开。

2.png

28. vim

使用 vim 插件，在 VS Code 中使用 vim。

3.png

常用配置（settings.json）：

1、vim.handleKeys 控制某个按键/按键组合是否由 VSCodeVim 扩展处理。比如，启用 vim 扩展后ctrl + F快捷键被替换为向下翻页，如果想要保留原有的搜索功能，可设置此项：

  "vim.handleKeys": {
    "<C-f>": false
}

2、"vim.startInInsertMode": true 以插入模式而不是普通模式启动。

3、"vim.visualstar": true 在visual模式下，按下 * 键或者 # 键搜索当前选中内容。

4、"vim.useSystemClipboard": true 将 vim 插件复制的内容同步到系统剪切板，比如yy，dd命令。

5、"vim.hlsearch": true 高亮显示与当前搜索匹配的所有文本。

6、"vim.insertModeKeyBindings"/"vim.normalModeKeyBindings"/"vim.visualModeKeyBindings" insert 模式 / normal 模式 / visual 模式下的按键绑定。

"vim.insertModeKeyBindings": [
    // insert 模式下，连按两下 j 键进入 normal 模式。
    {
      "before": ["j", "j"],
      "after": ["<Esc>"]
    }
  ],
  "vim.normalModeKeyBindingsNonRecursive": [
    // normal 模式，先后按下 <leader>，d 键，等同于 dd 命令（剪切当前行）。
    {
      "before": ["<leader>", "d"],
      "after": ["d", "d"]
    }
  ]

7、"vim.leader": "<space>" 自定义 <leader> 键，默认为“\”。

8、"vim.easymotion": true 启用 vim-easymotion 插件。

9、"editor.lineNumbers": "relative" 将行号显示为与光标相隔的行数。

29. 工作时间统计

4.png

WakaTime 这款插件可以自动追踪分析你写代码的时长。安装完成后，访问 wakatime.com 注册一个账号，在设置 - 账户中复制你的Secret API Key，回到 VS Code，按下F1搜索WakaTime: Api Key，输入Secret API Key保存即可。访问 wakatime.com/dashboard 查看统计图表。

30. 查看 CSS 定义

CSS Peek ，追踪至样式表中 CSS class 和 id 定义。

5.png

6.gif

31. class 智能提示

HTML CSS Support 让 html 标签上写 class 时，智能提示当前项目所支持的样式。

7.png

8.png

32. HTML 标签名修改

Auto Rename Tag 自动完成另一侧标签的同步修改。支持在 .vue .js .md 等文件中修改。

9.png

10.gif

33. 包裹标签

在选中文本外包裹一层 HTML 标签（默认为 p 标签，可配置）。

11.png

安装 htmltagwrap 插件，选中文本后使用快捷键Alt + W即可创建一个外层标签。如果不想使用默认的 p 标签，可自行更改配置："htmltagwrap.tag": "p"。

34. JS 代码重构

12.png

当在 JavaScript（或 TypeScript / Flow）中编辑代码时，JavaScript Booster 提供了各种代码操作（快速修复）。

文件 - 首选项 - 键盘快捷方式 - 搜索editor.action.quickFix，配置成你习惯的快捷键。

13.gif

35. jsdoc 注释

一键生成 jsdoc 风格的函数注释。

14.png

安装 jsdoc 插件后，选中一个函数的参数, ctrl + shift + p 后输入gen jsdoc并选择gen jsdoc命令, 即可生成 jsdoc 风格的函数注释。

文件 - 首选项 - 键盘快捷方式 - 搜索extension.genJSDoc，配置成你习惯的快捷键。

添加配置"jsdoc.author": "Author"，将@author设置成你的名称。

15.gif

36. jsdoc 预览

在浏览器中预览基于 jsdoc 生成的文档。

16.png

安装 Preview JSDOC 插件，ctrl + shift + P 后输入preview jsdoc并选择Preview JSDoc: Open Browser命令。

17.png

37. open in browser

在浏览器中打开页面文件。

18.png

安装 open in browser 插件，打开页面文件，使用快捷键Alt + B在默认浏览器中打开当前页面，Shift + Alt + B选择浏览器打开。

38. 接口测试

REST Client 允许您发送 HTTP 请求并直接在 VS Code 中查看响应。

19.png

安装插件后，新建一个.http或.rest文件，然后编写你的请求代码，点击 Send Request，或者右键选择 Send Request，或者直接用快捷键Ctrl + Alt + R执行。

发送请求后，会在底部状态栏显示Waiting状态，鼠标单击Waiting终止请求。

同一个文件中的多个请求使用###分隔。

  • 发送请求（注意不同 Content-Type 时的传参方式）：

    GET http://dummy.restapiexample.com/api/v1/employees HTTP/1.1
Content-Type: application/json
    POST http://dummy.restapiexample.com/api/v1/create HTTP/1.1
Content-Type: application/json

{
  "name": "seyin",
  "age": "26"
}
    POST http://api.apishop.net/common/disease/queryDiseaseListByKeyword
Content-Type: application/x-www-form-urlencoded

apiKey=HSE5UZLe81xxxxxxxxxxxxxxxxxxx49bb4c46c5ae89963
&page=1
&pageSize=10
&keyword=感冒
    POST https://example.com/comments HTTP/1.1
Content-Type: application/xml
Authorization: token xxx

< C:\Users\Default\Desktop\demo.xml

  • 变量

    • 环境变量

      在settings.json中设置环境变量：

      {
  "rest-client.environmentVariables": {
    "$shared": {},
    "local": {
      "host": "http://localhost:8080",
      "token": "test token"
    },
    "prod": {
      "host": "http://dummy.restapiexample.com",
      "token": "prod token"
    }
  }
}

      使用快捷键Ctrl + Alt + E切换不同环境。

      使用环境变量：

      GET {{host}}/api/v1/employees HTTP/1.1
Content-Type: application/json

    • 文件变量

      声明方式为@key = value，使用方式为{{key}}。并且像 JS 一样存在变量提升。

      @baseUrl = {{host}}/api/v1
@contentType = application/json
@name = seyin
@age = 26
### API TEST
# 创建用户
POST {{baseUrl}}/create HTTP/1.1
content-type: {{contentType}}

{
  "name": "{{name}}",
  "age": "{{age}}"
}

    • 请求变量

      用于引用某一个 Request 的数据，声明方式为# @name requestName，使用方式为{{requestName.(response|request).(body|headers).(*|JSONPath|XPath|Header Name)}}。

      @baseUrl = {{host}}/api/v1
@contentType = application/json
@name = seyin
@age = 26
### API TEST
# 创建用户
# @name createUser
POST {{baseUrl}}/create HTTP/1.1
content-type: {{contentType}}

{
  "name": "{{name}}",
  "age": "{{age}}"
}

### 删除创建的用户
@id = {{createUser.response.body.data.id}}
DELETE {{baseUrl}}/delete/{{id}} HTTP/1.1

    • 系统变量

      系统变量提供了一组预定义的变量，格式为{{$variableName}}。这里列举部分常用的系统变量，更多内容参考官方文档。

      • {{$guid}} 唯一标识
      • {{$dotenv [%]variableName}} 返回.http文件同一目录中的.env文件中的环境变量值（声明方式为variableName = value）
      • {{$randomInt min max}} 返回介于 min（包括）和 max（不包括）之间的随机整数
      • {{timestamp [offset option]}} 添加 UTC 时间戳。您甚至可以根据当前时间指定任何日期时间，格式为{{\timestamp number option}}，例如，表示3小时前，只需{{$timestamp -3 h}};要表示后天，只需{{$timestamp 2d}}。
      • {{datetime rfc1123|iso8601|"custom format"|'custom format' [offset option]}} 添加 ISO8601，RFC1123 或自定义显示格式的日期时间字符串。 您甚至可以指定相对于当前日期的日期时间，类似于时间戳，例如：{{\datetime iso8601 1 y}}，以 ISO8601 格式表示一年后的日期。 如果指定自定义格式，则将其用单引号或双引号引起来，例如：{{$datetime "DD-MM-YYYY" 1 y}}。 日期是使用 Day.js 格式化的。
      POST {{baseUrl}}/create HTTP/1.1
content-type: application/json

{
  "name": "{{$dotenv USERNAME}}",
  "guid": "{{$guid}}",
  "age": "{{$randomInt 10 30}}",
  "date": "{{$datetime iso8601 1 y}}"
}

  • cURL Request

    REST Client 支持发送 cURL 请求，也可以将 RFC 2616 Request 一键转换为 cURL 格式（右键选择 Copy Request As cURL）。

     curl --request POST --url http://api.apishop.net/common/disease/queryDiseaseListByKeyword --header 'content-type: application/x-www-form-urlencoded' --header 'user-agent: vscode-restclient' --data page=1 --data pageSize=10 --data 'keyword=感冒'
    • -X, --request
    • -L, --location, --url
    • -H, --header(no @ support)
    • -I, --head
    • -b, --cookie(no cookie jar file support)
    • -u, --user(Basic auth support only)
    • -d, --data, --data-ascii,--data-binary

  • 生成代码片段

    光标位于某一请求上时，右键选择 Generate Code Snippet 或使用快捷键Ctrl + Alt + C，即可生成当前请求的代码片段。支持多种语言。

39. TODO 管理

在工作区中搜索并高亮显示注释标签（例如 TODO 和 FIXME ），在活动栏 TODOs 窗口管理项目中的注释标签。

20.png

安装 Todo Tree 插件，初始设置下效果如下：

21.png

自定义设置：

{
  "todo-tree.highlights.customHighlight": { // 为每个标签设置样式
    "TODO": {
      "icon": "tasklist", // 图标
      "foreground": "#ff8c00", // 文字颜色
      "background": "transparant", // 背景颜色
      "iconColour": "#ff8c00" // 图标颜色
    },
    "FIXME": {
      "icon": "alert",
      "foreground": "white",
      "background": "#FF2D00",
      "iconColour": "#FF2D00"
    },
    "BUG": {
      "icon": "bug",
      "foreground": "white",
      "background": "#FF2D00",
      "iconColour": "#FF2D00"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "#98c379",
      "background": "transparant",
      "iconColour": "#98c379"
    },
    "HACK": {
      "icon": "beaker",
      "iconColour": "#abb2bf"
    },
    "XXX": {
      "icon": "question",
      "foreground": "#3498DB",
      "background": "transparant",
      "iconColour": "#3498DB"
    }
  },
  "todo-tree.highlights.defaultHighlight": { // 全局样式配置
    "type": "text" // 高亮类型 tag text tag-and-comment text-and-comment line whole-line 
  },
  "todo-tree.general.statusBar": "current file", // 在状态栏中显示的内容-没有(none)，总计数(total)，每个标签的计数(tags)，前三个标签的计数(前三个)或仅当前文件的计数(当前文件)。
  "todo-tree.general.tagGroups": { // 别名分组
    "FIXME": [ // 将多个标记设置为同一组，共享 todo-tree.highlights.customHighlight 的样式
      "FIXME",
      "FIX" // 这里自定义的标记必需在 todo-tree.general.tags 中配置
    ]
  },
  "todo-tree.general.tags": [ // 插件匹配的标记名
    "XXX", // 标识处代码虽然实现了功能，但是实现的方法有待商榷。
    "TODO", // 说明代码还未完成。应当包含下一步要做的事情。
    "NOTE", // 说明代码的工作方式。
    "HACK", // 表明代码实现走了一个捷径。应当包含为何使用hack的原因。这也可能表明该问题可能会有更好的解决办法。
    "FIXME", // 说明代码是有问题的并应尽快修复。
    "FIX",
    "BUG" // BUG
  ],
  "todo-tree.regex.regex": "(\\s*\\*\\s*|\\s*\/\/\\s*|\\s*<!--\\s*)($TAGS).*" // 匹配正则，想要匹配多行注释中的标记名需修改此正则
}

效果如下：

22.png

40. 绘制流程图

Draw.io Integration 插件将 Draw.io 集成到 VS Code 中。

23.png

安装插件后，可在 VS Code 中编辑.drawio、.dio、.drawio.svg或.drawio.png文件。

使用Draw.io: Convert To...命令转换文件格式。

24-1.gif

41. 发送邮件

使用 MJML 插件在 VS Code 中编辑/发送电子邮件。

25.png

MJMJ 可以基于 Nodemailer 或 Mailjet 发送邮件，这里以 Nodemailer 为示例配置，使用 QQ 邮箱作为发件箱。

{
  "mjml.mailFromName": "seyin", // 发件人
  "mjml.mailSender": "24xxxx68@qq.com", // 发件人邮箱，必需和登录邮箱一致
  "mjml.nodemailer": { // Nodemailer 配置
    "host": "smtp.qq.com",
    "port": 465,
    "secure": true,
    "auth": {
      "user": "24xxxx068@qq.com", // 和发件人邮箱一致
      "pass": "xxxxxxxx"
    }
  },
  "mjml.mailRecipients": "zhangsan@163.com", // 默认收件人
  "mjml.mailer": "nodemailer" // 使用 Nodemailer 还是 Mailjet 发送邮件
}

关于 QQ 邮箱第三方登录问题（nodemailer 配置中的 host port 是什么？），登录 QQ 邮箱网页版，打开设置 -> 账户，找到

26.png

根据官方提供的文档操作即可。其它邮箱类似。

在settings.json中添加以下配置，以便使用 Emmet 功能：

{
	"emmet.includeLanguages": {
        "mjml": "html",
        ...otherLanguages
    }
}

配置完成后，编写你的.mjml文件，使用命令MJML: Send Email即可成功发送邮件。

关于mjml语法，点击这里查看官方文档。

这里提供一个简单的周报模板：

27.png

<!-- header.mjml -->
<mj-style>
  .done {
    color: #98c379;
  }

  .doing {
    color: #ff8c00;
  }

  .text-content {
    letter-spacing: 1px;
    line-height: 2;
  }

  .text-bold {
    font-weight: bold;
  }

  .first-line td {
    border-top: 1px solid #eee;
  }

  .line td {
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 12px;
    padding-right: 0;
  }

  .line td:nth-child(1) {
    border-left: 1px solid #eee;
  }
</mj-style>
<!-- mail.mjml -->
<mjml>
  <mj-head>
    <mj-include path="./header.mjml" />
  </mj-head>
  <mj-body background-color="#F4F4F4" color="#55575d" font-family="Arial, sans-serif">
    <mj-section background-url="https://s1.ax1x.com/2020/08/03/aa9BVS.png" background-size="cover" background-repeat="no-repeat">
      <mj-column width="600px">
        <mj-image align="center" src="https://mirror-gold-cdn.xitu.io/168e09c2212512f820f?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" width="50px" height="50px" border-radius="50px" padding="10px 0 0 14px" border="1px solid white" />
      </mj-column>
      <mj-column>
        <mj-text align="center" font-size="20px" font-weight="bold" color="white" font-family="Helvetica Neue">
          TeamSecret
        </mj-text>
        <mj-text align="center" font-size="12px" color="white" font-family="Helvetica Neue">
          前端开发工程师
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-divider border-color="#f4f4f4"></mj-divider>
    <mj-section background-color="#fff" background-repeat="no-repeat">
      <mj-column width="100%">
        <mj-table>
          <tr class="first-line line">
            <td class="text-bold">项目名</td>
            <td>xxxx 管理系统</td>
            <td class="text-bold">项目进度</td>
            <td colspan="3">系统设计阶段</td>
          </tr>
          <tr class="line">
            <td class="text-bold">负责人</td>
            <td>张三</td>
            <td class="text-bold">起止日期</td>
            <td colspan="3">2020/02/20 - 2020/02/20</td>
          </tr>
        </mj-table>
        <mj-table>
          <tr class="line first-line">
            <td align="center" class="text-bold" colspan="6">本周工作内容</td>
          </tr>
          <tr class="line">
            <td class="text-bold">项目/系统</td>
            <td class="text-bold" colspan="4">工作内容</td>
            <td class="text-bold">完成情况</td>
          </tr>
          <tr class="line">
            <td rowspan="2">xxxx 系统</td>
            <td class="done" colspan="4">xxxxxxxxxxxx</td>
            <td>已完成</td>
          </tr>
          <tr class="line">
            <td class="doing" colspan="4">xxxxxxxxxxxxxx</td>
            <td>80%</td>
          </tr>
          <tr class="line">
            <td align="center" class="text-bold" colspan="6">未完成事项及原因</td>
          </tr>
          <tr class="line">
            <td colspan="6">&nbsp;</td>
          </tr>
          <tr class="line">
            <td align="center" class="text-bold" colspan="6">影响工作进展的主要问题，建议措施</td>
          </tr>
          <tr class="line">
            <td colspan="6">&nbsp;</td>
          </tr>
        </mj-table>
        <mj-table>
          <tr class="first-line line">
            <td align="center" class="text-bold" colspan="6">下周工作计划</td>
          </tr>
          <tr class="line">
            <td class="text-bold">项目/系统</td>
            <td class="text-bold" colspan="2">工作内容</td>
            <td class="text-bold">计划开始日期</td>
            <td class="text-bold">计划完成日期</td>
            <td class="text-bold">需要配合部门/人员</td>
          </tr>
          <tr class="line">
            <td>xxxx 系统</td>
            <td colspan="2">工作计划工作计划工作计划工作计划</td>
            <td>2020/02/20</td>
            <td>2020/02/20</td>
            <td>张三</td>
          </tr>
          <tr class="line">
            <td align="center" class="text-bold" colspan="6">备注事宜</td>
          </tr>
          <tr class="line">
            <td colspan="6">&nbsp;</td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

42. 设置同步

不同机器上的 VS Code 设置、插件、代码片段同步功能。

通常，进行 VS Code的配置同步需要借助第三方的 Settings Sync 插件和 github 账户。现在，在 VS Code Insiders（预览版）里已经提供了自带的配置同步功能，可以通过 Microsoft 账户或 GitHub 账户进行多机器同步。期待早日更新~

使用插件：

28.png

安装插件后，使用快捷键Shift + Alt + U上传设置，如果是首次使用，将弹出一个欢迎页面，点击页面中的LOGIN WITH GITHUB按钮，此时会打开浏览器，输入 GitHub 账号登录完成授权。然后回到 VS Code ，此时插件已经读取了您的 Gist，有没有都没关系，点击 SKIP 按钮会新建一个新的 GistId，再次按下快捷键Shift + Alt + U即可上传配置到 GitHub 账户。使用快捷键Shift + Alt + D下载远程配置到本地。

在最新的 VS Code Insiders（预览版）中，提供了自带的同步设置，只需要点击活动栏下方的设置图标，单击Turn on Setting Sync...然后按照提示登录你的 GitHub 或 Microsoft 账号即可。

更多编程相关知识，请访问：编程视频！！

以上就是详细了解VSCode中前端常用插件安装及配置的详细内容，更多请关注自由互联其它相关文章！

上一篇：浅谈VSCode中Webview的使用方法
下一篇：VSCode中一些常用插件和快捷键，助你提高开发效率！！
网友评论
相关栏目
最近更新
热门文章