由于VSCode貌似没有导出扩展列表的功能,所以在此记录下自己经常用到的一些扩展,同时也推荐给更多的朋友,希望能对大家有所帮助。
扩展列表按名称排序
Auto Close Tag
输入开始标签后,自动添加结束标签。比如输入<div>,自动添加</div>
Auto Rename Tag
更改HTML/XML标签名时,自动更新相对应的开始标签或结束标签的标签名
Beautify
格式化javascript,JSON,CSS,Sass和HTML代码
Better Comments
编写更加人性化的注释
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
前缀 –document
和navigator
除外 - 避免无意中使用到了这些命名看上去很普通的全局变量,
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单文件格式化