目录

介绍

背景

安装VSC和Node

安装VSC

安装Node和NPM

在文件夹和“.vscode”及命令终端上工作

“.vscode”目录

终端(Terminal)

工作区(workspace)和多个根目录文件夹

调试和调试配置

简单调试

调试配置

设置文件在哪里

用户级别设置

工作区(workspace)级别设置

文件夹级别设置

兴趣点

  • 下载源代码4.8 KB

介绍

这是有关Visual Studio Code或简称VSC 的注释。

背景

本说明是针对运行Linux Mint 19.1 Cinnamon的VM编写的。Linux Mint 19.1 Cinnamon基于Ubuntu 18.04。

安装VSC和Node

安装VSC

根据说明，安装VSC的最简单方法是从此链接下载“ .deb软件包（64位）”，然后使用以下命令进行安装：

sudo apt install ./<file>.deb

或者，我们也可以手动添加Microsoft存储库。

curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64]
https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'

添加存储库后，我们可以使用以下命令来安装VSC。

sudo apt-get install apt-transport-https
sudo apt-get update
apt-cache policy code
sudo apt-get install code

如果需要，我们还可以选择特定版本的VSC进行安装。

sudo apt-get install code=1.33.0-1554390824

安装成功后，我们可以寻找“vsc”来启动VSC。

默认的颜色主题带有黑色背景。

因为我不喜欢黑色背景，所以将其更改为白色背景。

安装Node和NPM

有多种安装Node和NPM的方法，但我选择了一种简单的方法，直接从https://nodejs.org/en/下载。在下载时，我得到的版本是“node-v10.16.0-linux-x64.tar.xz ”。为了简单起见，我只是将其解压缩到主目录下的文件夹中。

Node和NPM的可执行文件位于“bin”文件夹中，因此我在“.profile”文件中添加了以下几行，以确保将“node-v10.16.0-linux-x64/bin”文件夹添加到我的可执行文件搜索路径。

PATH=".:$PATH"
PATH="/home/song/Development/node/node-v10.16.0-linux-x64/bin:$PATH"

如果您不熟悉NPM，则以下是一些常用的NPM命令：

npm -v
npm view -h
npm view npm
npm install -g npm@6.9.2
npm install -g npm
npm root -g

在文件夹和“.vscode”及命令终端上工作

尽管VSC选择了不同的调用方式，但VSC中的根目录文件夹实际上等效于其他IDE（例如Eclipse）中的项目。现在我们已经准备好VSC和Node，我们可以在VSC中创建一个小Node示例。在此示例中，我们将在“.vscode”文件夹和命令终端上获得一些动手经验。

cd ~
mkdir -p Sandbox/vsc-example/simple-node-api

创建“simple-node-api”文件夹后，从菜单“文件”->“打开文件夹...”打开simple-node-api文件夹。

对于此示例，我们只需要添加“package.json”文件和“app.js”文件。

{"name": "simple-node-example","version": "0.0.1","private": true,"dependencies": {"express": "4.16.4","errorhandler": "1.5.1","cors": "2.8.5"}
}

我们将公开一个GET API，该API响应具有当前时间的JSON对象。

let express = require('express'),http = require('http'),cors = require('cors'),errorhandler = require('errorhandler');let app = express();
app.set('port', 3000);app.use(function (req, res, next) {res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate');res.header('Expires', '-1');res.header('Pragma', 'no-cache');next();
});app.use(cors());app.get('/time', function (req, res) {let d = new Date();res.send({ time: d.toLocaleTimeString() });
})app.use(errorhandler());
http.createServer(app).listen(app.get('port'), function(){console.log('Express server listening on port ' + app.get('port'));
});

“.vscode”目录

在VSC中，我们可以通过“.vscode”文件夹中的文件来配置VSC如何管理文件夹。在此示例中，我将文件“settings.json” 放置在“.vscode”文件夹中。

{"files.exclude": {"**/package-lock.json": true,"**/.git": true,"**/.DS_Store": true,"**/node_modules": true,".vscode": true}
}

我明确指示VSC忽略“node_modules”文件夹，因为它对于VSC来说太大了。在VSC中，我们可以添加更多配置选项。在下一节中，我将向您展示如何在“.vscode”文件夹中添加调试配置。

终端(Terminal)

VSC中另一个方便的工具是命令终端。它使我们能够在不离开VSC的情况下发出shell命令。我们可以使用CTL +'`'切换终端的可见性，并使用CTL + SFT +'`'向终端添加其他面板。

打开终端后，我们可以发出以下命令来安装“node_modules”并运行该应用程序。

npm install
node app.js

如果在浏览器中转到“http://localhost:3000/time”，则可以看到来自节点应用程序的JSON响应。

工作区(workspace)和多个根目录文件夹

尽管可以在文件夹（或VSC选择不以这种方式调用的项目）上工作，但在许多情况下有必要在多个文件夹上工作。在VSC中，引入了术语工作区(workspace)来对多个文件夹进行分组。在Eclipse IDE中，相同的机制也称为工作区(workspace)。要将“simple-node-api”文件夹转换为工作区(workspace)，我们可以单击“文件”->“将工作区(workspace)另存为... ”以打开“保存工作区(workspace)”对话框窗口。

