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打开方式
- 直接双击快捷图标打开
- 第二种通过命令行方式打开(推荐使用，效率更高)
- 下面我们来演示第二种打开方式
-
首先我们创建一个文件夹，或者已经有一个文件夹是我们需要打开的文件夹
-
在命令行中输入code + 文件夹名称即可以这个文件夹为根目录打开vscode
-
打开后
2.快速入门
2.1默认命令行设置
- 打开命令面板 ，输入shell
- 选择默认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.用户代码片段设置
- 事先在配置中定义了一段代码，通过某些关键字来触发
- 了解可以提高开发效率：传送门