VS Code上手与超实用插件安利

工欲善其事必先利其器

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎全部主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片断、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发作了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之做

微软有 Visual Studio这个宇宙最强IDE，Visual Studio Code 天然也不会弱(宇宙最强编辑器)

说到代码编辑器，咱们有必要提一提Sublime Text还有Atom。在开始使用VS Code以前Sublime Text一直是个人主力编辑器，和WebStorm （最强端前端开发工具） 一块儿用。因为这篇文章主要介绍VS Code下面就简单归纳下这几个：

Sublime Text：在个人平常使用中都挺满意，快速，稳定。惟一不爽是证书购买(虽然能够一直无限制使用)，没有开源

Atom：大家用着真不卡吗？仍是我电脑配置太差，不过UI真的好看

VS code：微软开源，比sublime开源，比atom更快，比webstorm更轻，值得一提的是它用的壳是GitHub开源的Electron。

主要功能

Visual Studio Code首先是一个编辑器，它包含了高效的源代码编辑所需的功能(最为一个编辑器，主要功能固然是代码编辑了) 咱们主要仍是看看特点功能。

智能感知 Intellisense

智能感知是各类代码编辑功能的总称，包括代码完成，参数信息，快速信息和成员列表。智能感知功能也被称为“代码补全”，“内容帮助”和“代码提示”，这是一个现代编辑器最基本的自我修养了。

VS Code原生就支持JavaScript，TypeScript，JSON，HTML，CSS，Less和Sass的Intellisense，真正的强大之处在于，能够安装语言扩展来配置更丰富的IntelliSense（几乎包括全部主流语言）

内置 Git

VS Code 内置了一个 Git GUI，支持最经常使用 Git 命令，这使得您能够很容易地看到您在项目中所作的更改。固然了，你能够经过扩展 让他更强大。

调试 Debugging

VS Code对Node.js运行时提供了内置的调试支持，而且能够调试JavaScript，TypeScript和任何其余被转换为JavaScript的语言。对于调试其余语言和运行环境时，咱们也能够经过扩展来解决。

终端命令行工具 Terminal

在VS Code中提供了一个功能齐全的集成终端，这很是方便，由于您没必要切换窗口或更改现有终端的状态就能够快速执行命令

扩展市场 Extensio

对于强大的插件市场来讲，它自带的功能只是和开始而已。随着VS Code的流行，基本上你能找到全部你想要的插件(实在找不到你还能够本身开发)。

更多请查阅https://code.visualstudio.com/docs

开始上手

关于VS Code的使用也很简单

• 下载安装：去到它的官网https://code.visualstudio.com/，下载对应版本，而后按照提示一直下一步就好

• 基本使用：在你安装好后，就能够看到有用的用户欢迎指引界面

你能够在学习栏点击各项，迅速上手这个编辑器。下面主要就是推荐一些好用插件了，

插件安装方式

关于插件的安装，在看了 界面概述后也应该是知道怎么安装了：

• 直接在扩展管理中键入你要下载的扩展名称或者关键字搜索下载

• 使用快捷键 ⇧+⌘+P，打开命令面板，输入以下命令便可

ext install 扩展名

• 还能够从插件主页直接点击下载，他会唤起VS Code自动下载

基本配置

关于VS Code的各项设置，都在一个JSON文件中，左边是默认设置，右边是咱们本身的设置，分为用户设置和工做区设置，咱们只须要在右边咱们编辑设置并保存便可。工做区设置后各项设置会保存在 .vscode文件夹下。

主题推荐

VS Code已经自带了不少个好看的主题，好比说我一直用的Solarized Dark

这里我再推荐几个不错的，

One Dark Pro： Atom 标志性的主题

Atom One Dark Theme： 另外一个基于 One Dark 的主题

Dracula Official：超好看

Material Theme 一个简单而又干净的主题，有不少配置选项用于颜色配置 

单单安装了主题还不够，咱们还要好看的图标来足视觉体验：

vscode icons

Material Icon Theme

更多好看主题请浏览https://marketplace.visualstudio.com/search?target=VSCode&category=Themes

实用插件

filesize：在底部状态栏显示当前文件大小，点击后还能够看到详细建立、修改时间

Path Intellisense：文件路径补全，在你用任何方式引入文件系统中的路径时提供智能提示和自动完成

vscode-fileheader：顶部注释模板，可定义做者、时间等信息，并会自动更新最后修改时间 

Git Lens：查看详细的git记录,内置功能不少 

Git History (git log)：一个好用的Git 历史查看工具 

npm: 能够直接在vscode执行npm的一些命令

Npm Intellisense：NPM 依赖补全，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成

Debugger for Chrome：让 vscode 映射 chrome 的 debug功能，静态页面均可以用 vscode 来打断点调试 

JavaScript (ES6) code snippets：经常使用的类声明、ES 模块声明、CMD 模块导入等

ESLint：代码语法检查

Beautify：格式化代码的工具

open-in-browser： 在浏览器中预览HTM文件

HTML Snippets：各类 HTML 标签片断

IntelliSense for CSS class names：CSS 类名补全，会自动扫描整个项目里面的 CSS 类名并在你输入类名时作智能提示

Document This： js 的注释模板

Settings Sync：同步你得设置和插件

结语

咱们从外观配置开始到插件推荐结束，到此基本上你就能打造出一个有本身风格强大编辑器，开发效率天然也是很高。你有什么好用的插件？欢迎留言交流！让更多的人知道。

同时，建议移步官网看看https://code.visualstudio.com/，那儿有更全更细的文档，有助于咱们更好的使用它。