vscode tools

基本功能

  • 键盘快捷键
  • 多种选择(多光标)
    在这里插入图片描述
    我之前用的是webstorm IDE,所以习惯了它们的快捷键,所以使用了这个extension:
    在这里插入图片描述

Proxy

VS Code具有与Google Chromium完全相同的代理服务器支持。

 // The proxy setting to use. If not set, will be inherited from the `http_proxy` and `https_proxy` environment variables.
  "http.proxy": "",
  // The value to send as the `Proxy-Authorization` header for every network request.
  "http.proxyAuthorization": null,
  // Controls whether the proxy server certificate should be verified against the list of supplied CAs.
  "http.proxyStrictSSL": true,
  // Use the proxy support for extensions.
  //  - off: Disable proxy support for extensions.
  //  - on: Enable proxy support for extensions.
  //  - override: Enable proxy support for extensions, override request options.
  "http.proxySupport": "override",
  // Controls whether CA certificates should be loaded from the OS. (On Windows and macOS a reload of the window is required after turning this off.)
  "http.systemCertificates": true,

Emmet

Emmet (即之前著名的Zen Coding) 是一个网页开发者工具,可以大大地提高你的HTML & CSS 开发效率。

Notice: This extension is bundled with Visual Studio Code. It can be disabled but not uninstalled.

// vscode.emmet【默认:开启】
"emmet.excludeLanguages": [
    "markdown"
  ], // Emmet缩写不应该扩展的一系列语言。
  // 要在默认情况下不可用的文件类型中启用Emmet缩写扩展,请使用emmet.includeLanguages设置:
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "razor": "html",
    "plaintext": "pug"
  }, // Emmet缩写在特定且不被默认支持的语言(默认的如:html)中生效。添加一个新语言与Emmet所支持语言的映射关系
  "emmet.triggerExpansionOnTab": true; // 使用Tab进行Emmet扩展
  "emmet.showExpandedAbbreviation": "never"; // 在suggestions中禁止显示Emmet
  // 如果编辑器全局禁用了suggestions功能,那么Emmet提示也不会起作用,需要手动输入“ ⌃Space ”触发展示
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  }, // 控制suggestions是否在键入时自动显示。
  // 为确保Emmet建议始终位于建议列表的顶部,请添加以下设置:
  "emmet.showSuggestionsAsSnippets": true,
  "editor.snippetSuggestions": "top"

VSCode已经内置支持了Emmet片段和扩展,不需要额外的添加三方的extension。Emmet 2.0已经支持了大部分额Emmet Actions。

如何扩展Emmet的缩写和代码片段

默认情况下,启用了Emmet的缩写和代码段扩展,如:html,halm,pug,slim,jsx,xml,xsl,css,scss,sass,less和stylus文件以及从上述任何一种继承的任何语言(如:handlebars和php)文件。

1. html代码段:在这里插入图片描述

2. jsx代码段:在这里插入图片描述### 3. css缩写:在这里插入图片描述

Snippets

code snippets是templates,可让您更轻松地输入重复的代码模式,例如循环或条件语句。

"emmet.showSuggestionsAsSnippets": true, // 配合suggestions使用最佳

在Visual Studio Code中,代码snippets会与其他suggestions一起出现在IntelliSense(⌃Space)中,并出现在专用代码片段选择器中(在命令面板中插入代码片段)。还支持制表符补全:使用"editor.tabCompletion": "on"启用它,键入一个片段前缀(触发文本),然后按Tab插入一个片段。
VS Code具有针对多种语言的内置片段,例如:JavaScript,TypeScript,Markdown和PHP。

制表符补全

1. 不支持制表符补全,需要根据suggestions手动选中

"editor.tabCompletion": "off", // [on off  onlySnippets] 默认是关闭的,

在这里插入图片描述

2. 支持制表符补全,点击tab自动智能补全代码【记忆性,不推荐】

"editor.tabCompletion": "on",

在这里插入图片描述

从市场上安装代码片段

以下是一些受欢迎的扩展,其中包括在其语言支持中的代码片段:
在这里插入图片描述

创建自己的片段

您可以轻松定义自己的片段,而无需任何扩展:
在这里插入图片描述

Command Line Interface (CLI)

Visual Studio Code具有内置的强大命令行界面,可让您控制启动编辑器的方式。您可以通过命令行选项(开关)打开文件,安装扩展名,更改显示语言并输出诊断。

code --help // cli help code -h
code --version
code --list-extensions
code -n/ code --new-window

// 从命令行启动code程序
code myProject
// 或者
cd myProject
code .

在这里插入图片描述

IntelliSense

IntelliSense是各种代码编辑功能的统称,包括:代码完成,参数信息,快速信息和成员列表。有时会用其他名称来调用IntelliSense功能,例如“代码完成”,“内容辅助”和“代码提示”:
在这里插入图片描述
Visual Studio Code IntelliSense提供了现成的JavaScript,TypeScript,JSON,HTML,CSS,SCSS和Less。
VS Code支持任何编程语言的IntelliSense基本都是:基于单词的补全,但也可以通过安装语言扩展将其配置为具有更丰富的IntelliSense。

市场上有很多的扩展,可以自行选择安装来扩展IntelliSense:
在这里插入图片描述

Debugging

Visual Studio Code的主要功能之一是其强大的调试支持。 VS Code的内置调试器有助于加速您的编辑,编译和调试循环。
在这里插入图片描述

版本控制(Version Control)

vscode.git // Git SCM集成
vscode.git-ui // Git SCM UI集成

Visual Studio Code具有集成的源代码控制,并且包括内置的Git支持。通过VS Code Marketplace上的扩展,可以使用许多其他源代码控制提供程序.
在这里插入图片描述

"git.enabled": false, // 禁用版本控制功能 【默认是开启的】

编辑器的这个UI功能就会失效。
在这里插入图片描述

在VS Code中使用GitHub

将GitHub与Visual Studio Code结合使用,可以共享源代码并与他人协作。内置的功能比较简单,更多功能需要去Market安装。

"github.gitAuthentication": true, // 控制是否在VS Code中为git命令启用自动GitHub身份验证。

通过GitHub Pull Requests and Issues扩展提供GitHub集成。
在这里插入图片描述
装完后,在左侧可以看到这个工具:
在这里插入图片描述

集成Terminal

在Visual Studio Code中,您可以首先从工作区的根开始打开一个集成终端。这很方便,因为您不必切换窗口或更改现有终端的状态即可执行快速的命令行任务。

"workbench.panel.defaultLocation": "bottom" ; // 默认的面板(terminal, debug console, output, problems)的位置(bottom, right, or left)

"terminal.explorerKind": "integrated", // 定制要启动的终端类型:integrated集成的;external外部的。
// 使用外部的
"terminal.external.windowsExec": "C:\\Windows\\System32\\cmd.exe", // 如果使用外部的, window平台的terminal
"terminal.external.osxExec": "Terminal.app", // 如果使用外部的, osx平台的terminal
"terminal.external.linuxExec": "xterm", // 如果使用外部的, wlinux平台的terminal
// 使用集成的,进行定制化
"terminal.integrated.fontSize": 12,

通过Tasks与External Tools集成:

存在许多工具可以自动执行诸如linting, building, packaging, testing或deploying software systems之类的任务。

  • 包括TypeScript编译器,
  • 诸如ESLint和TSLint之类的linter
  • 诸如Make,Ant,Gulp,Jake,Rake和MSBuild之类的构建系统
    在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值