梳理这篇文章的突破口呢,是由于近期给小伙伴们分享了几种本人感觉功能强大的 VSCode 软件,結果有一些软件他组装了不容易配备。恰好趁近期有时间,把自己常见的软件和配备分类整理共享一下。【建议学习培训:《vscode教程》】
组装 Visual Studio Code
官网下载组装,组装结束后应用键盘快捷键ctrl shift x
检索软件。
页面提升
1、简体中文版
组装 Chinese (Simplified) Language Pack for Visual Studio Code 软件,进行后重新启动 VS Code 就可以。
2. 背景图案
给你的编辑软件加上一个背景图案(适用 gif 文件格式)。
组装 background 软件,进行后重新启动编辑软件,VS Code 会出现如下所示提醒,忽视就可以。
这也是默认设置的实际效果:
假如想改动为自定的照片,可在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 就可以起效。
3. 注解装饰
为有所不同种类的代码注释加上不一样色调进行区别。适用各种各样文件属性的注解。
组装 Better Comments 就可以。
默认设置的功效和图中会有所区别,我们可以在settings.json
中自主配备关键词、色调、款式。
储存后 restart vscode 就可以起效。
"better-comments.tags": [ { "tag": "fix", // 关键词(不区别大小写字母),Better Comments 检验到关键词后才会将这方面注解变换款式 "color": "#FF2D00", // 文本色调 "strikethrough": false, // 是不是表明删除线 "underline": false, // 是不是表明下横线 "backgroundColor": "transparent", // 背景色 "bold": false, // 是不是字体加粗 "italic": false // 是不是开启斜体字文本 }, ...好几个关键词配备 ]
4. 引号着色
为编码中成对的引号设定不一样的色调高亮度,有利于阅读文章。
组装 Bracket Pair Colorizer 2 软件(相比于 Bracket Pair Colorizer,Bracket Pair Colorizer 2 的特性更优质)。
配备得话,可以在settings.json
中再加上这一行:"bracket-pair-colorizer-2.showBracketsInGutter": true
,意思是在行号前表明匹配的引号,便捷精准定位。其他设定就没啥必需了。改动了setting.json
后还记得要restart vscode
哦!
5. 表明图片大小
组装 filesize 软件后,在通知栏表明现阶段文档的尺寸。
6. 缩近高亮度
突出显示文字前边的缩近,更替应用四种不一样的色调。
组装软件 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" ], }
7. 文件图标
Material Icon Theme 软件,组装就可以。
语言表达适用
8. VUE 适用
Vetur 软件给予 Vue 英语的语法高亮度,编码精彩片段,全自动补齐,格式化代码等作用。
9. SVG
SVG 软件给予英语的语法高亮度,全自动补齐,文本文档提醒,颜色选择,URL 自动跳转,ID 迅速改动,SVG 浏览与导出来 PNG 等作用。
编码精彩片段
10. 30-seconds-of-code
根据 30-seconds-of-code 库的软件,给予一些简易好用的 JS 方式。你不但可以在项目中应用,与此同时它也是一份很好的学习材料。
组装结束后,在编辑软件中 键入 30s 关键词,可能发生编码提醒,选定必须的 snippets 后,按住 Tab 键就可以。官方网文本文档中提议应用"editor.snippetSuggestions": "top"
设定,意思是控制代码精彩片段与别的提议排序的部位。这一看本人要求,不设定也是可以的。我感觉默认设置的 "inline" 要功能强大些。
11. vscode-element-helper
一款根据 ElementUI 的全自动补齐软件。
12. HTML5 模版
给予了在全部web应用系统中采用的规范HTML样本编码。
组装 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从业同一新项目的好几个开发者的一致编号设计风格。
在新项目根目录下新创建一个.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
。
在新项目网站根目录加上标准文档.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。
组装 Git Graph 软件,应用键盘快捷键Shift Alt G
开启 Git Graph 网页页面。
16. Git 日志
一个强悍的 Git 日志可视化工具 GitLens — Git supercharged
组装结束后,每一行编码边上都是会表明日志,默认设置文件格式为:提交者 改动日期 commit message
17. 新项目转换
储存新项目文件目录,便捷转换不一样新项目。
组装 Project Manager 软件。进行后空出一个 Project Manager 活动内容栏,已储存的新项目都是在这里边开展管理方法。常用命令如下所示:
18. npm 管理方法
npm 拓展适用运作 package.json 文档中界定的 npm 脚本制作,并适用依据 package.json 中界定的依靠项认证已安裝的控制模块。
当 package.json 中的 modules 发生下列状况时,软件会提醒提醒:
- 在 package.json 中界定但是沒有组装
- 已组装控制模块,可是却并没有在 package.json 中界定
- 已组装控制模块的版本信息与 package.json 中界定的版本信息不一致
常用工具
19. 便签管理方法
给你的新项目加上便签管理方法作用。
组装 Bookmarks 软件。组装结束后,活动内容栏会空出一个“便签”菜单栏,这儿会列举当今新项目下的全部便签。
加上/删掉便签:
- 键盘快捷键
Ctrl Alt K
- 应用鼠标右键菜单,挑选“便签:电源开关”
- 键盘快捷键
便签间自动跳转:
- 上一个
Ctrl Alt J
。或是鼠标右键菜单,挑选“便签:跳高于一切一个” - 下一个
Ctrl Alt L
。或是鼠标右键菜单,挑选“便签:跳至下一个”
- 上一个
列举全部便签:
- 活动内容栏查询
- F1 调成输入框,检索
Bookmarks: List
为便签加上叙述:在活动内容栏中寻找便签,点一下编缉按键加上叙述信息内容。
20. 内嵌电脑浏览器
在 VSCode 内部结构的 Chrome 电脑浏览器。
组装 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
运作调节,很有可能会发生如下所示不正确:
只必须先开启一个 Browser Preview 对话框,再运行调节就可以。
21. 一键转换取名文件格式
迅速改变当今挑选或当今英语单词的大小写字母。
组装结束后,运作相匹配的指令就可以:
- 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 中迅速运行代码
组装 Code Runner 后,可立即运作当今文档/当今选定的编码。运作但是会展现在“导出”控制面板中。
Crtl Alt N
运行代码
Ctrl Alt M
停止运行
Ctrl Alt L
挑选运行代码的语言表达
假如想运作 TS 编码,必须组装ts-node
npm install -g ts-node
23. 拼写检查
假如你的新项目中出現了相近userInfor
,bulid
,chorme
那样的语汇,那麼你需要这一软件。假如你搞不懂我为何这样说,那麼你一定离不了这一软件。
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 中开启默认浏览器并搜索关键词,可编缉百度搜索引擎。
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。
在应用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 特性排列, 使我们的编码更为简洁明了雅致。
组装 CSScomb 软件。在settings.json
中加上配备:
{ "csscomb.formatOnSave": true, // 储存时全自动恢复出厂设置 "csscomb.preset": "csscomb" // 恢复出厂设置模版 }
一定要配备"csscomb.preset"
,它的初始值为{}
,假如不做配备,软件应用失效。官方网给予 3 种不一样配备(csscomb,zen 和 yandex),也可自定一份配置文件。
应用官方网配备时,发觉排版设计有点儿问题,排列后如下图所示:
因而必须对官方网配备稍加改动。这儿以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 文档就可以。
27. 文件预览
在 VS Code 中,将电脑鼠标挪到文件路径上并点一下,可以在新的标签页开启相匹配的文档。而组装了 File Peek 后,可以开启一个文件预览对话框,浏览文档具体内容,并适用文件编辑。
将鼠标光标放进文件路径上,应用键盘快捷键F12
开启浏览对话框,双击鼠标浏览对话框在浏览器主页开启。
28. vim
应用 vim 软件,在 VS Code 中应用 vim。
常见配备(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. 上班时间统计分析
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 界定。
31. class 智能化提醒
HTML CSS Support 让 html 标识上写 class 时,智能化提醒当今新项目所适用的款式。
32. HTML 标识名改动
Auto Rename Tag 全自动进行另一侧标识的同歩改动。适用在 .vue
.js
.md
等文档中改动。
33. 包囊标识
在选定文字外包囊一层 HTML 标识(默认设置为 p 标识,可配备)。
组装 htmltagwrap 软件,选定文字后应用键盘快捷键Alt W
就可以建立一个表层标识。假如不希望应用默认设置的 p 标识,可自主变更配备:"htmltagwrap.tag": "p"
。
34. JS 代码优化
当在 JavaScript(或 TypeScript / Flow)中编缉编码时,JavaScript Booster 给予了各种各样编码实际操作(迅速修补)。
文档 - 首选项 - 键盘快捷方法 - 检索editor.action.quickFix
,配备成你习惯性的键盘快捷键。
35. jsdoc 注解
一键生成 jsdoc 设计风格的涵数注解。
组装 jsdoc 软件后,选定一个涵数的主要参数, ctrl shift p
后键入gen jsdoc
并挑选gen jsdoc
指令, 就可以转化成 jsdoc 设计风格的涵数注解。
文档 - 首选项 - 键盘快捷方法 - 检索extension.genJSDoc
,配备成你习惯性的键盘快捷键。
加上配备"jsdoc.author": "Author"
,将@author
设置成你的名字。
36. jsdoc 浏览
在网页中浏览根据 jsdoc 转化成的文本文档。
组装 Preview JSDOC 软件,ctrl shift P
后键入preview jsdoc
并挑选Preview JSDoc: Open Browser
指令。
37. open in browser
在网页中开启页面文件。
组装 open in browser 软件,开启页面文件,应用键盘快捷键Alt B
在默认浏览器中开启当今网页页面,Shift Alt B
挑选打开浏览器。
38. app测试
REST Client 容许您推送 HTTP post请求并立即在 VS Code 中查询回应。
组装软件后,新创建一个.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 对话框管理方法新项目中的注解标识。
组装 Todo Tree 软件,原始设定下实际效果如下所示:
自定设定:
{ "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).*" // 配对正则表达式,要想配对几行注解中的标识名需改动此正则表达式 }
实际效果如下所示:
40. 制作流程表
Draw.io Integration 软件将 Draw.io 集成化到 VS Code 中。
组装软件后,可在 VS Code 中编缉.drawio
、.dio
、.drawio.svg
或.drawio.png
文档。
应用Draw.io: Convert To...
指令变换格式文件。
41. 发送邮件
应用 MJML 软件在 VS Code 中编缉/推送电子邮箱。
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 邮箱网页版,打开设置 -> 帐户,寻找
依据官方网给予的表格实际操作就可以。其他电子邮箱相近。
在settings.json
中加上下列配备,便于应用 Emmet 作用:
{ "emmet.includeLanguages": { "mjml": "html", ...otherLanguages } }
配备进行后,撰写你的.mjml
文档,应用指令MJML: Send Email
就可以取得成功发送邮件。
有关mjml
英语的语法,点一下这儿查询官方网文本文档。
这儿给予一个简洁的周报模板:
<!-- 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"> </td> </tr> <tr class="line"> <td align="center" class="text-bold" colspan="6">危害进展情况的首要问题,提议对策</td> </tr> <tr class="line"> <td colspan="6"> </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"> </td> </tr> </mj-table> </mj-column> </mj-section> </mj-body> </mjml>
42. 设定同歩
不一样设备上的 VS Code 设定、软件、编码精彩片段同歩作用。
通常,开展 VS Code的配备同歩必须依靠第三方的 Settings Sync 软件和 github 帐户。如今,在 VS Code Insiders(预览版)里早已出示了内置的配备同歩作用,可以根据 Microsoft 帐户或 GitHub 帐户开展多设备同歩。希望早日升级~
应用软件:
组装软件后,应用键盘快捷键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声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!
原文地址:及时掌握VSCode中前面常见软件组装及配备发布于2021-12-11 14:27:01