精选！15 个必备的 VSCode 插件（前端类）
时间： 11:55:55
&&&& 阅读：1684
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，它很快就受到了大家的喜爱。
就像大多数 IDE 一样，VSCode 也有一个扩展和主题市场，包含了数以千计质量不同的插件。为了帮助大家挑选出值得下载的插件，我们针对性的收集了一些实用、有趣的插件与大家分享。
由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。
Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。
使用流行的 JavaScript 库 – Faker，能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码，或者经典的乱数假文段落，并且每个类别还包含了各种子类别，你可以根据自身的需求来使用这些数据。
使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。
Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个插件，你可不要错过咯！
这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。
这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。
这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过、和，与 JavaScript、CSS 和 HTML 协同工作。
虽然 VSCode 内置了开箱即用的文本转换选项，但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。
这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。
VSCode 默认支持大量的主流编程语言，但如果你所使用的编程语言不包括在内，也可以通过下载扩展包来自动添加。同时，你还可以添加一些像与&的相关 Web 开发插件包。
jpg 改 rar
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文地址：http://www.cnblogs.com/kuangke/p/7272876.html
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！197被浏览33,926分享邀请回答57 条评论分享收藏感谢收起8824 条评论分享收藏感谢收起在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
Auto Close Tag
自动添加HTML / XML关闭标签（必备）
Auto Rename Tag
自动重命名配对的HTML / XML标签(必备)
格式化javascript，JSON，CSS，Sass，和HTML
Bootstrap 4 & Font awesome snippets
包含Bootstrap 4＆Font awesome 的代码片段
Bracket Pair Colorizer
颜色识别匹配括号
Class autocomplete for HTML
智能提示HTML class =“”属性（必备）
Code Runner
非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现：
点击这个按钮就可以运行你的文件了（必备）
能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义（必备）
使用方法：将光标放在class里面的属性，右击
查文档必备，搭配 dash（不过似乎只有 mac 版）?
快捷键 ctrl + h 它根据你当前选中的语言查找 dash 里面的文档
Debugger for Chrome
让 vscode 映射 chrome 的 debug功能，使静态页面都可以用 vscode 来打断点调试
简单使用：
Document This
添加注释块
"docthis.includeAuthorTag": true,//出现@Author
"docthis.includeDescriptionTag": true,//出现@Description
"docthis.authorName": "shenzekun",//作者名字
快捷键： 按两次Ctrl+alt+d
EsLint可以帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。
Font-awesome codes for html
用于 html 的Font-awesome代码片段
在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
Git History
以图表的形式查看git日志
使用 command+shift+p（Ctrl+shift+p） 输入git log就可以看到了
git 日志插件
HTML CSS Support
在 html 标签上写class 智能提示当前项目所支持的样式（必备）
HTML Snippets
html 代码片段（必备）
html代码检测
htmltagwrap
可以在选中HTML标签中外面套一层标签
使用：选择一大段代码，然后按“Alt + W”
Indenticator
突出目前的缩进深度
IntelliSense for CSS class names
智能提示 css 的 class 名
Image Preview
鼠标移到路径里显示图像预览
JavaScript (ES6) code snippets
es6代码片段（必备）
JavaScript Snippet Pack
js代码片段（必备）
jQuery Code Snippets
jQuery 代码片段
Live Sass Compiler
实时编译 sass ,不过需要配置，附上我的配置
"liveSassCompile.settings.formats":[
// You can add more
"format": "compressed",//压缩
"extensionName": ".min.css",//编译后缀名
"savePath": "./css"//编译保存的路径
markdownlint
markdown 语法检查
Node.js Modules Intellisense
可以在导入语句中自动完成JavaScript / TypeScript模块。
npm Intellisense
在导入语句中自动填充npm模块,跟Node.js Modules Intellisense差不多
open in browser
当前的 html 文件用浏览器打开，类似 webstorm 的那四个小浏览器图标功能，前提条件html 文件必须保存
快捷键alt+b
Output Colorizer
输出提示的文字颜色有一些变化，方便获取关键信息
Path Intellisense
路径自动补全（必备）
格式化JavaScript / TypeScript / CSS 。
Project Manager
工程项目过多时，shift+cmd+p(shift+ctrl+p) 然后输入project，第一次选择edit Project编辑自己的工程项目，之后就可以直接选择open打开你的项目
写 sass 必备
vscode-faker
生成假数据，地址，电话，图片等等
打开方式shift+cmd+p(shift+ctrl+p)) 然后输入faker 就可以选择了
实时观看 javascript 的变量的变化
使用：先shift+cmd+p （ctrl+shift+p）输入 quokka 选择 new javascript 就行了?
Regex Previewer
测试正则的插件
检查typescript编程时的语法错误语法
TypeScript Importer
自动搜索工作区文件中的TypeScript定义，并将所有已知符号作为完成项，以允许代码完成。
vscode-icons
目录树图标
React-Native/React/Redux snippets for es6/es7
react代码片段，下载人数超多?
react-beautify
格式化 javascript, JSX, typescript, TSX 文件
语法高亮、智能感知
vue代码片段
Vue TypeScript Snippets
vue的 typescript 代码片段
Vue 2 Snippets
vue 2代码片段
Dracula Official
个人最喜欢的主题，应该是最好看的主题之一?
One Dark Pro
这个也好看?
Atom One Dark Theme(老版本)
这个和 One Dark Pro差不多，One Dark Pro颜色主题多一些
One Monokai Theme
里面包含黑色和白色主题，这个白色主题感觉挺好看的
Boxy Theme Kit
大家还有什么好的插件推荐吗?
5 收藏&&|&&21
你可能感兴趣的文章
2 收藏，147
1 收藏，429
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
lorem, 生成排版字符；- html2jade，提供html到jade的互转；- settings sync，保存你的 vscode 配置；- search node_modules，快速定位 node_modules 安装文件。
- lorem, 生成排版字符；- html2jade，提供html到jade的互转；- settings sync，保存你的 vscode 配置；- search node_modules，快速定位 node_modules 安装文件。
我在用webstrom的时候，编写属性，比如div里面的class时候只要输入=就自动会出现“”，但是vscode没有，请问有什么插件可以做到么？
我在用webstrom的时候，编写属性，比如div里面的class时候只要输入=就自动会出现“”，但是vscode没有，请问有什么插件可以做到么？
暂时没有发现
暂时没有发现
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
一个项目的文件结构需要改变，但是里面引入了很多的文件，如果一个一个改的话不仅仅效率低，而且很容易出问题。之前看同事的webstorm好像带有这个功能，vscode应该也有插件能够实现吧？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
webstorm 有这个功能，会提示让你修改，vscode没遇到过这样的插件
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我有一个贱贱的想法,大部分的工作用vscode来做,小部分的用webstorm来做
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我也同求啊，实在不行只能在需要改文件名时用webstorm来改了
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。9被浏览1,564分享邀请回答12 条评论分享收藏感谢收起
// intergrated terminal
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"terminal.integrated.shellArgs.windows": [
"--login", "-i"
然后呢，使用这个插件SSHExtension，你就可以在内置终端中使用ssh登陆Linux了。0添加评论分享收藏感谢收起写回答