Visual Studio Code 扩展推荐


由于VSCode貌似没有导出扩展列表的功能,所以在此记录下自己经常用到的一些扩展,同时也推荐给更多的朋友,希望能对大家有所帮助。
扩展列表按名称排序

Auto Close Tag

输入开始标签后,自动添加结束标签。比如输入<div>,自动添加</div>

Auto Rename Tag

更改HTML/XML标签名时,自动更新相对应的开始标签或结束标签的标签名

Beautify

格式化javascript,JSON,CSS,Sass和HTML代码

Better Comments

编写更加人性化的注释


Annotated code
Annotated code

Bookmarks

添加行书签

C#

使用VSCode编写C#代码必须的,安装之后在默认打开.cs文件时 还会自动下载调试器等

C# Extensions

C#扩展插件,强烈推荐,可以帮你在建立文件的时候初始化文件内容包括对应的命名空间等

C# XML Documentation Comments

可以快速的帮你添加注释,如同在VS里面使用///来添加注释

Can I Use

HTML5、CSS3、SVG的浏览器兼容性检查

Code Outline

函数变量列表

Code Runner

运行选中代码段(支持大量语言,包括Node)

Color Highlight

颜色代码高亮插件

Color Info

提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了

Color Picker

拾色器

CSScomb

css属性排序

cssrem

px转换为rem

Debugger for Chrome

方便js调试的插件,前端项目在Chrome中运行起来之后,可以直接在VSCode中打断点、查看输出、查看控制台,需要配置launch.json,详情见插件说明。

Document This

jsdoc注释生成

EditorConfig for Visual Studio Code

ESLint

这是个esint规则校验扩展。vs code 会自动找到你工程中的.eslintrc和.eslintignore。你只需要设置下elsint选项。

Express

使用Visual Studio代码中的Express Web服务器托管当前工作空间

File Peek

根据路径字符串,快速定位到文件

Font-awesome codes for html (snippets)

FontAwesome提示代码段

Git Blame

可以查看当前光标所在位置的Git Log,最近一次提交的人和时间,显示在左下角

Git History

查看git log

Guides

高亮缩进基准线

HTML CSS Support

css提示(支持vue)

HTML Snippets

增强了zen-coding,增加了H5的自动补全,安装后每次打开自动启用

Import Cost

在引入npm包同时获取所用包的体积,可配置显示格式(minified or gziped)

Indenticator

缩进高亮

IntelliSense for CSS class names

CSS类名工具

JavaScript (ES6) code snippets

es6代码片段

JavaScript Standard Style

JavaScript 标准编码风格

  • 使用两个空格 – 进行缩进
  • 字符串使用单引号 – 需要转义的地方除外
  • 不再有冗余的变量 – 这是导致 大量 bug 的源头!
  • 无分号 – 这里有3篇文章说明不用分号的好处:文章1 文章2 文章3
  • 行首不要以 (, [, or `开头
  • 关键字后加空格 if (condition) { ... }
  • 函数名后加空格 function name (arg) { ... }
  • 坚持使用全等 ===摒弃 ==一但在需要检查 null || undefined时可以使用 obj == null
  • 一定要处理 Node.js 中错误回调传递进来的 err参数。
  • 使用浏览器全局变量时加上 window前缀 – documentnavigator除外
  • 避免无意中使用到了这些命名看上去很普通的全局变量, open, length,event 还有 name
  • 请参阅 完整的规则列表

npm

运行npm命令

Npm Intellisense

对package.json内中的依赖包的名称提示

Output Colorizer

彩色输出信息

Path Autocomplete

路径完成提示

Path Intellisense

文件路径补全

Prettify JSON

格式化JSON

SpellChecker

自然语言的拼写检查

SVG Viewer

svg预览

Trailing Spaces

突出显示尾随空格并将其删除

Version Lens

package.json文件显示模块当前版本和最新版本

vetur

vue单文件能够像html,js,css一样编写,注释

View In Browser

右键在浏览器打开

Visual Studio Code Format

vscode代码格式增强工具

vscode-icons

美化VSCode的界面,在文件名前面显示小图标

Vue 2 Snippets

vue2的语法高亮,语法提示

VueHelper

Vue2代码段(包括Vue2 api、vue-router2、vuex2)

wpy-beautify

vue2单文件格式化

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,937评论 18 139
  • 参考聊聊架构里面的文章 UI组件 element ★9305 - 饿了么出品的Vue2的web UI工具套件Vux...
    wangxiaoda阅读 1,486评论 0 14
  • 种草给大家,我的Atom在windows上最近老闪退,所以换VScode喽。在Mac上Atom还是蛮好用的。 去官...
    续写那未完的记忆阅读 5,120评论 1 3
  • 没想到三年后的再一次重逢 是在闹哄哄的佐丹奴 我在试衣镜前看着自己 就突然看到了身后的你 一怔之间 感觉一切都没有...
    仔仔姨阅读 947评论 0 2
  • 01 在简书上参加了好多个群,开始是应专栏编辑邀请而入群的,有连载群、短篇小说群、谈写作群等,后来又参加了陈远歌的...
    浮生小姿阅读 708评论 28 36