JavaScript Oldies for Visual Studio Code

Collects extensions for Visual Studio Code to help maintaining JavaScript projects written with old frameworks and tools.

Do you have to code with old technologies like AMD, Grunt, JSHint or Karma? Do you have to document with JSDoc? Don't despair, you will still be able to use the modern VS Code efficiently :-) Check out the great extensions below:

• Debugger for Chrome
• Document This
• Fold on Open
• JSDoc Live Preview
• JSHint
• Karma Problem Matchers
• Require Module Support
• Task Explorer
• TODO Tree

Installation

Install this extension to your Visual Studio Code from the marketplace, or download a specific version of a released package and install it from the file.

Debugger for Chrome

Debug an application or Karma tests that run in the browser. Just add a launcher, place breakpoints and hit F5. It will not work right away - you will need to reload the debugging session by clicking on the green circling arrow once the test finish, so that the breakpoints get hit. Enable just the tests that you want to debug (by using fdescribe, for example) to be more efficient.

See also the marketplace page.

Document This

Place the cursor on the name of a class or function and hit Ctrl+Alt+D twice. (Yes, hit the D twice.) Continue writing the documentation comment. If you want describe an object member, place the cursor on the right side of the colon in the member declaration.

See also the marketplace page.

Fold on Open

Be rid of the endless scrolling over the "green lines", when you want to inspect the code. Collapse all block comments automatically, when you open a source file.

See also the marketplace page.

JSDoc Live Preview

If you bind the keys Shift+Alt+V the command "JSDoc: Show Preview" command, you will be able to open the preview panel quickly like with Shift+Cmd+V for Markdown.

See also the marketplace page.

JSHint

Make sure that you install jshint to node_modules in your project and configure it in the .jshintrc file.

See also the marketplace page.

Karma Problem Matchers

Observe the failed tests in the Problems window. Select the problem matcher for your test framework, reporter and browser in your task running Karma.

Also, if breakpoints do not get hit during debugging, make sure that you selected the proper problem matcher. If you see an animation waiting for the pre-launch task to finish, the expected text pattern in the terminal was not detected.

See also the marketplace page.

Require Module Support

Jump to the module where the selected class or function is declared. Configure the baseURL path to your module sources and optionally the RequireJS config file. Then enjoy the jump by hitting F12 and F4. (The "Go To Declaration" command will offer you the place where the imported argument is declared too.)

See also the marketplace page.

TODO Tree

If you still hope that the management will care about fixing the lots of TODO and FIXME comments... At least you can inspect them in a list or tree in a sidebar opened from the action toolbar.

See also the marketplace page.

License

Copyright (c) 2020 Ferdinand Prantl

Licensed under the MIT license.

The logo was based on an original icon published by Chamestudio Pvt Ltd under the Creative Commons Attribution 3.0 Unported (CC BY 3.0) license. Thank you!