工作区(workspace)文件只是扩展名为“.code-workspace”的文件，我们可以将其保存在任何地方。您可能需要重新启动VSC，以使其很好地保存和加载工作区(workspace)，至少对于我使用的VSC版本而言。

cd ~
mkdir -p Sandbox/vsc-example/simple-node-web

第一次保存工作区(workspace)时，它只有一个根目录文件夹“simple-node-api”。如果要添加另一个文件夹，可以单击文件 ->“将文件夹添加到工作区(workspace)... ”以添加“simple-node-web”文件夹。

在“simple-node-web”项目中，我们将创建一个Node应用程序以显示HTML页面“index.html ”。

let express = require('express'),http = require('http'),path = require('path'),errorhandler = require('errorhandler');let app = express();app.set('port', 4000);app.use(function (req, res, next) {res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate');res.header('Expires', '-1');res.header('Pragma', 'no-cache');next();
});app.use(express.static(path.join(__dirname, 'client')));    app.use(errorhandler());
http.createServer(app).listen(app.get('port'), function(){console.log('Express server listening on port ' + app.get('port'));
});

“index.html”使Ajax调用“simple-node-api”以获取服务器时间并将其显示在网页上。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><style>.time {font-family:Verdana;font-weight:600;padding: 15px;height: 25px;background-color:honeydew;}</style><script>window.addEventListener('load', function() {let divTime = document.getElementById("divTime");let loadTime = function() {let xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState === 4) {divTime.innerHTML = (this.status === 200)?JSON.parse(this.responseText).time : '';}};xhttp.open("GET", "http://localhost:3000/time", true);xhttp.send();};setInterval(loadTime, 1000);loadTime();
});</script></head><body>
<div class="time" id="divTime"/>
</body>
</html>

在工作区(workspace)中，我们可以使用命令终端来启动两个应用程序。我们可以使用CTL + SFT +'`'打开终端：

然后，我们可以为“simple-node-api”和“simple-node-web” 发出以下命令以启动它们。

npm install
node app.js

如果现在在浏览器中转到“http://localhost:4000/index.html”，我们可以看到当前时间显示在网页上。

调试和调试配置

简单调试

VSC本机支持Node应用程序，因此调试Node应用程序非常简单。只需选择文件，然后单击“Debug” =>“Start Debugging”即可开始调试。

如果我们在代码中放置一个断点并转到“http://localhost:3000/time”，我们可以看到应用程序在该断点处停止。

调试配置

由于某些原因，如果VSC无法确定如何调试应用程序，或者我们想在工作空间中同时调试多个应用程序，则需要手动添加调试配置。

添加调试配置的简单方法是在相应的“.vscode”文件夹中放置一个名为“launch.json”的文件。以下是“simple-node-api”应用程序的启动配置。

{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "simple-node-api","program": "${workspaceFolder}/app.js"}]
}

以下是“simple-node-web”应用程序的启动配置。

{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "simple-node-web","program": "${workspaceFolder}/app.js"}]
}

准备好调试启动配置后，我们可以键入“CTL + Shift + D”以打开调试面板，然后选择配置以开始调试。我们可以同时启动多个配置。

设置文件在哪里

现在，我们已经看到了使用VSC帮助我们执行以下操作的示例：

  • 通过直接处理文件夹来处理单个项目
  • 在工作区(workspace)上工作并在多个根级别文件夹上工作
  • 调试简单的应用程序并创建调试配置以管理更复杂的调试情况

对于基本用例，这些可能就是VSC所需要的。现在，我想总结一下我们可以配置VSC行为的文件。

用户级别设置

用户级别设置在“~/.config/Code/User/settings.json”文件中进行配置。它适用于用户启动的所有VSC实例。

{"workbench.colorTheme": "Visual Studio Light","terminal.integrated.rendererType": "dom","files.enableTrash": false
}

工作区(workspace)级别设置

工作区(workspace)级别的设置在“vsc-example.code-workspace”文件中进行配置。它适用于工作区(workspace)中的所有根目录文件夹。

{"folders": [{"path": "simple-node-api"},{"path": "simple-node-web"}],"settings": {}
}

文件夹级别设置

文件夹级别的设置在相应的“.vccode”目录中的“settings.json”文件中进行配置。

{"files.exclude": {"**/package-lock.json": true,"**/.git": true,"**/.DS_Store": true,"**/node_modules": true}
}

VSC的行为由三个文件中的设置组合控制。

此外，如果要禁用“ctrl + w”以关闭整个VSC程序，则可以将以下内容添加到“keybindings.json”文件中。可通过“文件”->“首选项”->“键盘快捷键”访问该文件。

// Place your key bindings in this file to override the defaults
[{ "key": "ctrl+w", "when": "!editorIsOpen" }
]

兴趣点

  • 这是有关Visual Studio Code的说明。
  • 本说明仅涵盖VSC的基本用例。如果要使用其他语言（例如Python），则可能需要安装其他扩展。
  • 希望您喜欢我的帖子，也希望本文能对您有所帮助。

