Visual Studio Code 的安装说明，以及推荐的延伸模组 (Windows/Linux)

微软开发的 Visual Studio Code (简称 VS Code) 是一套非常热门的“编辑器”! VS Code 跨平台，且开放原始码。它虽然仅是一个轻量版的编辑器，却可经由安装延伸模组来支援程式码语法突显、侦错、自动补全、重构、Markdown...等琳瑯满目功能，打造你梦想中的 IDE (整合开发环境)。

VS Code 默认仅支援 JavaScript、TypeScript、CSS、HTML，同样能透过下载延伸模组来支援 Python、C/C++、Java、Perl、Go... 等其他程式语言。

安装 VS Code

下载网址:

for Windows:

下载 .exe 执行档来安装...没什么特别要写的。

for RHEL/CentOS Linux:

下载 .rpm 档，安装指令:

$ rpm -ivh Filename.rpm

执行 VS Code:

$ code

for Ubuntu Linux:

下载 .deb 档，安装指令:

$ dpkg -i Filename.deb

执行 VS Code:

$ code

Web Editor:

如果你什么都不想要装，那么还有 Web 版的 VS code 可直接使用: https://vscode.dev/，可编辑你电脑中的档案。

同时在这网站也可以让你透过远端通道 (Tunnels) 存取你电脑上的 VS Code 与档案。

 

本站推荐的 VS Code 延伸模组

for Python:

for Perl:

加强程式功能:

  • Code Runner: 一键执行程式或选取范围的程式码，支援超过 50 种程式语言 (不过你必须自己安装编译器)，安装后工具列会多出一个“执行”图示，也可用快速键: 按 Ctrl + Alt + N 执行程式，按 Ctrl + Alt + M 停止执行 (作者说明)。如果执行 Python 程式时的中文全都变成乱码，可于 settings.json 加入以下的编码设定: 
    "code-runner.executorMap": {
    "python": "set PYTHONIOENCODING=utf8 && python -u",
}
  • IntelliCode API Usage Examples: 帮你查询函式在网络上的使用范例，可惜只支援 Python、JavaScript、TypeScript。
  • Error Lens: 将侦错器诊断出来的程式错误，直接显示在程式行的后面。

AI

  • Tabnine: 透过 Tabnine 的大数据分析你的程式，于编辑器中提供你可能要写的程式码，接近真正的“自动完成”，几乎支援所有的程式语言。要注册免费的 Tabnine 帐号才能使用。
  • ChatGPT: 透过与 ChatGPT 的交谈取得程式码，辅助你写程式。免注册，也可绑定 ChatGPT 的 API key。
  • ChatGPT - EasyCode: 透过与 ChatGPT 的交谈取得程式码，辅助你写程式。须注册 EasyCode 帐号。

网页/图片编辑:

  • Live Preview: 在你的电脑启动一个 Web 服务器，当你在 VS Code 编辑的网页时，可以在 VS Code 的分页“即时”预览网页的效果。与 Live Server 择一安装即可。
  • Live Server: 在你的电脑启动一个 Web 服务器，当你在 VS Code 编辑的网页按“储存”时，会在浏览器中自动重新加载网页内容。与 Live Preview 择一安装即可。
  • Auto Rename Tag: 自动重新命名 HTML 的 Tag 名称。
  • CSS Peek: 于分割视窗中查看外部的 CSS 的定义。
  • HTML CSS Support: 自订自动补完的 CSS Class。如果你想自动补完 Bootstrap 的 CSS，可于 settings.json 加入: 
      "css.styleSheets": [
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  ]
  • SVG: 加入 SVG 图片的预览及编辑功能。
  • Image preview: 在程式行左侧的边栏显示图片的缩图，以及在提示讯息中预览图片。

显示/美化:

