VSCode神器快速入门

1.本章给大家讲解VSCode这个工具的使用

1.1VSCode介绍

• Microsoft 在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS
  X、Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。

• 轻量级，开源，支持几乎所有的语言编辑，插件更是堕入牛毛，大家可以根据自己的需求安装对应的插件以提高开发的效率

• 语言支持

  该编辑器支持多种语言和文件格式的编写，截止2019年9月，已经支持了如下37种语言或文件：F#、HandleBars、Markdown、Python、Java、PHP、Haxe、Ruby、Sass、Rust、PowerShell、Groovy、R、Makefile、HTML、JSON、TypeScript、Batch、Visual Basic、Swift、Less、SQL、XML、Lua、Go、C++、Ini、Razor、Clojure、C#、Objective-C、CSS、JavaScript、Perl、Coffee Script、Dockerfile。

1.2VSCode安装

• 官网地址

• 网盘地址,博主使用版本 提取码:gq30

• 避免重复造轮子，安装教程传送门

1.3 命令面板

• 安装好后，Mac用户 按 command + shift +p 可以调出命令面板，Window用户 按 ctrl + shift + p 可以调出命令面板

1.4 VScode打开方式

• 直接双击快捷图标打开
• 第二种通过命令行方式打开(推荐使用，效率更高)
• 下面我们来演示第二种打开方式

1. 首先我们创建一个文件夹，或者已经有一个文件夹是我们需要打开的文件夹

   

2. 在命令行中输入code + 文件夹名称即可以这个文件夹为根目录打开vscode
   

3. 打开后

2.快速入门

2.1默认命令行设置

1. 打开命令面板 ，输入shell

2. 选择默认shell，然后根据开发需求进行选择

2.2代码编辑篇

2.2-1光标移动

• win系统

  • 移动到行首 win+Home
  • 移动到行位 win+End
  • 移到文档首部和尾部 ctrl+Home/End

• Mac系统

  • 移动到行首 command+左方向键
  • 移动到行位 win+End+右方向键
  • 移到文档首部和首部 command+上下方向键

2.2-2删除、移动、注释、代码格式化

• 复制当前行代码

  • alt+shift + 上下方向键（一部分版本 win+alt+上下方向键）Mac：Option+上下方向键

• 单行注释

  • ctrl + / Mac: command + /

• 块注释

  • shift+alt+a Mac：option+shift+/

• 快速删除剪切选中行(可以通过粘贴将内容从剪切板放出)

  • ctrl + x 或者D Mac command + D

• 移动光标所在行

  • alt + 上下方向键

• 列式编程，多光标

  • ctrl + shift + alt + 上下方向键 (分裂光标,或者alt + 鼠标）

• 代码中间换行

  • ctrl + 回车 【不会在代码中间换行不会打乱代码】

• 代码格式化

  • shift + alt + F

3.插件篇

• 推荐安装插件

  • coder Runner

    该插件帮助vsdoe可以运行以下的语言。

    Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust

  • Auto Rename Tag

    前端必备，当修改标签时，只要修改一端另一端会自动进行修改

  • Live Server

    前端开发必备，这个可以实现在代码跟新之后按下ctrl + s 保存后页面实时更新，喜欢边看边写的小伙伴不能错过

  • import Cost

    引入文件分析，配合node.js一起使用，导入文件时可以看到文件的大小和压缩过后的大小

  • Project Manager

    项目管理工具，极力推荐

  • Document This

    快速生成注释，安装完成后，要生成注释的地方按 ctrl + shift + D

  • Color Picker

    前端必备颜色选择器

  • Easy LESS

    前端必备，less

  • vscode-icons

    文件夹图表化，推荐安装

  • css-auto-prefix

  自动添加 CSS 私有前缀。

  • CSS Peek

    定位 CSS 类名。

  • Power Mode

    快乐编程，根据喜好选择特效：传送门

4.用户代码片段设置

• 事先在配置中定义了一段代码，通过某些关键字来触发
• 了解可以提高开发效率：传送门