开发工具之Vscode编辑器_vscode

Visual Studio Code(以下简称vscode)是一个轻量且强大的代码编辑器,支持Windows,OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持C++、C#、Python、PHP等其他语言


  Visual Studio Code(以下简称vscode)是一个轻量且强大的代码编辑器,支持Windows,OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持C++、C#、Python、PHP等其他语言

 

1.安装

  下载地址: ​​https://code.visualstudio.com/​

2.基本使用

   1)对于插件进行自定义配置

  开发工具之Vscode编辑器_vscode_02

     设置 -> 用户设置 -> 扩展 -> 插件名称 即可进行修改操作

3.常用插件

  安装插件:开发工具之Vscode编辑器_chrome_03

  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​