有关Visual Studio Code的说明相关推荐

  1. 离线安装Visual Studio Code插件

    在使用Visual Studio Code 开发时候,有时可能会碰到需要离线安装插件的情况.这时候就需要单独下载插件包,本文就以C/C++插件包为例说明如何离线安装Visual Studio Code ...

  2. 在Windows/Ubuntu上使用Visual Studio Code作为Go语言编辑器操作步骤

    下面以在Windows10上操作为例,在Ubuntu上操作步骤与windows一致: 1. 从 https://code.visualstudio.com/  下载windows上的最新发布版本1.2 ...

  3. Visual Studio Code Go 插件文档翻译

    此插件为 Go 语言在 VS Code 中开发提供了多种语言支持. 阅读版本变更日志了解此插件过去几个版本的更改内容. 1. 语言功能 (Language Features) 1.1 智能感知 (In ...

  4. 如何在Visual Studio Code中编译C ++代码

    PS: This was published on my Blog here. PS:这已发布在我的Blog 此处 . C++ is a statically-typed, free-form, (u ...

  5. Visual Studio Code常用插件

    名称 功能 Chinese (Simplified) Language Pack for Visual Studio Code 汉化 VSCode Auto Close Tag 自动为写的html标签 ...

  6. visual studio code 里调试运行 Python代码

    最近对微软的visual studio code 挺感兴趣的,微软的跨平台开发工具.轻量简洁. 版本迭代的也挺快的,截止16年8月2日已经1.3.1版本了,功能也愈加完善.(16年12月18日 已经, ...

  7. 程序员请收好：10个非常有用的Visual Studio Code插件

    作者 | Daan 译者 | Elle 出品 | CSDN(ID:CSDNnews) [导读]一个插件列表,可以让你的程序员生活变得轻松许多.无论你是经验丰富的开发人员还是刚刚开始第一份工作的初级开发 ...

  8. 直接上手！不容错过的Visual Studio Code十大扩展组件

    作者 | David Neal 译者 | 谭开朗,责编 | 屠敏 转载自CSDN(ID:CSDNnews) 各大平台与各种语言的开发人员都在使用Visual Studio Code,我对此感到惊讶.S ...

  9. Visual Studio Code为什么能这么牛X？

    点击上方"视学算法",选择"置顶或者星标" 你的关注意义重大! 作者:李少侠 链接:https://zhuanlan.zhihu.com/p/35303567 ...

  10. 程序员请收好：10个非常有用的 Visual Studio Code 插件!

    一个插件列表,可以让你的程序员生活变得轻松许多. 作者 | Daan 译者 | Elle 出品 | CSDN(ID:CSDNnews) 以下为译文: 无论你是经验丰富的开发人员还是刚刚开始第一份工作的 ...

最新文章

  1. 13.Zookeeper的java客户端API使用方法
  2. 创建对象的序列化文件 - SoapFormatter,binaryFormatter以及XmlSerializer序列化文件的比较...
  3. 以下是ECMAScript 2016、2017和2018中所有新增功能的示例
  4. Spring Boot 2.3.0 发布
  5. Problem C: 01字串
  6. java 代码重排_Java中指令重排
  7. 启用了文件索引，干脆连文件都找不到了
  8. pythonnumpy算术函数_python的numpy.prod函数运行实例详解
  9. 计算机服务里打印功能停止,win7系统电脑打印机print spooler服务总是自动停止的解决方法...
  10. 修正的判定/条件覆盖
  11. 小程序 tab 切换点击无效
  12. 【Stats】Jarque Bera test正态性检验
  13. 小妲己智能机器人要连接wifi吗_ZIB智伴机器人可以连WiFi吗 ZIB智伴机器人连接WiFi方法...
  14. 许三多和他的基金定投
  15. springboot整合jett实现模板excel数据导出
  16. 任务二：实现求平方根关键算法（30 分）求 n 以内（不包括 n）同时能被 3 和 7 整除的所有自然数之和的平方根 s，然后将结果s 输出。例如若 n 为 1000 时，则 s=153.909
  17. mysql8三种安装方式
  18. tweepy 根据推特ID爬取推特数据
  19. Mac本子下安装Maven的插件
  20. 最新盘点2014年英国留学费用最高的五所大学

热门文章

  1. 无限极业绩_2019中国保健品行业典型企业分析——无限极、康宝莱、汤臣倍健...
  2. layer 同步调用_YYText源码解读-YYText同步/异步渲染流程（一）—UIView与CALayer
  3. 精致的App登录页设计欣赏给你灵感
  4. 圣诞节平面设计师排版|首选手写字体素材，简单但非常好用。
  5. 唯美“光效”PNG免扣素材大集合，一眼爱上！
  6. Python使用yagmail库实现发送邮件功能
  7. virtio 网络的演化：原始virtio ＞ vhost-net(内核态) ＞ vhost-user(DPDK) ＞ vDPA
  8. DPDK服务核心（coremask）
  9. Java编写编译native方法
  10. php mysql导入excel_如何从PHP导入Excel文件到mysql数据库