前言

小伙伴们大家好，本次和大家聊聊前端开发者最常使用的编辑器——VSCode。阅读本文，前端萌新可以快速上手此工具，前端老手则可以重新审视有无细节遗漏之处。

一、简介

VSCode 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT 命令等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。—— VSCode中文网

二、下载

1. 下载地址

VSCode官网传送门：https://code.visualstudio.com/Download

VSCode中文网传送门：http://vscode.bianjiqi.net/

2. 国内镜像

相信小伙伴们下载的时候可能会遇到如下场景：

龟速下载，实在令人头痛，我们可以使用国内镜像来下载，步骤如下：

从官网点击下载按钮进行下载
打开浏览器下载内容页并在新页面打开
将链接中的 az764295.vo.msecnd.net 替换为 vscode.cdn.azure.cn 并按下回车键

三、快捷键

VSCode官方提供的快捷键（Windows版）如下图：

当然你也可以查看官网提供的PDF版本：keyboard-shortcuts-windows.pdf

四、插件

VSCode的强大在于它有许许多多优秀的插件（扩展），下面简单描述下本人在用的十二个插件。

Chinese (Simplified)

简介：中文语言包，必备。

官网：https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

Beautify

简介：格式化代码所用。

官网：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Prettier - Code formatter

简介：格式化代码所用。

官网：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

open in browser

简介：可以把HTML文件在浏览器中打开。

官网：https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

使用：在HTML文件右键选择 Open In Default Browser 或 Open In Other Browser 。

Bracket Pair Colorizer 2

简介：使嵌套的括号（大括号中括号和小括号）呈现不同颜色，便于区分。

官网：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

效果：

indent-rainbow

简介：根据缩进，在代码前展示不同的背景颜色，便于区分。

官网：https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

效果：

Auto Rename Tag

简介：修改标签的一处时，另外一处与之对应的标签（如果有）也会自动被修改。

官网：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

效果：

Better Comments

简介：注释变色，让你的注释与众不同。

官网：https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

使用：

// ! 红色的高亮注释,双斜线后加英文叹号     !     配置
// todo 橙色的高亮注释,双斜线后加         todo   函数
// * 绿色的高亮注释,双斜线后加            *      变量
// ? 蓝色的高亮注释,双斜线后加英文问号     ?     组件
// // 黑色带删除线的注释,双斜线后加双斜线  //    说明

效果：

Power Mode

简介：打字特效，让 coding 不再枯燥。

官网：https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode

配置：

效果：

Snazzy Light

简介：浅色主题。

官网：https://marketplace.visualstudio.com/items?itemName=loilo.snazzy-light

vscode-icons

简介：文件资源管理器中的目录主题，根据文件名显示不同的icon。

官网：https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

Windows opacity

简介：可以让你的编辑器开启透明模式，配置值0~255。

官网：https://marketplace.visualstudio.com/items?itemName=skacekachna.win-opacity

参考资料

Visual Studio Code - Code Editing. Redefined
VSCode中文网

前端开发利器之VSCode相关推荐

python利器的使用-图文详解python开发利器之ulipad的使用实践
Ulipad是一个国人limodou编写的专业Python编辑器,它基于wxpython开发的GUI(图形化界面).下面这篇文章主要介绍了python开发利器之ulipad的使用实践,文中介绍的非常详 ...
android.cat 镜像,Android开发利器之pidcat安装方式
介绍pidcat: pidcat 是Android届JakeWharton大神开发的一款命令行工具,堪称Android开发利器,它能方便Android程序猿捕获日志,过滤日志,定位程序问题,超级好用. ...
Spring Boot开发利器之STS（Spring Tool Suite 4）下载与安装
Spring Boot开发利器之STS(Spring Tool Suite 4)下载与安装背景正文前置条件下载安装背景在使用eclipse进行Spring Boot或Spring Clo ...
前端简易服务器之vscode篇（可供项目预览手机访问电脑网页等）
几种方案本质其实都是启动一个简易服务器然后手机访问来实现的,一般来说使用webpackia脚手架搭建的项目都会自动启动一个服务所以并不需要使用这些方案再重复启动了,直接在config配置下host即可 ...
前端开发必备的VSCode插件
本文总结了一下前端开发人员一些经常用的可以提高开发效率的VSCode插件,好的工具可以事半功倍.主要分为:基础通用篇,自由可选篇,框架工具篇,主题篇(按照我自己的想法分的) 基础通用篇 Chinese ...
前端开发神器之ngrok
ngrok能做什么,为什么是前端开发神器? 内网穿透,映射本地开发环境到公网,模拟多终端线上环境. 结合一个很简单的PWA demo,举个简单的例子 1.克隆demo到本地 git clone htt ...
ctrl+shift+l指定选择 vscode_6.PYTHON开发利器之VS Code常用配置介绍
0.前言在上一节中详细介绍了如何使用vscode+GitHub进行代码托管和向开源项目贡献自己的代码,详见5.2.PYTHON开发利器之使用VS Code+GitHub进行python开源项目开发. ...
开发利器之IntelliJ IDEA学习笔记
这篇文章主要记录的是本人学习使用IntelliJ IDEA的笔记,可能不是特别的详细.旨在记录自己的学习过程,方便日后遇到问题是及时查阅复习,另一方面也希望能帮助像笔者一样从来没使用过IDEA的人快速 ...
开发利器之Mac下的MacPorts
今天笔者推荐Mac开发者们安装的一个利器-----MacPorts.这是一个开源的工程,旨在设计一个简单易用的系统帮助大家在命令行,X11 或 Aqua编译.安装和升级基于开源的软件.有了它,开发者就 ...

前端开发利器之VSCode

前言