关于 Visual Studio Code 的说明
Visual Studio Code 的常见问题解答
引言
这是关于Visual Studio Code或简称VSC的笔记。
背景
在这份笔记中，我将尝试涵盖以下最常见问题（FAQs）。
- 如何安装VSC
- 如何安装Node，因为我将在VSC中创建两个Node示例
- 如何在VSC中打开文件夹以及如何在VSC中创建应用程序
- 如何打开终端以及如何在终端中发出命令
- 如何创建工作区并在工作区中管理多个应用程序
- 如何使用调试器以及如何在VSC中创建调试配置
- 我们可以配置VSC IDE、工作区和文件夹行为的文件摘要
此笔记是在运行Linux Mint 19.1 Cinnamon的虚拟机上编写的。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://node.org.cn/en/下载。在我下载时，我得到了“node-v10.16.0-linux-x64.tar.xz”版本。为了简单起见，我只是将其解压到我的home目录下的一个文件夹中。
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，它响应一个包含当前时间的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文件夹中添加调试配置。
终端
VSC中另一个方便的工具是命令终端。它允许我们在不离开VSC的情况下发出shell命令。我们可以使用CTL+'`'来切换终端的可见性，并使用CTL+SFT+'`'向终端添加额外的面板。
打开终端后，我们可以发出以下命令来安装node_modules并运行应用程序。
npm install
node app.js
如果我们在浏览器中访问https://:3000/time，我们可以看到Node应用程序的JSON响应。
工作区和多个根级文件夹
虽然可以在一个文件夹（或VSC选择不这样称呼的项目）上工作，但在许多情况下需要在多个文件夹上工作。在VSC中，引入了工作区术语来分组多个文件夹。在Eclipse IDE中，相同的机制也称为工作区。要将simple-node-api文件夹转换为工作区，我们可以单击文件 -> 另存工作区为... 打开保存工作区对话框窗口。
工作区文件只是一个带有.code-workspace扩展名的文件，我们可以将其保存在任何地方。您可能需要重新启动VSC以使其很好地保存和加载工作区，至少对于我使用的VSC版本是这样。
cd ~
mkdir -p Sandbox/vsc-example/simple-node-web
工作区首次保存时，它只有一个根级文件夹，即simple-node-api。如果我们要添加另一个文件夹，我们可以点击文件 -> 将文件夹添加到工作区... 来添加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向simple-node-api发出Ajax调用以获取服务器时间并将其显示在网页上。
<!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", "https://:3000/time", true);
xhttp.send();
};
setInterval(loadTime, 1000);
loadTime();
});
</script>
</head>
<body>
<div class="time" id="divTime"/>
</body>
</html>
在工作区中，我们可以使用命令终端来启动这两个应用程序。我们可以使用CTL+SFT+'`'来打开终端
然后我们可以为simple-node-api和simple-node-web发出以下命令来启动它们。
npm install
node app.js
如果现在我们在浏览器中访问https://:4000/index.html，我们可以看到当前时间显示在网页中。
调试和调试配置
简单调试
VSC原生支持Node应用程序，因此调试Node应用程序可以非常简单。只需选择文件并点击调试 => 启动调试即可开始调试。
如果我们在代码中设置一个断点并访问https://: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帮助我们完成以下工作的示例
- 通过直接在文件夹上工作来处理单个项目。
- 在一个工作区上工作，并在多个根级文件夹上工作。
- 调试一个简单的应用程序并创建调试配置以管理更复杂的调试情况。
对于基本用例，这些可能就是我们从VSC所需要的一切。现在我想总结一下我们可以配置VSC行为的文件。
用户级别设置
用户级别设置在~/.config/Code/User/settings.json文件中配置。它适用于用户启动的所有VSC实例。
{
"workbench.colorTheme": "Visual Studio Light",
"terminal.integrated.rendererType": "dom",
"files.enableTrash": false
}
工作区级别设置
工作区级别设置在vsc-example.code-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），您可能需要安装额外的扩展。
- 希望您喜欢我的帖子，也希望这篇笔记能以某种方式帮助到您。
历史
- 2019年4月29日：初版