Recommended VSCode extensions for Javascript and Typescript development
- Programming Languages
- Snippets
- Other
- View Node Package
- Indenticator
- npm Intellisense
- Bracket Pair Colorizer 2
- npm
- Jest Test Explorer
- GitHub Pull Requests and Issues
- Sort lines
- Sort JSON objects
- Path Intellisense
- Import Cost
- Test Explorer UI
- Markdown Preview Enhanced
- Jest
- Visual Studio IntelliCode
- EditorConfig for VS Code
- Live Share
- GitLens — Git supercharged
Total Extension Count: 26
A port of DotENV for vscode.
Combine the functions of Auto Close Tag and Auto Rename Tag
| Extension | Status |
|---|---|
| Auto Close Tag |    |
| Auto Rename Tag |    |
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
Node.js Interactive Window (REPL) for Visual Studio Code using Node.js command line right in your favorite IDE. Simply press CTRL + SHIFT + P and launch "Node.js Interactive window (REPL)".
This is a preview and I would really love some feedback if something is not working as it should.
Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
Integrates ESLint into VS Code. If you are new to ESLint check the documentation.
The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.
On new folders you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal. If you have installed ESLint globally (see above) then run eslint --init in a terminal. If you have installed ESLint locally then run .\node_modules\.bin\eslint --init under Windows and ./node_modules/.bin/eslint --init under Linux and Mac.
Includes snippets for ignoring; a block, the current line, or the next line.
- Start typing
eslint-disablein a javascript, javascriptreact, or jsx file to trigger the snippet autocomplete. - Type the rule you want to disable or leave empty to disable all rules.
- Press
tabto drop your cursor at a helpful position. - Press
option+↓to move the current line down. This is useful if you are wrapping a block of code.
Visual Studio Code plugin that autocompletes npm modules in import statements.
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.
Screenshot:
This extension supports running npm scripts defined in the package.json file and validating the installed modules
against the dependencies defined in the package.json.
Notice The validation is done by running npm and it is not run when the modules are managed by yarn.
The package.json validation reports warnings for modules:
- that are defined in the package.json, but that are not installed
- that are installed but not defined in the package.json
- that are installed but do not satisfy the version defined in the package.json.
Quick fixes to run npm are provided for reported warnings.
Commands for running scripts are available the npm category.
- Run npm install, also available in the context menu of the explorer when the
package.jsonfile - Run a script (
npm run-script) defined in thepackage.jsonby picking a script defined in thescriptssection of thepackage.json. - Rerun the last npm script you have executed using this extension.
- Terminate a running script
The scripts can be run either in the integrated terminal or an output window.
Support for Macbook Pro touch bar. You can run the following commands:
- npm install
- npm start
- npm test
- npm build
Run your Jest tests using the Test Explorer UI.
Forked and adopted from rtbenfield/vscode-jest-test-adapter where it appeared abandoned. The project had a lot of potential, so it was adopted here.
Review and manage your GitHub pull requests and issues directly in VS Code
This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code. The support includes:
- Authenticating and connecting VS Code to GitHub.
- Listing and browsing PRs from within VS Code.
- Reviewing PRs from within VS Code with in-editor commenting.
- Validating PRs from within VS Code with easy checkouts.
- Terminal integration that enables UI and CLIs to co-exist.
- Listing and browsing issues from within VS Code.
- Hover cards for "@" mentioned users and for issues.
- Completion suggestions for users and issues.
- A "Start working on issue" action which can create a branch for you.
- Code actions to create issues from "todo" comments.
Sort lines of text in Visual Studio Code. The following types of sorting are supported:
| Command | Title | Comments |
|---|---|---|
| sortLines.sortLines | Sort lines (ascending, case sensitive) | Keybound to F9* |
| sortLines.sortLinesCaseInsensitive | Sort lines (ascending, case insensitive) | |
| sortLines.sortLinesCaseInsensitiveUnique | Sort lines (unique ascending, case insensitive) | |
| sortLines.sortLinesReverse | Sort lines (descending, case sensitive) | Reverse character code based sort |
| sortLines.sortLinesLineLength | Sort lines (line length ascending) | |
| sortLines.sortLinesLineLengthReverse | Sort lines (line length descending) | |
| sortLines.sortLinesVariableLength | Sort lines (variable length ascending) | |
| sortLines.sortLinesVariableLengthReverse | Sort lines (variable length descending) | |
| sortLines.sortLinesNatural | Sort lines (natural) | Sorts alphabetically but groups multi-digit numbers (Wikipedia) |
| sortLines.sortLinesUnique | Sort lines (unique ascending, case sensitive) | Regular character code keeping only unique items |
| sortLines.sortLinesShuffle | Sort lines (shuffle) | |
| sortLines.removeDuplicateLines | Sort lines (remove duplicate lines) |
* Note that this overrides the toggle breakpoint keybinding, you can unbind it by adding this to your keybindings.json file:
`{ "key": "f9", "command": "-sortLines.sortLines", "when": "editorTextFocus" }`
Alphabetically sorts the keys in selected JSON objects.
Please take care using this - I've tried to ensure it won't invalidate your JSON. But, as it has to parse > sort > stringify, there is a chance it'll lose something. It should be fine for plain JSON.
Disclaimer:
Visual Studio Code plugin that autocompletes filenames.
This extension will display inline in the editor the size of the imported package.
The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
This extension provides an extensible user interface for running your tests in VS Code. It can be used with any testing framework if there is a corresponding Test Adapter extension.
Other extensions can get full access to the Test Adapters by acting as Test Controllers.
The Test Explorer can also be used in VS Live Share sessions by installing the Test Explorer Live Share extension.
This extension will be automatically installed when you install one of the Test Adapters, so there is usually no need to install this extension manually.
If you are interested, please try out our new prototype web app: 0xGG/crossnote
Content
- The Aim
- Maintainers
- Features
- How to get it?
- How to get it set up?
- How to start Jest?
- How do I debug tests?
- How do I show code coverage?
- Inspiration
- Wanted
- Troubleshooting
- Want to Contribute?
The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
You'll need Visual Studio Code October 2018 Release 1.29.1 or later to use this extension. For each supported language, please refer to the "Getting Started" section below to understand any other pre-requisites you'll need to install and configure to get IntelliCode completions.
For C#, C++, TypeScript/JavaScript, and XAML support in the Visual Studio IDE, check out the IntelliCode extension on the Visual Studio Marketplace.
This plugin attempts to override user/workspace settings with
settings found in .editorconfig files. No additional or vscode-specific files
are required. As with any EditorConfig plugin, if root=true is not specified,
EditorConfig will continue to look
for an .editorconfig file outside of the project.
Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.
Additionally, unlike traditional pair programming, Visual Studio Live Share allows developers to work together, while retaining their personal editor preferences (e.g. theme, keybindings), as well as having their own cursor. This allows you to seamlessly transition between following one another, and being able to explore ideas/tasks on your own. In practice, this ability to work together and independently provides a collaboration experience that is potentially more natural for many common use cases.
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
For detailed information, refer to individual extension documentation.
Keywords: visual studio code, extension