对于Web开发最棒的22个Visual Studio Code插件
翻译 原文作者:James Quick 原文地址:https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development
@
- 1. Debugger for chrome
- 2. Javascript (ES6) Code Snippets
- 3. ESLint
- 4. Live server
- 5. Bracket Pair Colorizor
- 6. Auto Rename Tag
- 7. Quokka
- 8. Path Intellisense
- 9. Project Manager
- 10. Editor Config
- 11. Sublime Text Keymap
- 12. Browser Preview
- 13. Git Lens
- 14. Polacode
- 15. Prettier
- 16. Better Comments
- 17. Git Link
- 18. VS Code Icons
- 19. Material Icon Theme
- 20. Settings Sync
- 21. Better Align
- 22. VIM
1. Debugger for chrome
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
相信我,调试JavaScript不仅仅是写 console.log() (虽然这种方式应用最多)。Chrome内置了一些功能,可以拥有更好的调试体验。这个插件能让你在vs code里使用所有(或者几乎所有)这些调试功能。
如果你想了解更多,你可以阅读:
Debugging JavaScript in Chrome and Visual Studio Code.
2. Javascript (ES6) Code Snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
我喜欢Snippets插件。我觉得没有必要反复输入同一段代码。这个插件为你提供了流行的(ES6)JavaScript代码片段。
注…如果你没有用es6javascript特性——赶紧用起来吧!
3. ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
是否想编写更好的代码? 是否需要整个团队使用一致的格式? 安装ESLint。 这个插件可以配置为自动设置代码格式以及带有错误或警告的“yell(提示)”。 VS Code通过合适的配置,可以向你展示这些提示。
4. Live server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
在代码编辑器中进行更改,切换到浏览器,然后刷新以查看更改。 那是开发人员无休止的循环,但是如果你在进行更改时浏览器会自动刷新会怎样呢? 这就是Live Server的用武之地!
它还在本地服务器上运行你的应用程序。 有些事情只有在服务器里运行应用程序时才能测试,因此这也是个利好之处。
5. Bracket Pair Colorizor
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
括号阻止开发人员活着的祸害。 使用大量嵌套代码,几乎不可能确定哪些括号彼此匹配。 Bracket Pair Colorizor(如你所料)为括号匹配颜色,以使代码更具可读性。 相信我,你想要!
6. Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
是否需要重命名HTML中的元素? 好了,使用“Auto Rename Tag”,你只需要重命名开始或结束标签,其他标签将自动重命名。 简单但有效!
7. Quokka
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
需要一个快速的地方来测试一些JavaScript吗? 我曾经习惯在Chrome中打开控制台,然后在其中输入一些代码,但缺点很多。 Quokka在VS Code中为你提供了一个JavaScript(和TypeScript)暂存器。 这意味着你可以在自己喜欢的编辑器中测试一段代码!
8. Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
在大型项目中,记住特定的文件名和文件所在的目录可能会很麻烦。 此插件将为你提供智能提示。 当你开始在引号中输入路径时,你将看到目录和文件名的智能提示。 这样可以避免你在文件浏览中花费大量时间:)
9. Project Manager
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
我讨厌的一件事是在VS Code中的项目之间切换。 每次我必须打开文件资源管理器并在计算机上找到项目时。 但这随Project Manager 的应用而改变。 使用此插件,你可以在项目的侧边菜单中打开一个额外的菜单。 你可以在项目之间快速切换,保存收藏夹或从文件系统自动检测Git项目。
如果你开发多个不同的项目,那么这是保持组织状态和提高效率的好方法。
10. Editor Config
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
Editor Config是少数几种编码样式的标准,在主要文本编辑器/ IDE中都得到支持。 运行方式如下如下。 你将配置文件保存在你的编辑器支持的存储库中。 在这种情况下,你必须为VS Code添加扩展名,以使其遵守这些配置文件。 设置起来超级容易,非常适合团队项目。
11. Sublime Text Keymap
https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings
你是Sublime的狂热用户,不愿意切换到VS Code吗? 通过更改所有快捷方式以匹配Sublime的快捷方式,此扩展程序将使你切换得没有任何感知。 现在,你有什么理由不进行切换?
12. Browser Preview
https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
我喜欢 Live Server extension 扩展(上文提到的),但就便利性而言,这个扩展更进一步。它为您提供了VS Code内部的实时重新加载预览。 无需再查看浏览器即可看到很小的变化!
13. Git Lens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
git插件一大堆,但是其中一个功能最强大,最多。 您会得到有关警告的信息,行和文件的历史记录,提交搜索等等。 如果你需要有关Git工作流程的帮助,请从这个插件开始!
14. Polacode
https://marketplace.visualstudio.com/items?itemName=pnp.polacode
你知道你在博客和推特中看到的那些漂亮的代码截图吗? 好吧,很可能它们来自Polacode。 使用起来超级简单。 将一段代码复制到剪贴板,打开扩展名,粘贴代码,然后单击保存图像!
15. Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
不要花时间格式化代码...它做了。 前面,我提到了ESLint,它提供格式化和检查。 如果你不需要棉绒检查,那么选择Prettier。 它非常容易设置,可以配置为在保存时自动格式化代码。
16. Better Comments
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
此插件对各种类型的注释进行不同颜色标记,以赋予它们不同的含义,并在其余代码中突出。 我一直在用这个来做提示。 很难忽略一个橙色的大提示,告诉我我有一些未完成的工作要做。
还有用于问题,警报和强调的颜色代码。 你也可以添加自己定义的!
17. Git Link
https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink
如果你想在Github中查看正在处理的文件,则这个插件适合你。 安装后,只需右键单击文件,你将看到在Github中打开文件的选项。 如果你不使用Git Lens插件的话,这个插件对于检查历史记录,分支版本等非常好用。
18. VS Code Icons
https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
你知道可以自定义VS Code中的图标吗? 如果你查看设置,将会看到“文件图标主题”的选项。 从那里,你可以从预安装的图标中选择或安装图标包。 这个插件为你提供了一个非常可爱的图标包,已有1100万人使用!
19. Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
你是Google Material 设计的粉丝吗? 那么,检出这个“ Material主题”图标包。 有数百种不同的图标,它们看起来很棒!
20. Settings Sync
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
开发人员(包括我自己)花费大量时间自定义开发环境,尤其是文本编辑器。 使用“Settings Sync”插件,你可以在Github中保存设置。 然后,可以使用一个命令将它们加载到任何新版本的VS Code。
21. Better Align
https://marketplace.visualstudio.com/items?itemName=wwm.better-align
如果你是那种喜欢代码中完美对齐的人,那么你需要Better Align。 你可以对齐多个变量声明,尾随注释,代码段等。没有比安装并尝试一下更好的办法来了解这个插件的过人之处了!
22. VIM
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim
你是VIM深度用户吗? 如果是的话,恭喜,你所掌握所有VIM骚操作,可以直接在VS Code中使用它。 我个人并不善于此道,但是我知道使用VIM发挥其潜力时会产生多么疯狂的生产力,从而为你提供更多的功能。
对于Web开发最棒的22个Visual Studio Code插件的更多相关文章
- 30个极大提高开发效率的Visual Studio Code插件
译者按: 看完这篇文章,我打算从 Sublime Text 转到 Visual Studio Code 了! 原文: Immensely upgrade your development enviro ...
- 角落的开发工具集之Vs(Visual Studio)2017插件推荐
因为最近录制视频的缘故,很多朋友都在QQ群留言,或者微信公众号私信我,问我一些工具和一些插件啊,怎么使用的啊?那么今天我忙里偷闲整理一下清单,然后在这里面公布出来. Visual Studio 201 ...
- 【转】角落的开发工具集之Vs(Visual Studio)2017插件推荐
因为最近录制视频的缘故,很多朋友都在QQ群留言,或者微信公众号私信我,问我一些工具和一些插件啊,怎么使用的啊?那么今天我忙里偷闲整理一下清单,然后在这里面公布出来. Visual Studio 201 ...
- .Net Core 常用开发工具(IDE和运行时、Visual Studio插件、Visual Studio Code插件)
IDE和运行时 组件名 描述 可选版本 推荐版本 Visual Studio Community 社区免费版 For Visual Studio 2017 For Visual Studio 2019 ...
- 新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows)
原文出处:新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows) 这是我的文章备份 http://www.dotblogs.com.tw/ ...
- 教你用Visual Studio Code做PHP开发 - 微软官方工具,IDE中的黑马
转载于:http://bbs.wfun.com/thread-902655-1-1.html,仅供自己备忘 本文为我在智机网的原创 ] 关于Visual Studio Code,可能有的开发者很陌生 ...
- [Tool] 使用Visual Studio Code开发TypeScript
[Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在「Windows」.「OS X」操作系统上,使用Visual Studio Code ...
- Visual Studio Code开发TypeScript
[Tool] 使用Visual Studio Code开发TypeScript [Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在 ...
- 使用Visual Studio Code开发.NET Core看这篇就够了
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9926078.html 在本文中,我将带着大家一步一步的通过图文的形式来演示如何在Visual Studi ...
随机推荐
- dup与dup2
dup与dup2 #include <unistd.h> int dup(int oldfd); /* oldfd: 要复制的文件描述符 返回值: 新的文件描述符 dup调用成功: 有两个 ...
- 【Kata Daily 190920】Square(n) Sum(平方加总)
题目: Complete the square sum function so that it squares each number passed into it and then sums the ...
- 多服务器使用Docker设置一主一从三哨兵redis(完整)
本来应该续之前那篇博客Docker配置redis哨兵模式--多服务器·上写一个下篇的,但是忽然意识到应该将必要的环境打包为一个基础镜像,在此基础上建立与redis有关的镜像,这样既能够快速打包,又能够 ...
- visual c++6.0使用VA注意事项
visual c++6.0使用VA时配置: (1)因为VA安装时会自动检索MSDEV.exe:如果V6安装在XP或者win7系统上,直接安装,添加addin即可: (2)但是如果安装在win8上,V6 ...
- leetcode两数之和go语言
两数之和(Go语言) 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复 ...
- JavaScript 读取CSS3 transform
某些场景需要读取 css3 transform的属性 例如 transform:translate(10px,10px) rotate(-45deg); 这该怎么读取呢,正则表达式?毫无疑问这很坑爹 ...
- MYSQL 存储引擎(面)
存储引擎是MySQL的组件,用于处理不同表类型的SQL操作.不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能,使用不同的存储引擎,还可以获得特定的功能. 使用哪一种引擎可以灵活选择,一个数据 ...
- Python 中 'unicodeescape' codec can't decode bytes in position XXX: trun错误解决方案
window 读取文件可以用\,但是在字符串中\是被当作转义字符来使用,'C:\Users\FrankYuan\Pictures\Camera Roll\WIN_20161010_08_51_57_P ...
- python + selenium 搭建环境步骤
介绍在windows下,selenium python的安装以及配置.1.首先要下载必要的安装工具. 下载python,我安装的python3.0版本,根据你自己的需要安装 下载setuptools ...
- 查看mongodb状态
netstat -ntlp|grep 27017