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: 英文拼字检查。
  • Comment Translate: 将程式中的“注解”丢给 Google、Bing 或 Baidu 进行即时翻译。

 

VS Code 常用的键盘快速键

  • Ctrl + KCtrl + S: 显示全部的键盘快速键
  • F5: 整体执行
  • Tab: 于行首按 Tab 会自动缩排。当输入程式码时按 Tab 则显示程式补完提示。
  • F1Ctrl + ⇧Shift + PCtrl + ECtrl + PCtrl + T: 整合多种搜寻功能,例如:
    • 直接输入文字则搜寻“档案名称”来开启
    • 若前置字符以 > 开头则搜寻“命令”来执行
    • 若前置字符以 @ 开头则搜寻档案内的“符号”
    • 若前置字符以 # 开头则搜寻“模组”来开启
    • 若前置字符以 : 开头则移至指定行
    • 输入 ? 查看所有可使用的语法
  • Ctrl + F: 搜寻字串
  • Ctrl + H: 取代字串
  • Ctrl + ⇧Shift + F: 在全部的档案中搜寻字串
  • Alt + / : 切换光标记忆的位置 (会跨档案)
  • Ctrl + Tab: 切换开启的档案
  • Ctrl + J: 显示/隐藏下方面版
  • Ctrl + B: 显示/隐藏左侧边栏
  • Ctrl + Alt + B: 显示/隐藏右侧侧边栏
  • Alt + / : 上/下移动程式行
  • Ctrl + /: 程式行注解/取消注解
  • ⇧Shift + Alt + / : 复制程式行
  • Ctrl + KCtrl + F: 排版选取的程式码
  • ⇧Shift + Alt + F: 重新排版整个文件
  • Ctrl + G: 前往指定行
  • Ctrl + KCtrl + Q: 前往上次编辑位置
  • F12 或按住 Ctrl + 鼠标左键点选物件: 在新分页中查看定义 (可按 Alt + 返回之前的分页或光标位置)
  • Alt + F12 或按住 Ctrl + Alt + 鼠标左键点选物件: 于分割视窗中查看定义
  • Ctrl + / : 放大/缩小画面
  • F8: 移至下一个有错误的程式行
  • ⇧Shift + F8: 移至上一个有错误的程式行
  • Ctrl + D: 快速选取相同字串
  • Ctrl + W: 关闭分页
  • Ctrl + ⇧Shift + T: 复原最后关闭的分页
  • Ctrl + KZ: Zen 模式
  • Ctrl + KCtrl + T: 变更色彩布景主题
  • Ctrl + : 切换到终端机
  • Ctrl + : 偏好设定

 

设定档

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

  • 档案位置: %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.

return top

%d 位部落客按了赞: