有关Visual Studio Code的说明

最新推荐文章于 2024-09-14 08:15:28 发布

寒冰屋

最新推荐文章于 2024-09-14 08:15:28 发布

阅读量717

点赞数

分类专栏：架构及框架文章标签： Visual Studio Code

原文链接：https://www.codeproject.com/Articles/3804660/A-Note-on-Visual-Studio-Code

版权

架构及框架专栏收录该内容

635 篇文章 16 订阅

订阅专栏

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

“.vscode”目录

终端(Terminal)

工作区(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），则可能需要安装其他扩展。
希望您喜欢我的帖子，也希望本文能对您有所帮助。

寒冰屋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录