美文网首页Web前端之路Vue.js专区
Visual Studio Code 扩展推荐

Visual Studio Code 扩展推荐

作者: 0非空0 | 来源:发表于2017-10-25 10:34 被阅读1719次

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

Auto Close Tag

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

Auto Rename Tag

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

Beautify

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

Better Comments

编写更加人性化的注释


Annotated codeAnnotated 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单文件格式化

相关文章

网友评论

    本文标题:Visual Studio Code 扩展推荐

    本文链接:https://www.haomeiwen.com/subject/ypdfnttx.html