vscode使用教程

VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。

PHP自动跳转插件

1.安装插件:PHP IntelliSense

2.配置:"php.executablePath": "C:\\php\\php.exe",

1.VSCode下载

VSCode下载链接: https://code.visualstudio.com/

2.VSCode汉化

3.VSCode常用插件(安装步骤同汉化)

      3.1 Auto Close Tag (自动闭合HTML/XML标签)

3.2 Auto Rename Tag (自动完成另一侧标签的同步修改)

 3.3 Beautify (格式化 html ,js,css)

3.4 Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)

3.5 Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)

3.6 ESLint(js语法纠错,可以自定义配置)

 3.7 GitLens(方便查看git日志)

3.8 HTML CSS Support (智能提示CSS类名以及id)

 3.9 HTML Snippets(智能提示HTML标签,以及标签含义)

 

3.10 JavaScript(ES6) code snippets(ES6语法智能提示,以及快速输入)

3.11 jQuery Code Snippets(jQuery代码智能提示)

 

3.12 Markdown Preview Enhanced(实时预览markdown)

3.13 markdownlint(markdown语法纠错)

3.14 Material Icon Theme(vscode图标主题)

3.15 Icon fonts(图标字体)

3.16 open in browser(右键快速在浏览器中打开html文件)

3.17 Path Intellisense(自动提示文件路径)

 

3.18 React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)

3.19 Vetur(Vue多功能集成插件,错误提示等)

3.20 Class autocomplete for HTML(智能提示HTML class =“”属性)

3.21 npm Intellisense(require 时的包提示)

4.VSCode快捷键

4.1 左侧是按键,右侧是功能(下同)

4.2 基础编辑

4.3 导航

 

4.4 搜索和替换

4.5 多光标和选择

4.6 语言编辑

4.7 编辑器管理

4.8 文件管理

4.9 显示

4.10 调试

4.11 集成终端

### 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 等附加组件预览效果无需手动刷新浏览器页面。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值