用作JavaScript开拓人士,那些至关重要的VS Code插件

9. 其他棒棒的插件

我把下一批VS Code的插件归为”厉害的”(awesome)这一类,因为这个描述恰到好处。

  • Quokka.js:非常厉害的调试工具,为JavaScript提供了快速构建原型的演练场,并且附带有很好的文档。
  • Paste as JSON:快速地将JSON数据转为JavaScript代码。源码:quick-type。

上海时时乐走势图官网 1

  • Code Metrics:这是另一个非常棒的插件,计算JavaScript和TypeScript代码中复杂度。源码:codemetrics。

上海时时乐走势图官网 2

上海时时乐走势图官网 3

上海时时乐走势图官网 4

Color Highlight
颜色值在代码中高亮显示

Live Sass Compiler

实时编译 sass ,不过需要配置,附上我的配置

"liveSassCompile.settings.formats":[
        // You can add more
        {
            "format": "compressed",//压缩
            "extensionName": ".min.css",//编译后缀名
            "savePath": "./css"//编译保存的路径
        }
    ],

使用

总结

VS Code拥有大量的高质量插件,这让它在JavaScript开发者群体中广受欢迎。写JavaScript代码,再没有比现在更容易了。

像ESLint这样的插件,帮助你避免代码中的常见错误;Debugger for Chrome,帮助你更容易地调试代码;带有智能提示的Node.js插件帮助你正确引用模块;像Live Server和REST client这样的可用工具,让你在完成工作时减少了对外部工具的依赖;再比如SpreadJS纯前端表格控件,让在线Excel嵌入您的应用。所有这些工具,都极大地加快了你的迭代流程。

我希望这些列表让你接触到新的VS Code插件,对你的工作流程有帮助。

1 赞 收藏 评论

上海时时乐走势图官网 5

File Peek
根据路径字符串,快速定位到文件

Project Manager

工程项目过多时,shift cmd p(shift ctrl p) 然后输入project,第一次选择edit Project编辑自己的工程项目,之后就可以直接选择open打开你的项目

7. 框架类插件

对于大多数项目,你会使用合适的框架去构建你的代码,以减少开发时间。VS Code通过插件对大多数主流框架都做了支持。然而,仍有一些特定框架没有得到完全的支持。下面是一些提供了强大功能的VS Code插件。

  • Angular 6:提供Angular 6的代码片段,支持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。目前有220多万的下载量和172个Angular代码片段。
  • Angular v5 snippets:提供针对TypeScript、RxJS、HTML和Docker文件的代码片段。目前有270多万的下载量。
  • React Native/React/Redux snippets for es6/es7:提供对这些框架的ES6/ES7语法的代码片段。
  • React Native Tools:为React Native框架提供代码智能提示、命令行工具和调试特性。
  • Vetur:为Vue框架提供语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持。它带有很好的发布在GitBook上的文档。
  • Ember:为Ember提供了命令行支持和智能提示。安装完后,所有ember cli的命令可直接在VS Code自己的命令行列表中使用。
  • Cordava Tools:支持Cordava插件和Ionic框架,提供基于Cordova的项目的智能提示、调试已经其他特性的支持。
  • jQuery Code Snippets:提供了超过130个jQuery的代码片段,使用jq前缀来激活。

Settings Sync
VSCode设置同步到Gist

VueHelper

vue代码片段

6. 浏览器插件

除非你是在用JavaScript写控制台程序,否则你多半会在浏览器中执行你的JavaScript代码。这意味着,你会频繁地刷新浏览器以观察每次你更新代码的效果。这里有一些工具,能极大地减少你开发时的这种重复流程,而不是每次都手动刷新浏览器:

  • Debugger for Chrome:在编辑器中打断点,让你轻松地在Chrome里调试JavaScript。源码:vscode-chrome-debug。

上海时时乐走势图官网 6

  • Live Server:开启本地开发时服务器,为静态和动态页面提供实时刷新功能。源码:vscode-chrome-debugvscode-live-server。

上海时时乐走势图官网 7

  • Preview on Web Server:提供web服务器和实时预览功能。
  • PHP Server:对测试只能在客户端运行的JavaScript代码很有用。
  • Rest Client:相较于用浏览器或者一个CURL程序来测试你的REST API端点,你可以安装这个工具,直接在编辑器里相互性地发HTTP请求。

PostCss Sorting
css排序

Boxy Theme Kit


大家还有什么好的插件推荐吗

本文由上海时时乐走势图发布于web前端,转载请注明出处:用作JavaScript开拓人士,那些至关重要的VS Code插件

您可能还会对下面的文章感兴趣: