及时掌握VSCode中前面常见软件组装及配备-JAVA编程网

WWW.lllT.neT这篇文章内容给大伙儿简单介绍一下VSCode中前面常见软件组装及配备。有一定的实用价值，有须要的小伙伴可以参照一下，期待对各位有些协助。

及时掌握VSCode中前面常见软件组装及配备

梳理这篇文章的突破口呢，是由于近期给小伙伴们分享了几种本人感觉功能强大的 VSCode 软件，結果有一些软件他组装了不容易配备。恰好趁近期有时间，把自己常见的软件和配备分类整理共享一下。【建议学习培训：《vscode教程》】

组装 Visual Studio Code

官网下载组装，组装结束后应用键盘快捷键ctrl shift x检索软件。

页面提升

1、简体中文版

组装 Chinese (Simplified) Language Pack for Visual Studio Code 软件，进行后重新启动 VS Code 就可以。

2. 背景图案

给你的编辑软件加上一个背景图案（适用 gif 文件格式）。

及时掌握VSCode中前面常见软件组装及配备

组装 background 软件，进行后重新启动编辑软件，VS Code 会出现如下所示提醒，忽视就可以。

及时掌握VSCode中前面常见软件组装及配备

这也是默认设置的实际效果：

及时掌握VSCode中前面常见软件组装及配备

假如想改动为自定的照片，可在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 就可以起效。

及时掌握VSCode中前面常见软件组装及配备

3. 注解装饰

为有所不同种类的代码注释加上不一样色调进行区别。适用各种各样文件属性的注解。

及时掌握VSCode中前面常见软件组装及配备

组装 Better Comments 就可以。

及时掌握VSCode中前面常见软件组装及配备

默认设置的功效和图中会有所区别，我们可以在settings.json中自主配备关键词、色调、款式。

储存后 restart vscode 就可以起效。

"better-comments.tags": [
    {
        "tag": "fix",                     // 关键词（不区别大小写字母），Better Comments 检验到关键词后才会将这方面注解变换款式
        "color": "#FF2D00",               // 文本色调
        "strikethrough": false,           // 是不是表明删除线
        "underline": false,               // 是不是表明下横线
        "backgroundColor": "transparent", // 背景色
        "bold": false,                    // 是不是字体加粗
        "italic": false                   // 是不是开启斜体字文本
    },
    ...好几个关键词配备
]

4. 引号着色

为编码中成对的引号设定不一样的色调高亮度，有利于阅读文章。

及时掌握VSCode中前面常见软件组装及配备

组装 Bracket Pair Colorizer 2 软件（相比于 Bracket Pair Colorizer，Bracket Pair Colorizer 2 的特性更优质）。

配备得话，可以在settings.json中再加上这一行："bracket-pair-colorizer-2.showBracketsInGutter": true，意思是在行号前表明匹配的引号，便捷精准定位。其他设定就没啥必需了。改动了setting.json后还记得要restart vscode哦！

及时掌握VSCode中前面常见软件组装及配备

5. 表明图片大小

组装 filesize 软件后，在通知栏表明现阶段文档的尺寸。

及时掌握VSCode中前面常见软件组装及配备

6. 缩近高亮度

突出显示文字前边的缩近，更替应用四种不一样的色调。

及时掌握VSCode中前面常见软件组装及配备

组装软件 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"
    ],
}

及时掌握VSCode中前面常见软件组装及配备

7. 文件图标

Material Icon Theme 软件，组装就可以。

及时掌握VSCode中前面常见软件组装及配备

语言表达适用

8. VUE 适用

Vetur 软件给予 Vue 英语的语法高亮度，编码精彩片段，全自动补齐，格式化代码等作用。

及时掌握VSCode中前面常见软件组装及配备

9. SVG

SVG 软件给予英语的语法高亮度，全自动补齐，文本文档提醒，颜色选择，URL 自动跳转，ID 迅速改动，SVG 浏览与导出来 PNG 等作用。

及时掌握VSCode中前面常见软件组装及配备

编码精彩片段

10. 30-seconds-of-code

根据 30-seconds-of-code 库的软件，给予一些简易好用的 JS 方式。你不但可以在项目中应用，与此同时它也是一份很好的学习材料。

及时掌握VSCode中前面常见软件组装及配备

组装结束后，在编辑软件中键入 30s 关键词，可能发生编码提醒，选定必须的 snippets 后，按住 Tab 键就可以。官方网文本文档中提议应用"editor.snippetSuggestions": "top"设定，意思是控制代码精彩片段与别的提议排序的部位。这一看本人要求，不设定也是可以的。我感觉默认设置的 "inline" 要功能强大些。

11. vscode-element-helper

一款根据 ElementUI 的全自动补齐软件。

及时掌握VSCode中前面常见软件组装及配备

12. HTML5 模版

给予了在全部web应用系统中采用的规范HTML样本编码。

及时掌握VSCode中前面常见软件组装及配备

组装 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从业同一新项目的好几个开发者的一致编号设计风格。

及时掌握VSCode中前面常见软件组装及配备

在新项目根目录下新创建一个.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。

及时掌握VSCode中前面常见软件组装及配备

在新项目网站根目录加上标准文档.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。

及时掌握VSCode中前面常见软件组装及配备

组装 Git Graph 软件，应用键盘快捷键Shift Alt G开启 Git Graph 网页页面。

及时掌握VSCode中前面常见软件组装及配备

16. Git 日志

一个强悍的 Git 日志可视化工具 GitLens — Git supercharged

及时掌握VSCode中前面常见软件组装及配备

组装结束后，每一行编码边上都是会表明日志，默认设置文件格式为：提交者改动日期 commit message

及时掌握VSCode中前面常见软件组装及配备

17. 新项目转换

储存新项目文件目录，便捷转换不一样新项目。

及时掌握VSCode中前面常见软件组装及配备

组装 Project Manager 软件。进行后空出一个 Project Manager 活动内容栏，已储存的新项目都是在这里边开展管理方法。常用命令如下所示：

及时掌握VSCode中前面常见软件组装及配备

18. npm 管理方法

npm 拓展适用运作 package.json 文档中界定的 npm 脚本制作，并适用依据 package.json 中界定的依靠项认证已安裝的控制模块。

及时掌握VSCode中前面常见软件组装及配备

当 package.json 中的 modules 发生下列状况时，软件会提醒提醒：

在 package.json 中界定但是沒有组装
已组装控制模块，可是却并没有在 package.json 中界定
已组装控制模块的版本信息与 package.json 中界定的版本信息不一致

常用工具

19. 便签管理方法

给你的新项目加上便签管理方法作用。

及时掌握VSCode中前面常见软件组装及配备

组装 Bookmarks 软件。组装结束后，活动内容栏会空出一个“便签”菜单栏，这儿会列举当今新项目下的全部便签。

及时掌握VSCode中前面常见软件组装及配备

加上/删掉便签：
- 键盘快捷键Ctrl Alt K
- 应用鼠标右键菜单，挑选“便签：电源开关”

便签间自动跳转：
- 上一个Ctrl Alt J。或是鼠标右键菜单，挑选“便签：跳高于一切一个”
- 下一个Ctrl Alt L。或是鼠标右键菜单，挑选“便签：跳至下一个”

列举全部便签：
- 活动内容栏查询
- F1 调成输入框，检索Bookmarks: List

为便签加上叙述：在活动内容栏中寻找便签，点一下编缉按键加上叙述信息内容。

及时掌握VSCode中前面常见软件组装及配备

20. 内嵌电脑浏览器

在 VSCode 内部结构的 Chrome 电脑浏览器。

及时掌握VSCode中前面常见软件组装及配备

组装 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运作调节，很有可能会发生如下所示不正确：

及时掌握VSCode中前面常见软件组装及配备

只必须先开启一个 Browser Preview 对话框，再运行调节就可以。

21. 一键转换取名文件格式

迅速改变当今挑选或当今英语单词的大小写字母。

及时掌握VSCode中前面常见软件组装及配备

组装结束后，运作相匹配的指令就可以：

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 中迅速运行代码

及时掌握VSCode中前面常见软件组装及配备

组装 Code Runner 后，可立即运作当今文档/当今选定的编码。运作但是会展现在“导出”控制面板中。

Crtl Alt N 运行代码

Ctrl Alt M 停止运行

Ctrl Alt L 挑选运行代码的语言表达

假如想运作 TS 编码，必须组装ts-node

npm install -g ts-node

23. 拼写检查

假如你的新项目中出現了相近userInfor,bulid,chorme那样的语汇，那麼你需要这一软件。假如你搞不懂我为何这样说，那麼你一定离不了这一软件。

及时掌握VSCode中前面常见软件组装及配备

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 中开启默认浏览器并搜索关键词，可编缉百度搜索引擎。

及时掌握VSCode中前面常见软件组装及配备

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。

及时掌握VSCode中前面常见软件组装及配备

在应用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 特性排列, 使我们的编码更为简洁明了雅致。

及时掌握VSCode中前面常见软件组装及配备

组装 CSScomb 软件。在settings.json中加上配备：

{
    "csscomb.formatOnSave": true, // 储存时全自动恢复出厂设置
    "csscomb.preset": "csscomb" // 恢复出厂设置模版
}

一定要配备"csscomb.preset"，它的初始值为{},假如不做配备，软件应用失效。官方网给予 3 种不一样配备（csscomb，zen 和 yandex）,也可自定一份配置文件。

应用官方网配备时，发觉排版设计有点儿问题，排列后如下图所示：

及时掌握VSCode中前面常见软件组装及配备

因而必须对官方网配备稍加改动。这儿以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 文档就可以。

及时掌握VSCode中前面常见软件组装及配备

27. 文件预览

在 VS Code 中，将电脑鼠标挪到文件路径上并点一下，可以在新的标签页开启相匹配的文档。而组装了 File Peek 后，可以开启一个文件预览对话框，浏览文档具体内容，并适用文件编辑。

及时掌握VSCode中前面常见软件组装及配备

将鼠标光标放进文件路径上，应用键盘快捷键F12开启浏览对话框，双击鼠标浏览对话框在浏览器主页开启。

及时掌握VSCode中前面常见软件组装及配备

28. vim

应用 vim 软件，在 VS Code 中应用 vim。

及时掌握VSCode中前面常见软件组装及配备

常见配备（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. 上班时间统计分析

及时掌握VSCode中前面常见软件组装及配备

WakaTime 这款软件可以全自动跟踪剖析你敲代码的时间。组装结束后，浏览 wakatime.com 申请注册一个账户，在设定 - 帐户中拷贝你的Secret API Key，返回 VS Code，按住F1检索WakaTime: Api Key，键入Secret API Key储存就可以。浏览 wakatime.com/dashboard 查询数据图表。

30. 查询 CSS 界定

CSS Peek ，跟踪至css样式表中 CSS class 和 id 界定。

及时掌握VSCode中前面常见软件组装及配备

31. class 智能化提醒

HTML CSS Support 让 html 标识上写 class 时，智能化提醒当今新项目所适用的款式。

及时掌握VSCode中前面常见软件组装及配备

32. HTML 标识名改动

Auto Rename Tag 全自动进行另一侧标识的同歩改动。适用在 .vue .js .md 等文档中改动。

及时掌握VSCode中前面常见软件组装及配备

33. 包囊标识

在选定文字外包囊一层 HTML 标识（默认设置为 p 标识，可配备）。

及时掌握VSCode中前面常见软件组装及配备

组装 htmltagwrap 软件，选定文字后应用键盘快捷键Alt W就可以建立一个表层标识。假如不希望应用默认设置的 p 标识，可自主变更配备："htmltagwrap.tag": "p"。

34. JS 代码优化

及时掌握VSCode中前面常见软件组装及配备

当在 JavaScript（或 TypeScript / Flow）中编缉编码时，JavaScript Booster 给予了各种各样编码实际操作（迅速修补）。

文档 - 首选项 - 键盘快捷方法 - 检索editor.action.quickFix，配备成你习惯性的键盘快捷键。

及时掌握VSCode中前面常见软件组装及配备

35. jsdoc 注解

一键生成 jsdoc 设计风格的涵数注解。

及时掌握VSCode中前面常见软件组装及配备

组装 jsdoc 软件后，选定一个涵数的主要参数, ctrl shift p 后键入gen jsdoc并挑选gen jsdoc指令, 就可以转化成 jsdoc 设计风格的涵数注解。

文档 - 首选项 - 键盘快捷方法 - 检索extension.genJSDoc，配备成你习惯性的键盘快捷键。

加上配备"jsdoc.author": "Author"，将@author设置成你的名字。

及时掌握VSCode中前面常见软件组装及配备

36. jsdoc 浏览

在网页中浏览根据 jsdoc 转化成的文本文档。

及时掌握VSCode中前面常见软件组装及配备

组装 Preview JSDOC 软件，ctrl shift P 后键入preview jsdoc并挑选Preview JSDoc: Open Browser指令。

及时掌握VSCode中前面常见软件组装及配备

37. open in browser

在网页中开启页面文件。

及时掌握VSCode中前面常见软件组装及配备

组装 open in browser 软件，开启页面文件，应用键盘快捷键Alt B在默认浏览器中开启当今网页页面，Shift Alt B挑选打开浏览器。

