vscode的使用教程(插件、快捷键使用)

###1.下载地址 : 点击去官网下载
###2.常用插件:
View In Browser

  • 预览页面(ctrl+F1)

vscode-icons

  • 侧栏的图标,对于一个有视觉强迫症的人是必须要的

HTML Snippets

  • 支持HTML5的标签提示

HTML CSS support

  • css自动补齐

JS-CSS-HTML Formatter
格式化

jQuery Code Snippets
jquery 自动提示

Path Autocomplete

  • 路径自动补齐

Npm Intellisense

  • npm包代码提示

ESLint

  • 检测JS必备

Debugger for Chrome

  • 方便调试
    Auto Rename Tag
  • 自动同步修改标签

Bootstrap 3 Snippets

  • bootstrap必备

Vue 2 Snippets

  • vue必备

background

  • 一个萌萌的插件,可以自己设置vsc的背景图

###3.常用快捷键
(在快捷键部分, ⌘ 指 Command 键,⇧ 指 Shift 键,⌃ 指 Control 键,⌥ 指 Option/Alt 键。)

这里主要就是实验F1上的快捷键,一些我认为没用的我就不列出来了。

向上(下)复制行 shift + alt + top(down)

向上(下)移动行** alt + top(down)**

新建一个窗口 ctrl + shift + N

行增加缩进: ctrl + [

行减少缩进 * ctrl + ]**

裁剪尾随空格(去掉一行的末尾那些没用的空格): ctrl + shift + x

强烈建议把这个启用,这样保存的时候就会自动删掉那些没用的空格,在很多公司的代码规范里都是不允许存在这些空格的。

显示隐藏侧边栏:ctrl + B

拆分编辑器(最多拆分成三块)?*ctrl + /按ctrl + 1(2,3)**就可以在拆分后的编辑器里切换

方法缩小ctrl +(-)

关闭编辑器 ctrl + W(F4)

切换编辑器 ctrl + shift + left(right)

也可以用 ctrl+1(2,3)

显示和隐藏侧边栏 ctrl + B

切换全屏 F11

切换自动换行 alt + Z

显示Git ctrl + shift + G

前提是你的项目必须是一个git项目

这个还是很有用的,有时候我们的屏幕不够大,可是代码没有自动换行,所以被遮住的代码就会看不到,但是你用这个快捷键就可以换行看到了。这个我是在用户设置里面设置成自动换行的。

修改用户设置
把默认的用户设置成适合我们自己的还是很重要的。

也很简单,文件 – 首选项 – 用户设置,然后出来左边的默认设置是不能改的,需要在右边settings.json中覆盖。

修改快捷键
文件 – 首选项 – 键盘快捷方式,和修改用户设置的时候一样,找到你要修改的快捷键名字,右边覆盖就可以了,一些还没有绑定快捷键的功能可以在左边的最下面看到,然后快捷键的名字就是这个。

### VSCode 的基本安装与配置 Visual Studio Code 是一款轻量级但功能强大的源代码编辑器,支持多种操作系统,包括 Windows、macOS 和 Linux。它内置支持 JavaScript、TypeScript 和 Node.js,并通过丰富的扩展生态系统支持其他语言(如 C++、C#、Java、Python、PHP、Go)和运行时环境(如 .NET 和 Unity)[^1]。 #### 安装 Visual Studio Code 1. 访问官方网站下载适用于您操作系统的版本。 2. 运行安装程序并按照提示完成安装过程。 #### 配置工作区 - **设置默认终端**:可以通过 `File` -> `Preferences` -> `Settings` 中调整,默认情况下可能会使用系统自带的命令行工具。 - **更改主题**:同样在设置中可以找到外观部分来改变界面的主题颜色。 - **启用自动保存**:可以在设置中开启此选项以便于文件修改后立即保存。 ### 基础功能介绍 #### 编辑器特性 - **智能感知**:提供上下文相关的建议列表,帮助快速编写代码。 - **语法高亮显示**:不同类型的代码会以不同的颜色呈现,便于阅读理解。 - **括号匹配**:当光标位于某个左括号旁边时,对应的右括号会被突出显示。 - **跳转到定义/查找所有引用**:这些快捷键可以帮助开发者迅速导航至变量或函数被声明的地方或者查看它们在哪里被使用的。 #### 版本控制集成 VSCode 自带 Git 插件,允许直接从 IDE 提交更改、创建分支等操作而不必切换窗口。要开始使用这个功能,请确保已经初始化了一个仓库并且添加了远程地址。 ### 扩展管理 为了增强其功能性,您可以安装各种插件: ```shell # 在VSCode内部打开终端执行下面这条命令来搜索特定扩展 code --list-extensions | grep 'search_term' ``` 一些常用的扩展包括但不限于: - Python Language Support - Docker integration - Azure App Service Tools - GitHub Pull Requests and Issues ### 调试应用 利用调试器能够更有效地测试应用程序逻辑错误。只需点击侧边栏上的调试图标,然后选择合适的配置即可启动调试会话。 --- ### 开发流程优化技巧 #### 多根工作区 如果项目涉及多个独立目录下的文件,则可考虑建立一个多根源的工作空间配置文件 `.vscode/settings.json` 来统一管理和访问各个子项目的资源。 #### 组织化布局 合理规划文件夹结构对于维护大型工程非常重要;通常推荐的做法是将公共库放在顶层目录下,而具体的服务模块则各自拥有自己的专属路径。 #### 实施持续集成(CI) 借助像 Jenkins 或者 GitHub Actions 这样的平台自动化构建与部署任务,从而提高团队协作效率以及产品质量稳定性。 --- ### 示例:简单的 HTML 页面开发 假设我们要创建一个基础网页模板,以下是所需步骤概述: 1. 创建新文档命名为 `index.html`. 2. 输入以下HTML骨架代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>My First Web Page</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 3. 利用 Live Server 等附加组件预览效果无需手动刷新浏览器页面。 ---
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值