Markdown:

  • Markdown Preview Enhanced: 在 VS Code 直接预览 Markdown 文件，支援 Latex 语法的数学公式，以及 Mermaid 流程图 (简介)。
  • Paste Image: 在编辑 Markdown 文件时，按 Ctrl + Alt + V 即可将剪贴簿中的图片贴到该文件的资料夹，并且自动于编辑器中插入图词组法: ![](Filename.png)，这些动作一气呵成，能节省我们许多宝贵的时间。建议于 settings.json 加入以下的设定: 
    "pasteImage.path": "${currentFileDir}/images"

    这样可以将贴上的图片集中于 images 资料夹

  • Office Viewer(Markdown Editor): 此模组整合了很多功能，包括:
    • 在 VS Code 直接检视 Office、pdf 档案，以及 SVG 图片
    • 一个 Markdown 文件的 WYSIWYG 编辑器
    • 两个深色布景主题
    • 一个档案图示主题

管理:

  • Todo Tree: 整理程式备注中的待办事项，可用的关键字: BUG, TODO, FIXME, HACK, XXX, [ ], [x] (除了 XXX 看起来怪怪的之外，其它关键字的含义应该都能理解。而 XXX 的意思是说“程式码似乎怪怪的，但一时之间不知道哪里怪?!有时间的话再来讨论或重写，没时间的话就...”)。
  • Bookmarks: 增加“书签”面板及功能，可将档案的特定位置加入书签。快速键: 按 Ctrl + Alt + K 新增书签，按 Ctrl + Alt + J / L 切换书签。
  • Favorites: 增加“我的最爱”面板及功能，让你将档案加入我的最爱。

SVN 版本控制:

  • TortoiseSVN Helper: 如果你有安装 TortoiseSVN，这模组会把 TortoiseSVN 的功能整合在鼠标右键选单，帮你呼叫 TortoiseSVN 的图形接口来使用 (for Windows)。
  • SVN: 这模组可在 VS Code 的侧边栏检视档案提交的 Log，也可让你用“指令”操作 SVN。你的电脑必须安装 TortoiseSVN 的命令列工具 (for Windows)。
  • rabbitvcs-svn: 你的主机需安装 RabbitVCS (for Linux)。

其它:

  • Office Viewer(Markdown Editor): 这模组整合了很多功能，包括:
    • 在 VS Code 直接检视 Office、pdf 档案，以及 SVG 图片
    • 一个 Markdown 文件的 WYSIWYG 编辑器
    • 两个深色布景主题
    • 一个档案图示主题
  • Code Spell Checker: 英文拼字检查。
  • Insert Numbers: 插入连续数字。
  • Comment Translate: 将程式中的“注解”丢给 Google、Bing 或 Baidu 进行即时翻译。

 

VS Code 常用的键盘快速键

系统与侦错

  • Ctrl + K → Ctrl + S: 显示全部的键盘快速键
  • F5: 整体执行
  • F1 (或 Ctrl + ⇧Shift + P 或 Ctrl + E 或 Ctrl + P 或 Ctrl + T): 整合多种搜寻功能，例如:
    • 直接输入文字则搜寻“档案名称”来开启
    • 若前置字符以 > 开头则搜寻“命令”来执行
    • 若前置字符以 @ 开头则搜寻档案内的“符号”
    • 若前置字符以 # 开头则搜寻“模组”来开启
    • 若前置字符以 : 开头则移至指定行
    • 输入 ? 查看所有可使用的语法
  • Ctrl + Tab: 切换开启的档案
  • Ctrl + J: 显示/隐藏下方面版
  • Ctrl + B: 显示/隐藏左侧边栏
  • Ctrl + Alt + B: 显示/隐藏右侧侧边栏
  • Ctrl + ＋ / －: 放大/缩小画面
  • Ctrl + ⇧Shift + T: 复原最后关闭的分页
  • Ctrl + K → Z: Zen 模式
  • Ctrl + K → Ctrl + T: 变更色彩布景主题
  • Ctrl + ｀: 切换到终端机
  • Ctrl + ，: 偏好设定
  • Ctrl + W: 关闭分页
  • F8: 移至下一个有错误的程式行
  • ⇧Shift + F8: 移至上一个有错误的程式行

编辑相关

  • F2: 将变量重新命名
  • Tab: 于行首按 Tab 会自动缩排。当输入程式码时按 Tab 则显示程式补完提示。
  • Ctrl + F: 搜寻字串
  • Ctrl + H: 取代字串
  • Ctrl + ⇧Shift + F: 在全部的档案中搜寻字串
  • Alt + ← / →: 切换光标记忆的位置 (会跨档案)
  • Alt + ↑ / ↓: 上/下移动本行
  • Ctrl + /: 注解/取消注解
  • ⇧Shift + Alt + ↑ / ↓: 向上/下复制本行
  • Ctrl + K → Ctrl + F: 重新排版选取的程式码
  • ⇧Shift + Alt + F: 重新排版整个文件
  • Ctrl + G: 前往指定行
  • Ctrl + K → Ctrl + Q: 前往上次编辑位置
  • F12 (或按住 Ctrl + 鼠标左键点选物件): 在新分页中查看定义 (可按 Alt + ← 返回之前的分页或光标位置)
  • Alt + F12 (或按住 Ctrl + Alt + 鼠标左键点选物件): 于分割视窗中查看定义

选取项目

  • ⇧Shift + ↑ / ↓ / ← / →: 扩大选取文字
  • ⇧Shift + Home: 选取行首到光标处的文字
  • ⇧Shift + End: 选取光标处到行末的文字
  • Ctrl + X: 剪下选取的文字，如果没选取字串，则剪下一整行

多重光标编辑

  • Alt + 鼠标左键: 于不同位置加入多重光标 (可于主选单的“选取项目”中，将 Alt 改为 Ctrl)
  • Ctrl + Alt + ↑ / ↓: 于上一行/下一行加入多重光标
  • 按住鼠标中键，向上/下拖曳: 于拖曳过的多行加入多重光标
  • 选取多行 → ⇧Shift + Alt + I: 于选取行的行末加入多重光标
  • 选取字串 → Ctrl + ⇧Shift + L (或 Ctrl + F2): 选取整份文件中相同的字串，并加入多重光标
  • 选取字串 → Ctrl + D: 快速选取下一个相同字串，并加入多重光标
  • 搜寻字串 → Ctrl + ⇧Shift + L: 选取搜寻到的字串，并加入多重光标

设定档

你在偏好设定里做的修改都会储存到一个设定档。

  • 档案位置: %UserProfile%\AppData\Roaming\Code\User\settings.json

偏好设定是每个程式语言都通用的，如果你想让不同程式语言使用不同的设定，可于设定档中加入如下的设定:

"files.associations": {
    "*.py": "python",
    "*.py2": "python",
    "*.py3": "python",
    "*.pym": "python",
    "*.pl": "perl",
    "*.pm": "perl",
    "*.cgi": "perl"
 },
 "[python]": {
     // Python 专用的设定
},
 "[perl]": {
     // Perl 专用的设定
},

 

使用 Tabs (\t) 进行缩排

我是偏好在程式码中使用“Tabs (\t)”进行缩排的。如果要避免 VS Code 编辑器将 Tabs 转成空白字符，可于偏好设定中将这两个选项取消勾选:

  • Editor: Detect Indentation
  • Editor: Insert Spaces

等同于在设定档中加入这两行:

    "editor.detectIndentation": false,
    "editor.insertSpaces": false,

但问题是，程式语言的格式器 (Formatter) 在重新排版你的程式码时，仍会毫不留情地将 Tabs 转成空白字符!! 所以，除非你不使用格式器，否则劝你干脆放弃这些坚持，让格式器帮你决定!

 

参考网页

  1. No comments yet.

  1. No trackbacks yet.

INFORMATION

我们解决了什么问题？我们创造了什么价值？

return top

%d 位部落客按了赞：