Visual Studio Code 使用指南

mac2025-10-10  23

 

Visual Studio Code是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

 

下载:

官网地址:https://code.visualstudio.com/

 

VSCode 界面介绍:(主要分为五个区域,分别是活动栏,侧边栏,编辑栏,面板栏,状态栏)

(1)活动栏从上到下依次为:打开侧边栏,搜索,使用git,debug,使用插件

(2)侧边栏,新建项目文件和文件夹

(3)编辑栏,编写代码的区域

(4)面板栏,从左到右依次为,问题,输出,调试栏,终端(terminal),最重要的是terminal,用来输入相关命令

(5)状态栏,点击  该区域可以调出面板栏

(6)需要注意的为下图红框所示,分别表示鼠标光标所在位置和tab缩进字符,这里为缩进4个字符

       

 

 

 

 

插件:

(1)VScode-icons: 美化VSCode的界面,在文件名前面显示小图标,安装后每次打开自动启用。

(2)Debugger for Chrome: 方便js调试的插件,前端项目在Chrome中运行起来之后,可以直接在VSCode中打断点、查看输出、查看控制台,需要配置launch.json,详情见插件说明。

(3)vue 2 Snippets: Vue文件高亮,View In Browser: 从浏览器中查看html文件,使用系统的当前默认浏览器,只支持html文件,默认的快捷键Ctrl+F1。

(4)点击插件按钮搜索 Chinese, 在弹出的选项中选择第一个中文简体,然后安装就可以

 

参考链接:

https://juejin.im/post/5b123ace6fb9a01e6f560a4b

https://juejin.im/post/5bc86b0b5188255ca00cc58f

http://jerryzou.com/posts/vscode-debug-guide/

 

最新回复(0)