爱丽丝
发布于

vscode 前端开发常用插件

前言

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

简介

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

下载

下载地址

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

VSCode 官网.png

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

VSCode 中文网.png

国内镜像

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

龟速下载.png 下载失败.png

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

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

使用国内镜像下载 VSCode.gif

快捷键

VSCode 官方提供的快捷键(Windows 版)如下图:

VSCode 快捷键-Windows.png

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

插件

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

Chinese (Simplified)

Chinese (Simplified).png

简介:中文语言包,必备。

官网:marketplace.visualstudio.com/items?itemN…

Beautify

Beautify.png

简介:格式化代码所用。

官网:marketplace.visualstudio.com/items?itemN…

Prettier - Code formatter

Prettier - Code formatter.png

简介:格式化代码所用。

官网:marketplace.visualstudio.com/items?itemN…

open in browser

open in browser.png

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

官网:marketplace.visualstudio.com/items?itemN…

使用:在 HTML 文件右键选择 Open In Default BrowserOpen In Other Browser

open in browser 使用.png

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2.png

简介:使嵌套的括号(大括号中括号和小括号)呈现不同颜色,便于区分。

官网:marketplace.visualstudio.com/items?itemN…

效果:

Bracket Pair Colorizer 2 使用效果.png

indent-rainbow

indent-rainbow.png

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

官网:marketplace.visualstudio.com/items?itemN…

效果:

indent-rainbow 使用效果.png

Auto Rename Tag

Auto Rename Tag.png

简介:修改标签的一处时,另外一处与之对应的标签(如果有)也会自动被修改。

官网:marketplace.visualstudio.com/items?itemN…

效果:

Auto Rename Tag 使用效果.gif

Better Comments

Better Comments.png

简介:注释变色,让你的注释与众不同。

官网:marketplace.visualstudio.com/items?itemN…

使用:

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

效果:

Better Comments 使用效果.png

Power Mode

简介:打字特效,让 coding 不再枯燥。

官网:marketplace.visualstudio.com/items?itemN…

配置:

启动 Power Mode.png Power Mode 选择不同打字效果.png

效果:

Power Mode 使用效果.gif

Snazzy Light

Snazzy Light.png

简介:浅色主题。

官网:marketplace.visualstudio.com/items?itemN…

vscode-icons

vscode-icons.png

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

官网:marketplace.visualstudio.com/items?itemN…

Windows opacity

Windows opacity.png

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

官网:marketplace.visualstudio.com/items?itemN…

参考资料

评论(1)