Visual Studio Code 使用指南

最近开发vue，须要一款编辑器，通过筛选，选择了Visual Studio Code 理由以下：

1.Microsoft 出品，品质有保障2.支持多平台 Mac OS X、Windows和 Linux3.免费，开源，轻量

1、下载 Visual Studio Code

官网下载：https://code.visualstudio.com/

2、界面介绍

1. 功能栏：根据图标从上到下 依次的功能是：

   •打开结构栏

   •搜索功能

   •代码改动记录

   •debug 排查问题

   •插件使用

   •git 项目管理

2. 结构栏：就是项目总体的结构

3. 编辑栏：编写代码区域

4. 控制台：控制台有四个子栏目，从左到右依次为，问题，输出，调试栏，终端（terminal），比较经常使用的是终端，由于咱们须要经过敲命令，启动项目，好比npm run serve

5. 状态栏：icon很清楚，就不作特殊讲解，比较经常使用的是截图这个，用于打开或关闭控制台

3、Visual Studio Code 经常使用插件推荐

• Chinese (Simplified) Language Pack for Visual Studio Code^[1] 中文版插件，英文比较差的福音，安装完，整个开发工具就变成中文版了

• Debugger for Chrome^[2]，在Chrome浏览器中调试。

• TSLint Vue^[3]，校验ts语法。

• Document This^[4]，目前vscode上最好的ts注释插件。

• Bracket Pair Colorizer^[5] 对括号对进行着色，能够很清楚方法函数。

• Path Intellisense^[6] 路径指示器

• open in browser^[7] VSCode 没有直接在浏览器中打开的界面，因此此插件添加浏览器打开方式

• CSS Peek^[8] 追踪样式表中 CSS 类和 ids 定义的地方。

4、经常使用设置

1. 查看快捷键及修改快捷键

你能够到 code--> 首选项 --》 键盘快捷方式查看其余快捷键，固然也能够修改快捷键方式，改为本身熟悉的

2. Vscode更换主题

入口：code--》首选项--》颜色主题

代码君通常喜欢黑色主题，感受比较炫酷

3. 经常使用快捷键

Command +N （新建文件）

Command + / （单行注释）

Command + Alt + A （多行注释）

若要取消单行或多行注释在按一次该快捷键便可

Command + Shift + Enter （上方插入一行，鼠标光标在当前行的任意位置均可以直接换行到上一行）

Command + Enter （下方插入一行，鼠标光标在当前行的任意位置均可以直接换行到下一行）

Alt + Shift + F （格式化代码，不须要全选中代码，直接格式化便可）

Command + Shift + F （查找文件）

这些是我本身的快捷键，能够参考1，修改本身的快捷键

微信不支持外链，能够点击「 阅读原文 」进行外链下载

好文推荐

微信小程序版2048

基于Python搭建Django后台管理系统

Android 8.0 版本更新的适配