未加星标

The best Visual Studio Code extensions for JavaScript and Node

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

VSCode (Visual Studio Code) has exploded in popularity since its first release in 2015 and has now become the editor of choice for many web developers, especially those working with javascript on the frontend and Node.js on the backend.

While VSCode already has robust support for JavaScript and TypeScript by default, its community of users has made several extensions that enhance the default feature set, giving it added functionality that very few text editors can match.

Without further ado, let’s explore the some of the best VSCode extensions for JavaScript developers:

Prettier

Prettier makes your life easier by automatically formatting code for you. This helps you maintain a consistent coding style across your various projects and is especially helpful when working in a team or in an open source project where coding styles often conflict.

Now, you can just agree on a specific style with your team members and configure Prettier to enforce your guidelines. You can use Prettier via the command line, but there’s a nifty extension for VSCode that integrates the tool with your editor making it easy to format your code when you save the file you’re working with.

It supports other languages aside from JavaScript such as CSS, SCSS, Vue, TypeScript, JSON and others which makes it a versatile tool for all your code formatting needs.

Quokka.js
The best Visual Studio Code extensions for JavaScript and Node

Quokka.js brings an alive playground to your editor which is handy for a quick experimentation or when teaching others. It runs your code immediately you type it in and shows you the various execution results inline in your editor without having to open the console.

You can just install the extension for VSCode and start using it right away without fiddling with any setup process. In addition to full support for JavaScript and TypeScript, it can also simulate the browser environment with the help of jsdom .

Snippets

Snippets are an important feature that developers commonly take advantage of to make writing repetitive code much faster. For example, you can type clg and hit the Tab key to produce console.log() . Similarly, thenCatch is expanded to a .then() and a .catch() declaration to a Promise.

There are several snippet extensions for all sorts of languages, frameworks, and libraries. Here are a handful of extensions that should prove useful for you when working on a JavaScript project:

JavaScript (ES6) code snippets Angular v6 Snippets React-Native/React/Redux snippets for es6/es7

You can find more snippet extensions for other languages and libraries on the Visual Studio Code Marketplace .

Import Cost
The best Visual Studio Code extensions for JavaScript and Node

Import Cost shows you the size of an imported third-party package inline in your editor to help you make better decisions about what packages to include in your application so as to avoid shipping massive bundles to your customers.

Auto Import
The best Visual Studio Code extensions for JavaScript and Node

Auto Import finds all the imports in your file and provides code actions and completion for each one. When working with TypeScript, you can just start using the module and this extension will add the appropriate import statement for you at the top of the file.

Auto Rename Tag
The best Visual Studio Code extensions for JavaScript and Node

Auto Rename Tag helps you automatically rename paired HTML/XML tags in your project. As soon as you change one tag, the other is updated to match the change. This also works with JSX and TSX so it will prove a very handful for you if you use either syntax to describe the UI of your application.

Auto Close Tag
The best Visual Studio Code extensions for JavaScript and Node

Auto Close Tag does exactly what the name suggests ― it automatically adds the closing tag for HTML/XML tags. Although Visual Studio Code has built-in support for closing tags automatically in HTML files, this extension brings the same functionality for other languages such as Vue, JavaScript, TypeScript, JSX and so on.

Settings Sync

It is often useful to maintain the same configuration for your editor across all machines to keep things consistent. Even if you use just one machine, it is useful to have a process for backing up all your settings so that if something goes wrong, or if you move to a new machine, you can easily restore your preferences with one click.

This is where an extension like Settings Sync helps. It synchronizes your Visual Code settings across multiple instances. This includes your preferences, themes, snippets, extensions and keybindings. It is very easy to use and won’t take you much time to set it up so I highly recommend that you check it out.

Live Server
The best Visual Studio Code extensions for JavaScript and Node

Live Server helps you spin up a quick development server that automatically reloads your project in the browser as you make changes. This extension not only works with static files, it also auto reloads the browser when you make changes in your server-side code which is super handy for all you Node.js developers.

Wallaby.js
The best Visual Studio Code extensions for JavaScript and Node

Wallaby.js improves your unit testing workflow in JavaScript, TypeScript or CoffeeScript by running your tests immediately as you type, and printing the execution results inline in your editor similar to how Quokka.js does it. In fact, it’s made by the same team behind Quokka. It also provides beautiful test and code coverage reports that are updated in realtime.

Wallaby.js costs $100 for a single user license, but it offers a free trial period for you to test and evaluate the product.

ESLint

ESLint is the most configurable linter for JavaScript. It helps you detect and fix a common class of errors in your code. It is also useful for enforcing specific coding conventions within a project or team. The VSCode extension integrates the tool with your editor so that you can be warned about potential problems on the fly.

Document This
The best Visual Studio Code extensions for JavaScript and Node

Document This automatically generates detailed JSDoc comments for both TypeScript and JavaScript files. It comes with full support for JSDoc and Closure Compiler tags such as @class , @description , @enum , @export , @function , @implements , @interface , @param , @private , @returns , @static , @template , @type and @memberOf .

Conclusion

As you can see, Visual Studio Code supports many extension that will help you become more a more productive JavaScript developer. Hopefully, this article has helped you discover some useful tools.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: your,JavaScript,code
分页:12
转载请注明
本文标题:The best Visual Studio Code extensions for JavaScript and Node
本站链接:https://www.codesec.net/view/588552.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(91)