1.VsCode官方插件地址:

https://marketplace.visualstudio.com/vscode

http://code.visualstudio.com/docs

官网下载地址:http://code.visualstudio.com/

2.使用方法,可以在官网中搜索需要的插件或者在VsCode的“”扩展“”中搜索需要的插件

VSC可以装jQuery vscode下载jquery_HTML


3.常用插件说明:

一、HTML Snippets

二、HTML CSS Support

让HTML标签上写class智能提示当前项目所支持的样式
三、Debugger for Chrome

让vscode映射chrome的debug功能,静态页面都可以用vscode来打断点调试、配饰稍微复杂一点
四、JQuery Code Snippets

jquery提示工具
五、Path Intellisense

自动路径补全、默认不带这个功能
六、Npm Intellisense

require 时的包提示
七、Document this
Js的注释模板

八、ESlint
ESlint接管原声js提示,可以自定制体会规则。这个比较高玩、

九、Project Manager
十:Auto Rename Tag
自动匹配标签
十一:Auto Close Tag 自动匹配闭合标签
多个项目之间快速切换的工具

十二:GitLens — Git supercharged

显示git历史提交责任人

十三: Bracket Pair Colorizer

成对的彩色括号

十四:Color Highlight

直观显示在 css/web 中定义的颜色

十五:Highlight Matching Tag

高亮显示匹配标签

十六:Code Spell Checker

单词拼写检查

十七:Improt Cost

成本提示,这个插件可以在你导入工具包的时候提示这个包的体积,如果体积过大就需要考虑压缩包,为后期上线优化做准备。

十八:Vscode-element-helper

使用element-ui库的可以安装这个插件,编写标签时自动提示element标签名称。

十九:Version Lens

工具包版本信息,

在package.json中显示你下载安装的npm工具包的版本信息,同时会告诉你当前包的最新版本。

二十:office viewer

可打开文档表格

二十一:前端每日一题

一个前端刷题插件

二十二:韭菜盒子

VSCode 里也可以看股票 & 基金 & 期货实时数据,做最好用的投资插件

二十三:any-rule

可以在vscode里快捷使用正则表达式,不需要借助度娘了!

二十五:VS Code Counter

统计代码总行数、注释行数、空白行数,以及使用的语言。

二十六:Trailing Spaces

突出显示尾随空格,让你的“空格”型强迫症 显示呈现

二十七:Error Lens

将编辑器诊断出的警告、错误、语法问题(提示的波浪线)等,以用颜色填充行背景的方式突出提示,并将诊断信息显示在尾部。

二十八:Better Comments

通过添加彩色注释来改进您的代码并使其更具吸引力。

二十九:Css Peek

使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码

三十:Quokka

是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。另外,在使用 JSX 或 TypeScript 项目中,它能够开箱即用。

三十一:TabNine

Al辅助代码补全神器。可以根据你写过的代码习惯,来给你匹配合适的字段。

三十二:vue Peek

点击组件可以跳转至组件定义的文件

三十三:Indent-Rainbow

让缩进带有颜色

VSC可以装jQuery vscode下载jquery_CSS_02


三十四:image preview图片预览插件

三十五:Local History

这个就很强了,本地代码的修改记录。通常我们写错代码了可以撤销,但是撤销完以后再修改,想要取消撤销就难了。有了这个插件直接看代码的修改记录。还可以跟当前版本进行对比,神器。

安装完以后,项目根目录下会自动生成 .history 的文件夹。代码的修改记录就会放在这里面。记得添加.gitignore,不然每次提交代码的时候就要取消

三十六:Partial Diff

文件比较界的大拿肯定是 Beyond Compare 了,但是它是收费的!那么 Partial Diff 这款神奇的插件就成为了良好的替代品,选中一代码,右键 Select Text for Compare ,选中另外一部分代码,右键Compare Text with Previous Selection即可

三十七:Postcode

这个插件就基本上可以理解为,在 vscode 里面使用 postman

VSC可以装jQuery vscode下载jquery_CSS_03


三十八:px to rem & rpx自动换算单位的插件。出现提示以后回车即可

三十九:html-comment

支持嵌套注释

使用方法(放开注释同下)

Windows

Ctrl+Shift+/

Mac

Control+Shift+/

VSC可以装jQuery vscode下载jquery_json_04


四十:htmltagwrap

我们可以选择一段 DOM 标签,然后按住 Options+w,就可以在外层创建一个标签了。

Windows

Alt+w

Mac

Options+w

四十一:peacock

VSCode不同窗口设置不同颜色

使用快捷键 Ctrl+Shift+P 可以快速调出 Command Palette,输入 “Peacock:”

VSC可以装jQuery vscode下载jquery_vscode需要下载的扩展_05


我们选择 “Peacock: Change to a Favorite Color”,选择自己喜欢的颜色

1.1 启动窗口自动设置颜色:

设置----插件扩展–peacock----“peacock.surpriseMeOnStartup” 设置为 true

VSC可以装jQuery vscode下载jquery_vscode需要下载的扩展_06


打开:settings.json 进行设置

VSC可以装jQuery vscode下载jquery_CSS_07


VSC可以装jQuery vscode下载jquery_HTML_08

VSC可以装jQuery vscode下载jquery_json_09


注意:每个文件生成一个setting.json 需要在提交的时候忽略

VSC可以装jQuery vscode下载jquery_json_10