【推荐学习:《vscode教程》】
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.
https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code
2. Javascript (ES6) Code Snippets
https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code
我喜欢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)暂存器。 这意味着你可以在自己喜欢的编辑器中测试一段代码!