目录
介绍
这是有关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 [email protected]
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），则可能需要安装其他扩展。
- 希望您喜欢我的帖子，也希望本文能对您有所帮助。