38. app测试

REST Client 容许您推送 HTTP post请求并立即在 VS Code 中查询回应。

及时掌握VSCode中前面常见软件组装及配备

组装软件后，新创建一个.http或.rest文档，随后撰写你的请求编码，点一下 Send Request，或是鼠标右键挑选 Send Request，或是立即用键盘快捷键Ctrl Alt R实行。

推送post请求后，会在底端通知栏表明Waiting情况，鼠标点击Waiting停止post请求。

同一个文档中的好几个post请求应用###隔开。

推送post请求（留意不一样 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:UsersDefaultDesktopdemo.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}}"
}
```
- post请求自变量
  用以引入某一个 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 post请求，还可以将 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
转化成编码精彩片段
鼠标光标坐落于某一post请求处时，鼠标右键挑选 Generate Code Snippet 或应用键盘快捷键Ctrl Alt C，就可以转化成当今post请求的指令精彩片段。适用多语种。

39. TODO 管理方法

在工作区域中检索并突出显示注解标识（比如 TODO 和 FIXME ），在活动内容栏 TODOs 对话框管理方法新项目中的注解标识。

及时掌握VSCode中前面常见软件组装及配备

组装 Todo Tree 软件，原始设定下实际效果如下所示：

及时掌握VSCode中前面常见软件组装及配备

自定设定：

{
  "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).*" // 配对正则表达式，要想配对几行注解中的标识名需改动此正则表达式
}

实际效果如下所示：

及时掌握VSCode中前面常见软件组装及配备

40. 制作流程表

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

及时掌握VSCode中前面常见软件组装及配备

组装软件后，可在 VS Code 中编缉.drawio、.dio、.drawio.svg或.drawio.png文档。

应用Draw.io: Convert To...指令变换格式文件。

及时掌握VSCode中前面常见软件组装及配备

41. 发送邮件

应用 MJML 软件在 VS Code 中编缉/推送电子邮箱。

及时掌握VSCode中前面常见软件组装及配备

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 邮箱网页版，打开设置 -> 帐户，寻找

及时掌握VSCode中前面常见软件组装及配备

依据官方网给予的表格实际操作就可以。其他电子邮箱相近。

在settings.json中加上下列配备，便于应用 Emmet 作用：

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

配备进行后，撰写你的.mjml文档，应用指令MJML: Send Email就可以取得成功发送邮件。

有关mjml英语的语法，点一下这儿查询官方网文本文档。

这儿给予一个简洁的周报模板：

及时掌握VSCode中前面常见软件组装及配备

<!-- 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 帐户开展多设备同歩。希望早日升级~

应用软件：

及时掌握VSCode中前面常见软件组装及配备

组装软件后，应用键盘快捷键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中前面常见软件组装及配备的详尽具体内容，大量请关心自学java网其他相关文章！

WWW.lllT.neT

标签：工具使用
下载本文：及时掌握VSCode中前面常见软件组装及配备.doc

声明：有的资源来自网络转载，版权归原作者所有，如有侵犯到您的权益请联系邮箱：our333@126.com我们将配合处理！

及时掌握VSCode中前面常见软件组装及配备

组装 Visual Studio Code

页面提升

1、简体中文版

2. 背景图案

3. 注解装饰

4. 引号着色

5. 表明图片大小

6. 缩近高亮度

7. 文件图标

语言表达适用

8. VUE 适用

9. SVG

编码精彩片段

10. 30-seconds-of-code

11. vscode-element-helper

12. HTML5 模版

项目风险管理

13. 统一编码设计风格

14. ESLint

15. Git 交互

16. Git 日志

17. 新项目转换

18. npm 管理方法

常用工具

19. 便签管理方法

20. 内嵌电脑浏览器

21. 一键转换取名文件格式

22. 程序执行

23. 拼写检查

24. 便捷检索

25. 取名武器

26. CSS 自动排序

27. 文件预览

28. vim

29. 上班时间统计分析

30. 查询 CSS 界定

31. class 智能化提醒

32. HTML 标识名改动

33. 包囊标识

34. JS 代码优化

35. jsdoc 注解

36. jsdoc 浏览

37. open in browser

38. app测试

39. TODO 管理方法

40. 制作流程表

41. 发送邮件

42. 设定同歩

共享13个好用VSCode软件，使你敲代码不会再头痛！！

javascript怎样设置报表高宽比

共享15个好用VSCode软件，赶紧来个人收藏吧！

详细说明vscode中配备PHP开发工具的方式