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 集成终端

### 安装与配置 Visual Studio Code(简称 VSCode)是一款由微软开发的免费、开源的代码编辑器,支持多种编程语言和平台。安装过程简单,可从官网下载对应操作系统的版本并按照提示完成安装[^1]。首次启动时,界面会显示欢迎页面,提供快速入门指南和常用功能介绍。 用户可通过设置界面自定义编辑器行为,包括字体大小、主题颜色、自动保存等选项。设置可通过菜单栏“文件 > 首选项 > 设置”访问,也可使用快捷键 `Ctrl+,` 打开。此外,配置文件 `settings.json` 支持更高级的个性化设定[^1]。 ```json { "editor.fontSize": 14, "editor.tabSize": 2, "files.autoSave": "onFocusChange", "workbench.colorTheme": "Dark+" } ``` ### 扩展插件管理 VSCode 的强大之处在于其丰富的扩展生态系统。通过左侧活动栏中的扩展图标(或使用快捷键 `Ctrl+Shift+X`),可以浏览、搜索和安装插件。常见推荐插件包括: - **Python**:提供语法高亮、智能感知、调试支持等功能。 - **Prettier**:代码格式化工具,统一代码风格。 - **GitLens**:增强 Git 功能,查看代码提交历史和作者信息[^1]。 安装后部分插件可能需要重启编辑器或进行额外配置才能生效。 ### 文件与项目管理 工作区是 VSCode 中组织文件的核心概念。打开文件夹即创建一个工作区,支持多根文件夹项目。资源管理器视图展示当前项目的目录结构,允许新建、重命名、删除文件或文件夹[^1]。 ```bash code . ``` 在终端中执行上述命令可在当前目录下启动 VSCode。 ### 代码编辑与智能感知 编辑器具备语法高亮、括号匹配、代码折叠、多光标编辑等基础功能。智能感知(IntelliSense)基于语言服务提供变量类型推断、函数参数提示、自动补全建议。例如,在编写 JavaScript 时输入对象名后按点号,将弹出可用属性和方法列表[^1]。 ### 调试功能 内置调试器支持多种语言,需配置 `.vscode/launch.json` 文件定义启动参数。以 Python 为例: ```json { "version": "0.2.0", "configurations": [ { "name": "Python: 当前文件", "type": "python", "request": "launch", "program": "${file}", "console": "integratedTerminal" } ] } ``` 设置断点后点击“运行和调试”按钮即可进入调试模式,支持变量监视、调用栈查看、单步执行等功能[^1]。 ### 版本控制集成 VSCode 内置 Git 支持,通过源代码管理视图(`Ctrl+Shift+G`)可执行提交、推送、拉取、分支切换等操作。更改的文件以颜色标识,未跟踪为红色,已暂存为绿色[^1]。 ### 终端集成 底部面板集成命令行终端,支持 PowerShell、bash 或 cmd,便于执行构建脚本、运行程序或版本控制命令。使用 `Ctrl+`` 可快速展开或隐藏终端面板[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值