开发工具之Vscode编辑器
Visual Studio Code(以下简称vscode)是一个轻量且强大的代码编辑器,支持Windows,OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持C++、C#、Python、PHP等其他语言
1.安装
下载地址: https://code.visualstudio.com/
2.基本使用
1)对于插件进行自定义配置
设置 -> 用户设置 -> 扩展 -> 插件名称 即可进行修改操作
3.常用插件
安装插件:
1) view in browser
快速在文件右键 -> 点击"view in brower" 可以快速在浏览器运行该文件
2) Live Server(及时浏览)
安装完成,在窗口的最底部有Go Live可以点击,一旦点击,就会自动在浏览器中打开HTML文件
3)PHP IntelliSense(支持代码跳转)
点击配置文件,编辑 php.executablePath
,将 null 改为php的安装路径
4)Auto Close Tag(自动闭合HTML/XML标签)
5)Auto Rename Tag(自动完成另一侧标签的同步修改)
6)Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色)
7)Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)
8)HTML CSS Support(智能提示CSS类名以及id )
9)HTML Snippets(智能提示HTML标签,以及标签含义)
10)智能提示HTML标签,以及标签含义(ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间)
11)jQuery Code Snippets(jQuery代码智能提示)
12)open in browser(vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari)
13)Path Intellisense(自动提示文件路径,支持各种快速引入文件)
4. 常用设置
1) 一般为了避免乱码,将文本换行 CRLF -> LF
5.常用快捷键
1)快速复制一行
Shift+ Alt + ↑/↓ 上下快速复制
在当前行空选择的时候,直接复制粘贴即可
2)上下移动某行
Alt + ↑/↓
3)切出一个新的编辑器(最多 3
个)
Ctrl+\
,也可以按住 Ctrl
鼠标点击 Explorer
里的文件名
4) 左中右 3
个编辑器的快捷键 Ctrl+1
Ctrl+2
Ctrl+3
主命令框
F1
或 Ctrl+Shift+P
: 打开命令面板。在打开的输入框内,可以输入任何命令,例如:
- 按一下
Backspace
会进入到Ctrl+P
模式 - 在
Ctrl+P
下输入>
可以进入Ctrl+Shift+P
模式
在 Ctrl+P
窗口下还可以:
- 直接输入文件名,跳转到文件
?
列出当前可执行的动作!
显示Errors
或Warnings
,也可以Ctrl+Shift+M
:
跳转到行数,也可以Ctrl+G
直接进入@
跳转到symbol
(搜索变量或者函数),也可以Ctrl+Shift+O
直接进入@
根据分类跳转symbol
,查找属性或函数,也可以Ctrl+Shift+O
后输入:进入#
根据名字查找symbol
,也可以Ctrl+T