Visual Studio Code 101 #6 : 10+ Javascript Node React extension in recommendation
VSC Series
∘ Introduction
∘ Story Series
∘ Main Part on VSC extension
∘ 1. Javascript / Node / React Language Support on VSC extension
∘ 2. Npm on VSC extension
∘ Summary
Introduction
Visual Studio Code is a powerful and free IDE and support 10+ language development and rich of marketplace that is managed by Microsoft official. In this story, we would share the experience on 100+ extensions, and cutting the best extensions for Javascript Node React extension that you can’t miss. Moreover, we recommend these extensions to speed your productivity up 30% and high efficiency on writing your code.
In this section “Visual Studio Code 101 #6 : 10+ Javascript Node React extension in recommendation”, we recommend you can refer the introduction JavaScript in Visual Studio Code, it show how to use VS Code as a Javascript/Node environment, and Visual Studio Code includes built-in javascript intellisense, debugging, formatting, code navigation, refactoring, and many other advanced language features.
Finally, we are going to introduce useful extensions, and we wish these extensions could help you speed up your working efficiency.
Story Series
Now, I hope to share some experience to decrease the gap from a novice to an expert. This series will introduce Visual Studio Code 101 from 0 to 100 migration from the other IDE, it contains below parts :
Series
- Visual Studio Code 101 #1 : Introduction and Get start
- Visual Studio Code 101 #2 : 20+ Recommend VSC extension you have to install in general purpose
- Visual Studio Code 101 #3 : 20+ Recommend VSC extension you have to install in advanced purpose
- Visual Studio Code 101 #4 : 7+ C_C++ extension in recommendation (Clang-Format)
- Visual Studio Code 101 #5 : 10+ Python extension in recommendation
- Visual Studio Code 101 #6 : 10+ Javascript Node React extension in recommendation
- Visual Studio Code 101 #7 : 10+ HTML CSS extension in recommendation
- Visual Studio Code 101 #8 : 10+ Docker and kubernetes container extension in recommendation
- Visual Studio Code 101 #9 : 10+ CICD Jenkins, Gitlab, Github Action, and Azure-pipeline extension in recommendation
- Visual Studio Code 101 #10 : DevOps Engineer extension in recommendation
- Visual Studio Code 101 #11 : Cloud Engineer extension in recommendation
1. Javascript / Node / React Language Support on VSC extension
Got your Javascript / Node / React perfect fit in VSCode IDE!! First of all, VScode build-in feature support lost of javascript feature, so I recommend you check the introduction JavaScript in Visual Studio Code at first if you don’t have any idea on Javascript / Node / React extension.
ESLint
- CodeName: dbaeumer.vscode-eslint
- Description: Integrates ESLint JavaScript into VS Code.
- Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
- VSC Link: Link
- Comment: You have to use that. I use this extension to format my js files with eslint rule, and I share the eslint rule to my team in order to align the same coding style. 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. Truly recommendation.
- Quick View:
Babel JavaScript
- CodeName: mgmcdermott.vscode-language-babel
- Description: VSCode syntax highlighting for today’s JavaScript.
- Given Ranking: ⭐⭐⭐⭐ 4 stars
- VSC Link: Link
- Comment: You can use that. I use this extension to coding react JSX with JavaScript syntax highlighting. This extension support ES201x JavaScript, React (including JSX), FlowType, and GraphQL code highlighting within template strings.
- Quick View:
JavaScript Debugger (Nightly)
- CodeName: ms-vscode.js-debug-nightly
- Description: An extension for debugging Node.js programs and Chrome.
- Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
- VSC Link: Link
- Comment: You can use that. I use this extension to debug JavaScript with chrome. This extension feature “Profiling” is amazing to show overall performance in whole process.
- Quick View:
JavaScript Booster
- CodeName: sburg.vscode-javascript-booster
- Description: Boost your productivity with advanced JavaScript/TypeScript refactoring and commands.
- Given Ranking: ⭐⭐⭐⭐ 4 stars
- VSC Link: Link
- Comment: You can use that. I use this extension to refactoring react files. This extension feature “Code actions” is amazing to speed up your refactoring speed.
- Quick View:
JavaScript Snippet Pack
- CodeName: akamud.vscode-javascript-snippet-pack
- Description: A snippet pack to make you more productive working with JavaScript.
- Given Ranking: ⭐⭐⭐⭐ 4 stars
- VSC Link: Link
- Comment: You can use that. I use this extension to coding javascript DOM with shortcut, and I can create predefine method such as “[ae] addEventListener”. It is good feature if you like use shortcut to generate your code base.
${1:document}.addEventListener('${2:load}', function(e) {
${3:// body}
});- Quick View:
JavaScript code snippets
- CodeName: xabikos.JavaScriptSnippets
- Description: Code snippets for JavaScript in ES6 syntax.
- Given Ranking: ⭐⭐⭐⭐ 4 stars
- VSC Link: Link
- Comment: You can use that. I use this extension to coding javascript ES6 with shortcut, and I can create predefine method such as “imp→ imports entire module import fs from ‘fs’;”. It is good feature if you like use shortcut to generate your code base.
- Quick View:
ES7+ React/Redux/React-Native snippets
- CodeName: dsznajder.es7-react-js-snippets
- Description: Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
- Given Ranking: ⭐⭐⭐⭐ 4 stars
- VSC Link: Link
- Comment: You can use that. I use this extension to coding react and redux with shortcut. It is good support on javascript and react/redux snippets in es7+ with babel plugin features.
- Quick View:
JavaScript and TypeScript Nightly
- CodeName: ms-vscode.vscode-typescript-next
- Description: Enables typescript@next to power VS Code’s built-in JavaScript and TypeScript support.
- Given Ranking: ⭐⭐⭐⭐⭐ 4 stars
- VSC Link: Link
- Comment: You can use that. I use this extension to let typescript (typescript@next) as vs code’s built-in typescript version used to power javascript and typescript intellisense.
- Quick View:
2. Npm on VSC extension
npm
- CodeName: eg2.vscode-npm-script
- Description: npm support for VS Code.
- Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
- VSC Link: Link
- Comment: You have to use that. I use this extension to run npm package.json script to build webpack or run server. 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.
- Quick View:
npm Intellisense
- CodeName: christian-kohler.npm-intellisense
- Description: Visual Studio Code plugin that autocomplete npm modules in import statements.
- Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
- VSC Link: Link
- Comment: You have to use that. I use this extension to format my import npm module at the begin of JS files, and I don’t need to add lose module by myself. Good Tool for lazy man. This extension autocomplete npm modules in import statements.
- Quick View:
Path Intellisense
- CodeName: christian-kohler.path-intellisense
- Description: Visual Studio Code plugin that autocomplete filenames.
- Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
- VSC Link: Link
- Comment: You have to use that. I use this extension to complete the relative path when import file in html/css/js files. The author is christian-kohler who create another extension is npm Intellisense. Good Tool for lazy man. This extension autocomplete filenames.
- Quick View:
Search node_modules
- CodeName: jasonnutter.search-node-modules
- Description: Quickly search the node_modules folder.
- Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
- VSC Link: Link
- Comment: You have to use that. I use this extension to find local and global node module different, sometime I can’t find what’s the wrong in multi-import node module. This extension allows you to quickly navigate the file inside your project’s node_modules directory..
- Quick View:
Summary
In this post, we recommend to view the JavaScript in Visual Studio Code extension to create javascript/node/react development environment with 2 parts javascript/node/react extension category, and cutting the best extensions that you should try. Again, we recommend these extensions to speed your productivity up 30% and high efficiency on writing your code.
2 parts javascript/node/react extension category
- Javascript / Node / React Language Support on VSC extension
- Npm on VSC extension
If you have any good idea or recommend VSC extension, please tell me!! Thank you.
Most of pictures are from each extension. They have the copyright.