React vscode extensions

React vscode extensions DEFAULT

In this article, I’ll focus on a list of must-have VS Code extensions for JavaScript developers.

Visual Studio Code is undoubtedly the most popular, lightweight code editor today. It does borrow heavily from other popular code editors, mostly Sublime Text and Atom. However, its success mainly comes from its ability to provide better performance and stability. In addition, it also provides much-needed features like IntelliSense, which were only available in full-sized IDEs like Eclipse or Visual Studio 2017.

The power of VS Code no doubt comes from the marketplace. Thanks to the wonderful open-source community, the editor is now capable of supporting almost every programming language, framework and development technology. Support for a library or framework comes in various ways, which mainly includes snippets, syntax highlighting, Emmet and IntelliSense features for that specific technology.

VS Code Extensions by Category

For this article, I’ll focus on VS Code extensions specifically targeting JavaScript developers. Currently, there are many VS Code extensions that fit this criterion, which of course means I won’t be able to mention all of them. Instead, I’ll highlight VS Code extensions that have gained popularity and those that are indispensable for JavaScript developers. For simplicity, I’ll group them into ten specific categories.

Snippet Extensions

When you first install VS Code, it comes with a several built-in snippets for JavaScript and Typescript. Snippets help you write repetitive code quickly. However, you may find these may not be enough. You can easily create your own, or you can simply install an extension that includes a bunch of new useful snippets. A quick tip if you want snippets to show on top of suggestions is to use this configuration:

Here are some of the most popular snippet extensions for JavaScript developers. However, I would recommend you install just one for simplicity’s sake.

  • JavaScript (ES6) code snippets, by Charalampos Karypidis. This is currently the most popular javaScript snippet extension with over 3+ million installs to date. This extension provides ES6 syntax for JavaScript, TypeScript, HTML, React and Vue. All snippets include a final semicolon.
  • JavaScript (ES6) code snippets in StandardJS style, by James Vickery. This is basically a fork of the above extension for those who prefer StandardJS style convention—that is, the snippets don’t have semicolons.
  • JavaScript standardjs styled snippets, by capaj. Another StandardJS Styled snippets but this one is more popular with over 72k installs. Originally forked from Atom StandardJS snippets. Contains a huge collection of handy snippets and supports JavaScript, TypeScript and React.
  • JavaScript Snippets, by Nathan Chapman. A collection of JavaScript snippets with about 33k+ installs to date. This snippet extension supports Node.js, BDD Testing frameworks such as Mocha and Jasmine.
  • Atom JavaScript Snippet, by Saran Tanpituckpong. With about 26k+ installs to date, the snippets in this extension were ported from . JavaScript snippets ported from the atom/language-javascript extension.

Syntax Highlighting Extensions

The latest version of VS Code supports better syntax colorization and is now more in line with the standards set in Atom grammar. Hence, extensions such as JavaScript Atom Grammar are no longer needed.

However, we still have a few syntax highlighting extensions that are quite useful when it comes to certain types of projects and file extensions. Here’s a few:

  • Babel JavaScript, by Michael McDermott. With over 550k+ installs to date, this extension provides syntax highlighting for ES201x JavaScript, React, FlowType and GraphQL code.
  • DotENV, by 833,737. With over 833k installs to date, this extension supports syntax highlighting for environment settings — that is, files.
  • Bracket Pair Colorizer 2, by CoenraadS. With 730k+ installs, this extension highlights matching brackets with different colors, helping you identify which bracket belongs to which block.

Linter Extensions

Have you have ever gotten into a debate with your teammates over tabs vs spaces or semicolons vs no semicolons? You’ll realize that people have strong opinions about which coding style to use. Nevertheless, everyone on the same team needs to use the same coding style regardless of their opinion.

However, it’s quite common for programmers to forget which coding styling they agreed to work with. To enforce the rules, we need to use linters that compare your code with the rules you’ve established. You define your rules by picking a popular coding style such as Standard, Google, and Airbnb. You can use them as is or use a configuration file to customize the rules. VS Code doesn’t have a built-in JavaScript linter, so you’ll need to install an extension.

Here are the extensions we have available:

  • ESLint, by Dirk Baeumer. With over 8 million installs, this is the most popular extension providing support for the ESLint library. In order for the extension to work, your project will need ESLint packages and plugins installed. You’ll also need to specify an , which will specify the rules the extension will use to lint your code .
  • JSHint, by Dirk Baeumer. With 1.2M+ installs, this extension supports linting with the JSHint library. A configuration file is required for the extension to lint your code.
  • StandardJS – JavaScript Standard Style, by Sam Chen. This extension (259k+ installs) simply integrates JavaScript Standard Style into VS Code. You’ll need to install or as a dev dependency in your project. No configuration file is required. You’ll need to disable VS Code’s built-in validator for this extension to work.
  • JSLint, by Andrew Hyndman. This extension provides linting with the JSLint library. You’ll need to install locally or globally for the extension to work. It has 109k+ installs to date.

If you’d like an overview of available linters and their pros and cons, check out our comparison of JavaScript linting tools.

Node Package Management Extensions

Every JavaScript project needs to at least one npm package, unless you’re someone who likes doing things the hard way. Here are a few VS Code extensions that will help you work with managing and working with npm packages more easily.

  • npm, by egamma. With over 2.3M+ installs, this extension uses to validate installed packages. If anything is missing or versions are mismatched, the extension will provide you with clickable options to fix the issue. In addition, you can also run npm scripts defined in right inside the editor.

–npm IntelliSense, by Christian Kohler. With 1.9M+ installs, this extension provides autocompleting npm modules in import statements.

npm IntelliSense demo

  • Path IntelliSense, by Christian Kohler. With 2.7M+ installs, this extension autocompletes filenames. It also works inside HTML and CSS files.
  • Node exec, by Miramac. With 168k+ installs, this extension allows you to execute the current file or your selected code with Node.js by pressing on your keyboard. You can also cancel a running process by pressing .
  • View Node Package by Dominik Kundel. With 55k+ installs, this extension allows you to quickly view a Node package source and documentation while you’re working with your code.
  • Node Readme, by bengreenier. With 52k+ installs, this extension allows you to quickly open an npm package documentation right inside the VS Code editor as a separate tab.
  • Search node_modules, by Jason Nutter. By default, the folder is excluded from VS Code’s built-in search. With over 470k installs, this extension allows you to quickly navigate and open files in by traversing the folder tree.
Search Node modules
  • Import Cost by Wix. This displays how much disk space a package is using when you import it. The extension has 562K+ installs.
Import cost demo

Formatting Extensions

More often than not, we sometimes write code that’s out of alignment with the rest of the code. To fix this, we need to go back and fix the indentation in each line. In addition, we need to ensure braces and tags are properly formatted in a readable format. This process can quickly get tedious.

Luckily, we have extensions that can do the work for us. Please note extensions such as and can’t both be active simultaneously.

  • Prettier Code Formatter, by Esben Petersen. This is the most popular extension that supports formatting of JavaScript, TypeScript and CSS using Prettier. It has over 5.7 million installs to date. It’s recommended you install locally as a dev dependency.
  • Beautify, by HookyQR. A jsBeautifier extension that supports JavaScript, JSON, CSS and HTML. It can be customized via a file. It’s now the second most popular formatter, with 4.4 million installs to date.
  • JS Refactor, by Chris Stead. This provides a number of utilities and actions for refactoring JavaScript code, such as extracting variables/methods, converting existing code to use arrow functions or template literals, and exporting functions. It has 140k+ installs to date.
  • JavaScript Booster, by Stephan Burguchev. This is an amazing code refactoring tool. It features several coding actions such as converting to or , removing redundant statements, and merging declaration and initialization. Largely inspired by WebStorm, it has 74k+ installs to date.
JavaScript Booster Demo

Browser Extensions

Unless you’re writing a console program in JavaScript, you’ll most likely be executing your JavaScript code inside a browser. This means you’ll need to frequently refresh the page to see the effect of each code update you make. Instead of doing this manually all the time, here are a few tools that can significantly reduce the development time of your iteration process:

  • Debugger for Chrome, by Microsoft. With over 5.2+ million installs, this extension allows you to debug your JavaScript code in Chrome, or any other target that supports the Chrome Debugger Protocol. If you’re new to this extension and debugging in VS Code, do check out our VS Code and Chrome debugging tutorial.
Debugger for Chrome Demo
  • Live Server, by Ritwick Dey. This extension allows you to launch a local development server with a live reload feature for static and dynamic pages. It has 4.6M+ install to date.
Live server demo
  • Preview on Web Server, by YuichiNukiyama. This provides web server and live preview of HTML. The features can be called from a context menu or editor menu. It has 120k+ installs to date.
  • PHP Server, by brapifra. Built for PHP projects, it’s still useful for testing JavaScript code that needs to run client-side only. It has 234k+ installs to date.
  • Rest Client, by Huachao Mao. Instead of using a browser or a CURL program to test your REST API endpoints, you can install this tool to interactively run HTTP requests right inside the editor. It has 834k+ installs to date.

Framework Extensions

For most projects, you’ll need a suitable framework to structure your code and cut down your development time. VS Code has support for most major frameworks through extensions. However, there are still a number of established frameworks that don’t have a fully developed extension yet. Here are some of the VS Code extensions that offer significant functionality.

  • Angular Snippets (Version 9), by John Papa. With over 1.7+ million installs, this is the most popular snippet extension for Angular developers. It provides Angular snippets for TypeScript, RxJS, HTML and Docker files. At the time of writing, the extension has been updated to support Angular 9.
  • Angular 8 Snippets – TypeScript, Html, Angular Material, ngRx, RxJS and Flex Layout, by Mikael Morlund. This has snippets for Angular 2, 4, 5, 6,7 and 8 Beta. It supports Typescript, HTML, Angular Material ngRx, RxJS, PWA and Flex Layout. It contains 242 Angular snippets to date, and currently has over 1.35M+ installs.
  • ES7 React/Redux/GraphQL/React-Native snippets, by dsznajder. With over 1.2M installs to date, this extension provides JavaScript and TypeScript snippets for React, Redux and Graphql with ES7 syntax.
  • React Native Tools, by Microsoft. This provides IntelliSense, commands and debugging features for React Native projects. It has over 1.2 million installs to date.
  • React-Native/React/Redux snippets for es6/es7, by EQuimper. This provides snippets in ES6/ES7 syntax for React, React Native, Redux and storybook in ES6/ES7 syntax. It has 371k+ install to date.
  • Vetur, by Pine Wu. This provides syntax highlighting, snippets, Emmet, linting, formatting, IntelliSense and debugging support for the Vue framework. It comes with proper documentation published on GitBook. It has over 4.2 million installs to date.
  • Ember, by Felix Rieseberg. This provides command support and IntelliSense for Ember. After installation, all commands are available through VS Code’s own command list. It has 18k+ installs to date.
  • Cordova Tools, by Microsoft. This offers support for Cordova plugins and the Ionic framework, and also provides IntelliSense, debugging and other support features for Cordova-based projects. It has 272k+ installs to date.
  • jQuery Code Snippets, by Don Jayamanne. This provides over 130 jQuery code snippets. It’s activated by the prefix , and has 700k+ installs to date.

Testing Extensions

Testing is a critical part of software development, especially for projects that are in production phase. You can get a broad overview of testing in JavaScript and read more about the different kinds of tests you can run in our guide, “JavaScript Testing: Unit vs Functional vs Integration Tests”. Here are some popular VS Code extensions for testing.

  • Mocha sidebar, by maty. This provides support for testing using the Mocha library. This extension helps you run tests directly on the code and shows errors as decorators. It has 68k+ installs to date. Do note that this extension has a number of unresolved issues at the time of writing.
  • ES6 Mocha Snippets, by Cory Noonan. This provides Mocha snippets in ES6 syntax. The focus of this extension is to keep the code dry, leveraging arrow functions and omitting curlies by where possible. It can be configured to allow semicolons, and has 36k+ installs to date.
  • Jasmine Code Snippets, by Charalampos Karypidis. This offers code snippets for the Jasmine test framework. It has 30k+ installs to date. Unfortunately, this extension hasn’t been updated in the last three years at the time of writing.
  • Protractor Snippets, by Budi Irawan. This provides end-to-end testing snippets for the Protractor framework. It supports both JavaScript and Typescript, and has 18k+ installs to date.
  • Node TDD, by Prashant Tiwari. This provides support for test-driven development for Node and JavaScript projects. It can trigger an automatic test build whenever sources are updated. It has 23k+ installs to date.
Node TDD demo

Awesome Extensions

I’m just putting this next bunch of VS Code extensions into the “awesome” category, because that best describes them!

  • Quokka.js, by Wallaby.js. An awesome debugging tool that provides a rapid prototyping playground for JavaScript code. It comes with excellent documentation, and has over 641k installs.
  • Paste as JSON, by quicktype. This allows you to quickly convert JSON data into JavaScript code, and has over 430k installs to date.
Paste JSON demo
  • Code Metrics, by Kiss Tamás. This is another awesome extension that calculates complexity in JavaScript and TypeScript code. It has over 233k installs to date.

Code metrics demo 1

Code metrics demo 2

Code metrics demo 3

Extension Packs

Now that we’ve come to our final category, I would just like to let you know that the VS Code marketplace has a category for extension packs. Essentially, these are collections of related VS Code extensions bundled into one package for easy installation. Here are some of the better ones:

  • Nodejs Extension Pack, by Wade Anderson. This pack contains ESLint, npm, JavaScript (ES6) snippets, Search node_modules, NPM IntelliSense and Path IntelliSense. It has over 293K installs.
  • VS Code for Node.js – Development Pack, by NodeSource. This one has NPM IntelliSense, ESLint, Debugger for Chrome, Code Metrics, Docker and Import Cost. It has over 103k installs to date.
  • Vue.js Extension Pack, by Muhammad Ubaid Raza. This is a collection of Vue and JavaScript extensions. It currently contains about 12 VS Code extensions, some of which haven’t been mentioned here, such as auto-rename-tag and auto-close-tag. It has over 156k installs to date.
  • Ionic Extension Pack, by Loiane Groner. This pack contains a number of VS Code extensions for Ionic, Angular, RxJS, Cordova and HTML development. It has about 75k installs to date.

Summary

VS Code’s huge number of quality extensions makes it a popular choice for JavaScript developers. It’s never been easier to write JavaScript code this efficiently. Extensions such as ESLint help you avoid common mistakes, while others such as Debugger for Chrome help you debug your code more easily. Node.js extensions, with their IntelliSense features, help you import modules correctly, and the availability of tools such as Live Server and REST client reduces your reliance on external tools to complete your work. All of these tools make your iteration process far much easier.

I hope this list has been introduced you to new VS Code extensions that can help you in your workflow.

Next, learn how to take advantage of Visual Studio Code to supercharge your development workflow with our Visual Studio Code power user’s guide.

Sours: https://www.sitepoint.com/vs-code-extensions-javascript-developers/

React Tools for VS Code

Before we move into more coding with React, let's talk about the tools that can help us streamline our React development. We want to go into our React development as well equipped as possible!

Visual Studio Code is my current (and many developers') current favorite editor. It's a favorite for many reasons:

  • Speed
  • Ability to autocomplete code with Intellisense
  • Ability to catch errors and speed up development
  • Built-in git
  • Built-in terminal
  • Extensibility

VS Code has many great extensions that we can leverage for React and JavaScript development. For this article, we'll focus on the important extensions to have for React development.

If you aren't using VS Code, then you can skip this post as I'm not familiar with the plugins needed for other editors.

Related Course: Make VS Code Your Editor

JavaScript Extensions

These are the extensions that should be installed for JavaScript work in general. These extensions will help out with vanilla JS work, React work, Vue and Angular.

I'll list out some of my most recommended extensions here and also leave a link to a full article we've got on the topic.

Articles

11 Awesome JavaScript Extensions for Visual Studio Code

Best React Extension for VS Code

Get Started w/ JavaScriptfor free!

Extensions

Simple React Snippets is one of my favorites. My main usage is the easier import line snippet.

Debugger for Chrome

The Debugger extension allows us to find bugs in our code quickly. While this tool won't be entirely useful just yet since we haven't gotten to the Create React App tool, we can make a note of it and come back in the future. We've got a full writeup on how to use it here:

Debugging Create React App Applications in Visual Studio Code

Color Schemes (Themes)

We've got a great articles on VS Code themes so I won't dive too deep into them here. What I currently use is Monokai Pro.

Fonts

There are only a few fonts that I personally use. Two are paid and the other two are free. It's all up to preference. We've got an article on the best coding fonts here.

Operator Mono

This is the expensive font on this list coming in at $400. For staring at a font for hours upon hours, I don't mind the payment for such a quality font. I appreciate the cursives and the way the characters aren't as tall as the other fonts on this list.

While it doesn't come with ligatures (the ability to combine two characters to look like a single character. ie → or ===) out of the box, you can add them with this GitHub project.

Dank Mono

Dank Mono is one of the newer fonts to hit the scene but it's learned much from the fonts that came before it. Made by Phil Pluckthun, a heavy user of React, this font also comes with a hint of cursive fonts and ligatures built in. At $40, it's a great font to give a try.

Fira Code

Fira Code is one of the free fonts on this list. Versatile with ligatures and cursives out of the box. Fira Code is a little tall for my taste but it could be right up your alley.

Conclusion

This just scratches the surface of all the great things that VS Code can do for you as a developer. It is a good start to install these things so that we're running a VS Code that is more geared towards our type of development.

Like this article? Follow @chris__sev on Twitter

Sours: https://scotch.io/starters/react/editor-tools
  1. Gouache set amazon
  2. Mpg earbuds
  3. Torque thrust rims
  4. Dji generator

Top 10 Extensions for ReactJS in VSCode

change-case: It is a wrapper around node-change-case for Visual Studio Code. The main job is to quickly modify the case of this choice or current word. It also works with multiple cursors.

Code Spell Checker:It is a basic spell checker that works well with the camelCase code. It basically assists in catching the common spelling errors whereas keeping the number of false positives low.

Duplicate Selection:This extension brings Sublime-like duplication of designated text, it duplicates it inline, and not during a printing operation, just like the default behavior of VSCode.



EditorConfig for VS Code:This extension brings the EditorConfig and .editorconfig support to our VSCode. This plugin mains to override user or workspace settings with settings that are found in .editorconfig files.

VSCode React Refactor:This simple extension provides the refactor code actions for React developers. IT extracts the JSX element to file or function. It also supports the TypeScript and TSX syntax. This extension works well with the classes, functions, and arrow functions.

npm Intellisense:This is a plugin that will auto-complete all the npm modules import statements. All imports for npm modules getautomaticallyhandled by this extension.

ESLint:It integrates the ESLint into your VS Code system. The ESLint statically analyzes your code in order to quickly find problems.

ES7 React/Redux/GraphQL/React-Native snippets:This extension helps in providing theJavaScript and React/Redux related snippets in ES7 with Babel plugin options for your VS Code.

Prettier – Code formatter:It is a code formatted. This VS Code package is used to format your JavaScript/matter/CSS exploitation is prettier. It basically parses your code and re-printing it with its own rules.

Sours: https://www.geeksforgeeks.org/top-10-extensions-for-reactjs-in-vscode/
VSCode Extensions for React Developers

Juicy list of VSCode Extensions for React Native, JavaScript and general use

Last Updated: May 27, 2020

I use VSCode full-time since 2016. Before that, I was using its “bigger brother” — Visual Studio IDE and I was looking for a lighter editor.

I would like to share with you the extensions that I have currently installed. I’m working as a React Native developer so JavaScript centric section will be the biggest one but not the only one!

There is a bunch of general-use extensions that will increase the happiness of your coding time. Doesn’t matter what technology you are using!

Must have — My top 3 VSCode extensions

Settings Sync

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. Shan Khan

First and the only extension I install after changing workspace (new computer, fresh account, editor reinstall or disk formatting). I have all my extensions and settings stored safely on Github Gist. It is also useful to share with teammates to compare and customise their editors.

ESLint

Integrates ESLint JavaScript into VS Code. Dirk Baeumer

Linter is the most important tool while writing JavaScript code.

I started my career with C# and other strongly typed languages with rich-featured IDEs. It is natural to me that when something is underscored red it will not work.

Without configured linter, you can make syntax error and you don’t know it. You will be notified in the browser’s console — it’s too late. In React you might be informed a bit earlier — still too late

This extension gives you nice feedback in the exact moment of writing. In my team, we’ve configured git hooks that won’t allow anyone to push project with linter errors. It makes project more stable. This also eliminates wasting time on pull requests. No more searching for typos or mistakes that are easily eliminated with a linter rule.

GitLens — Git supercharged

Supercharge the Git capabilities built into Visual Studio Code — 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 Eric Amodio

I work in projects that have a long lifecycle. So I ofter work in files that were written by me or my teammates a long time ago. Then edited many times to satisfy business requirements.

Here is where git shows it’s power with the whole history of the file. This extension gives me tools to navigate through the history of the file commit by commit. Like in a book - page by page. Using arrow buttons.

It also shows the last commit for each line with the date, message and author’s name. I use it a lot to get the context of the code I’m looking at. Setting up mindset is much faster when you understand why somebody has written that line in this particular way.

VSCode extensions for React Native, React and JavaScript

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text Jun Han

When I open some new tag it will automatically create closing tag for it. For example I type and this extension adds immediately. It works for JSX/TSX.

Auto Rename Tag

Auto rename paired HTML/XML tag Jun Han

It is similar to the previous extension. When I edit one tag paired one will be edited as well so I don’t need to revisit it. It works for JSX/TSX.

Auto Import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX steoates

Color Highlight

Highlight web colors in your editor Sergii Naumov

Whenever I have a hex colour in my opened files the colour will be set as background of the string. For example will highlight with red background.

ES7 React/Redux/GraphQL/React-Native snippets

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax dsznajder

Basic snippets set. For example I write and it autocompletes my file with a React Arrow Function Component with ES7 module system. Basically this where is name of the file.

It’s very big set and constantly improved.

Highlight Matching Tag

Highlights matching closing and opening tags vincaslt

Very useful extension to highlight paired tag with underscore. It helps to navigate through JSX tree.

Name That Color

Get a friendly name from a Hex color representation. Guillaume Doutriaux

I don’t like to lose time to think: “should I name this colour just or make some sensible name for it like ?“. This extension names every hex colour. For example it can tell you that:

Prettier - Code formatter

Code formatter using prettier Esben Petersen

Format your React Native code automatically to avoid time-consuming unneeded discussions among your team. We do formatting on every commit. I also have tendency to press “Format Document” shortcut very often…

Remember to setup config file with Prettier docs to customise your formatting.

React PropTypes Intellisense

PropTypes intellisense for React components Of Human Bondage

The extension finds React PropTypes and adds them to the suggestion list.

sort-imports

Sort ES6 imports automatically. VSC Sort Import

I like to have my libraries imported at the top of the file and local files lower separated with newline. This extension makes it semi-automated.

exports autocomplete

autocompletes javascript module exports from your project capaj

React Native Tools

Debugging and integrated commands for React Native Microsoft

Debugger and multiple helper functions of React Native. If you like to do everything from editor instead keeping several terminals open — it will be good for you.

vscode-styled-components

Syntax highlighting for styled-components Julien Poissonnier

Styled Components has multiple fans in React (and React Native) world. But using Tagged Template Literal as a string without colours is… ugly? Doesn’t nice? Colouring is increasing your productivity and makes code more readable and I’m all into readability.

Other extensions

Working with a team

Jira and Bitbucket (Official)

Bringing the power of Jira and Bitbucket to VS Code - With Atlassian for VS Code you can create and view issues, start work on issues, create pull requests, do code reviews, start builds, get build statuses and more! Atlassian

It gives me great pull-request experience without leaving the code editor. Much better than doing reviews inside the browser.

I make new branches out of Jira tickets without leaving the editor. I really like this extension and I recommend it to all Bitbucket users.

It is mostly useful if you are working with the team though.

GitLab Workflow

GitLab VSCode integration Fatih Acet It gives preview of issues and merge requests created or assigned to you. It also extends VSCode command palette and status bar to provide more information about your project.

Marp for VS Code

Create slide deck written in Marp Markdown on VS Code.

Marp, Markdown Presentation Ecosystem, provides the great experience to create beautiful slide deck. You only have to focus writing your story in Markdown document. Marp team

I’m a huge fan of Markdown. I also need to make a presentation from time to time so I decided to make my decks in markdown.

Extra profit — slides are easily convertible into the documentation. So I make two things with one effort.

This extensions brings Marp ecosystem inside VSCode. For example deck preview. If you are making presentations I encourage you to read more on their website.

Live Share

Real-time collaborative development from the comfort of your favorite tools. Microsoft

This is great for pair programming. Especially useful with remote working and brainstorming with your team from home.

Improve coding experience

All Autocomplete

Create autocomplete items from open files in VSCode. Atishay Jain

Not everything is included in built-in autocompleter. Sometimes it is not possible for editor to understand context in the time of writing. When this happen it is useful to have just a list of used words — variable names, function names etc.

IntelliJ IDEA Keybindings

Port of IntelliJ IDEA Keybindings, including for WebStorm, PyCharm, PHP Storm, etc. Keisuke Kato

For some time I was working with PyCharm then IntelliJ and it was easier at first to have the same shortcuts. Unfortunately It is not fully mapped so there is bunch of keybindings from IntelliJ and some from Visual Studio.

Usually when I need to do something in JetBrains tools it is easier for me to do it as I know many shortcuts. I don’t know if I would recommend it if someone isn’t migrating from those tools. I think it is better to use tools with basic settings unless you are fluent with some other tool and transition would cost too much effort.

Lorem ipsum

Generates and inserts lorem ipsum text Daniel Imms

Helpful tool for prototyping. Instead of copy-pasting some dummy text from the web I just type a command or .

Themes worth checking

Brackets Light Pro

A theme basic Brackets Light and more beautiful. EryouHao

One Monokai Theme

A cross between Monokai and One Dark theme Joshua Azemoh

My favourite dark colour theme. It is the one :)

Other languages support

Excel Viewer

View Excel spreadsheets and CSV files within Visual Studio Code workspaces. GrapeCity

I use it to have nicer CSV preview as I work a bit with those files.

shell-format

shellscript、Dockerfile、properties、gitignore、dotenv、hosts、jvmoptions… DocumentFormat foxundermoon

It’s like Prettier but for .

shellcheck

An extension to use shellcheck in vscode Timon Wong

ShellCheck is an open source static analysis tool that automatically finds bugs in your shell scripts.

I write scripts in that make some project files transformations. CI scripts are also written in . It is useful to have modern editing experience in such a language — I’m not writing scripts often and its syntax is different than anything known to me. It doesn’t forgive mistakes.

YAML

YAML Language Support by Red Hat, with built-in Kubernetes and Kedge syntax support Red Hat

If you do anything with CI then your config files are usually in YAML. This extension gives you powerful support of the language.

XML Tools

XML Formatting, XQuery, and XPath Tools for Visual Studio Code Josh Johnson

I installed it to have nice XML formatting features. I like auto formatting :)

Written by Daniel Koprowski — Frontend Developer. Enthusiast of React, React Native and TypeScript. Reach me on Twitter.

Sours: https://koprowski.it/2020/vscode-extensions-for-react-native-javascript/

Extensions react vscode

Using React in Visual Studio Code

React is a popular JavaScript library developed by Facebook for building web application user interfaces. The Visual Studio Code editor supports React.js IntelliSense and code navigation out of the box.

Welcome to React

Welcome to React

We'll be using the generator for this tutorial. To use the generator as well as run the React application server, you'll need Node.js JavaScript runtime and npm (Node.js package manager) installed. npm is included with Node.js which you can download and install from Node.js downloads.

Tip: To test that you have Node.js and npm correctly installed on your machine, you can type and in a terminal or command prompt.

You can now create a new React application by typing:

where is the name of the folder for your application. This may take a few minutes to create the React application and install its dependencies.

Note: If you've previously installed globally via , we recommend you uninstall the package using to ensure that npx always uses the latest version.

Let's quickly run our React application by navigating to the new folder and typing to start the web server and open the application in a browser:

You should see the React logo and a link to "Learn React" on http://localhost:3000 in your browser. We'll leave the web server running while we look at the application with VS Code.

To open your React application in VS Code, open another terminal or command prompt window, navigate to the folder and type :

Markdown preview

In the File Explorer, one file you'll see is the application Markdown file. This has lots of great information about the application and React in general. A nice way to review the README is by using the VS Code Markdown Preview. You can open the preview in either the current editor group (Markdown: Open Preview⇧⌘V (Windows, Linux Ctrl+Shift+V)) or in a new editor group to the side (Markdown: Open Preview to the Side⌘K V (Windows, Linux Ctrl+K V)). You'll get nice formatting, hyperlink navigation to headers, and syntax highlighting in code blocks.

README Markdown Preview

Syntax highlighting and bracket matching

Now expand the folder and select the file. You'll notice that VS Code has syntax highlighting for the various source code elements and, if you put the cursor on a parenthesis, the matching bracket is also selected.

React bracket matching

IntelliSense

As you start typing in , you'll see smart suggestions or completions.

React IntelliSense suggestions

After you select a suggestion and type , you see the types and methods on the object through IntelliSense.

React IntelliSense

VS Code uses the TypeScript language service for its JavaScript code intelligence and it has a feature called Automatic Type Acquisition (ATA). ATA pulls down the npm Type Declaration files () for the npm modules referenced in the .

If you select a method, you'll also get parameter help:

React parameter help

Go to Definition, Peek definition

Through the TypeScript language service, VS Code can also provide type definition information in the editor through Go to Definition (F12) or Peek Definition (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)). Put the cursor over the , right click and select Peek Definition. A Peek window will open showing the definition from .

React Peek definition

Press Escape to close the Peek window.

Hello World!

Let's update the sample application to "Hello World!". Create a new H1 header with "Hello, world!" and replace the tag in with .

Once you save the file, the running instance of the server will update the web page and you'll see "Hello World!" when you refresh your browser.

Tip: VS Code supports Auto Save, which by default saves your files after a delay. Check the Auto Save option in the File menu to turn on Auto Save or directly configure the user setting.

Hello, world

Debugging React

To debug the client side React code, we'll use the built-in JavaScript debugger.

Note: This tutorial assumes you have the Edge browser installed. If you want to debug using Chrome, replace the launch with . There is also a debugger for the Firefox browser.

Set a breakpoint

To set a breakpoint in , click on the gutter to the left of the line numbers. This will set a breakpoint which will be visible as a red circle.

Set a breakpoint

Configure the debugger

We need to initially configure the debugger. To do so, go to the Run view (⇧⌘D (Windows, Linux Ctrl+Shift+D)) and click on the gear button or Create a launch.json link to create a debugger configuration file. Choose Edge: launch from the Select Environment dropdown list. This will create a file in a new folder in your project which includes a configuration to launch the website.

We need to make one change for our example: change the port of the from to . Your should look like this:

Ensure that your development server is running (). Then press F5 or the green arrow to launch the debugger and open a new browser instance. The source code where the breakpoint is set runs on startup before the debugger was attached, so we won't hit the breakpoint until we refresh the web page. Refresh the page and you should hit your breakpoint.

Debugger hitting breakpoint

You can step through your source code (F10), inspect variables such as , and see the call stack of the client side React application.

Debug element variable

For more information about the debugger and its available options, check out our documentation on browser debugging.

Live editing and debugging

If you are using webpack together with your React app, you can have a more efficient workflow by taking advantage of webpack's HMR mechanism which enables you to have live editing and debugging directly from VS Code. You can learn more in this Live edit and debug your React apps directly from VS Code blog post and the webpack Hot Module Replacement documentation.

Linting

Linters analyze your source code and can warn you about potential problems before you run your application. The JavaScript language services included with VS Code has syntax error checking support by default, which you can see in action in the Problems panel (View > Problems⇧⌘M (Windows, Linux Ctrl+Shift+M)).

Try making a small error in your React source code and you'll see a red squiggle and an error in the Problems panel.

JavaScript error

Linters can provide more sophisticated analysis, enforcing coding conventions and detecting anti-patterns. A popular JavaScript linter is ESLint. ESLint, when combined with the ESLint VS Code extension, provides a great in-product linting experience.

First, install the ESLint command-line tool:

Then install the ESLint extension by going to the Extensions view and typing 'eslint'.

ESLint extension

Once the ESLint extension is installed and VS Code reloaded, you'll want to create an ESLint configuration file, . You can create one using the extension's ESLint: Create ESLint configuration command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

Find the configuration command

The command will prompt you to answer a series of questions in the Terminal panel. Take the defaults, and it will create a file in your project root that looks something like this:

ESLint will now analyze open files and shows a warning in about 'App' being defined but never used.

App is unused

You can modify the ESLint rules in the file.

Let's add an error rule for extra semi-colons:

Now when you mistakenly have multiple semicolons on a line, you'll see an error (red squiggle) in the editor and error entry in the Problems panel.

Extra semicolon error

Popular Starter Kits

In this tutorial, we used the generator to create a simple React application. There are lots of great samples and starter kits available to help build your first React application.

VS Code React Sample

This is a sample React application, which creates a simple TODO application and includes the source code for a Node.js Express server. It also shows how to use the Babel ES6 transpiler and then use webpack to bundle the site assets.

TypeScript React

If you're curious about TypeScript and React, you can also create a TypeScript version of the application by specifying that you want to use the TypeScript template:

See the details at Adding TypeScript on the Create React App site.

Angular

Angular is another popular web framework. If you'd like to see an example of Angular working with VS Code, check out the Debugging with Angular CLI recipe. It will walk you through creating an Angular application and configuring the file for the JavaScript debugger.

Common questions

Can I get IntelliSense within declarative JSX?

Yes. For example, if you open the project's file, you can see IntelliSense within the React JSX in the method.

JSX IntelliSense

10/7/2021

Sours: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
😍 Best React JS Extension for Visual Studio Code in 2021

5 vscode extensions for react developers

In this post we are going to learn about 5 vscode extensions for react developers that they must use. I personally uses these five extensions in day to day life. Which automatically increases productivity.

ESLint
This is the life saving extension for producing greater quality code. It basically 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.

Code name: dbaeumer.vscode-eslint
Downloads: 7,515,220

Open native terminal
Travelling through different directory using cd command is too much. This little extension helps you to open your native terminal right from vs code current workspace directory. You can open native terminal with any path, just click right button on your mouse, then select option called Open in native terminal (current folder) or Open in native terminal (root folder)

Code name: alexeyvax.vscode-open-native-terminal
Downloads: 3,386

React PropTypes Generate
Adding proptypes manually takes so much time. This extension will automate the generating propTypes and you just need to click on component and then click ctrl + shift + alt + p. This is the VS Code’s extension that automatically generates PropTypes code for React components, like ReactPropTypes in the Jetbrains’s Platform.

Code name: suming.react-proptypes-generate
Downloads: 3,512

Reactjs code snippets
Whenever we created a new file we manually add the component skeleton and our component can be a class, functional,hooks based, redux based and many more. This extension can create all those snippets with just few keys. It contains code snippets for Reactjs and is based on the awesome babel-sublime-snippets package. This extension have around 50 different snippets.

Supported languages (file extensions)

JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)
Code name: xabikos.reactsnippets
Downloads: 475,575

VSCode React Refactor
This simple extension provides refactor code actions for React developers.

Recompose your overgrown JSX without worrying about the given data. This extension will do the dirty work for you without breaking your code.

Features

Extract JSX element to file or function
Supports TypeScript and TSX
Works with classes, functions and arrow functions
Handles key attribute and function bindings
Works well with new Hooks API
Code name: planbcoding.vscode-react-refactor
Downloads: 12,978

Bonus

Turbo Console Log
Adding console on multiple areas is time consuming. To solve this problem I uses Turbo console log which basically creates console with shortcut and plus point here is that this extension also adds the useful info like functions name and variable name in the console.

Code name: chakrounanas.turbo-console-log
Downloads: 91,835

If you want to learn types of components you can learn here.

BlogReact

Sours: https://dev.to/narendersaini32/5-vscode-extensions-for-react-developers-ipk

Now discussing:

Before you can do that To complete this action, sign in to your Community account or create a new one.

When working with React, there’s lots of code that gets repeated over and over....and over and over again. Eventually, you start to think, “there’s got to be a better way”. Don’t worry, there is!

In this article we will look at the ES7 React/Redux/GraphQL/React-Native snippets** **extension. Yes, it’s a mouthful to spell it all out, but it provides an amazing set of snippets that are invaluable when writing React code.

The ES7 React/Redux/GraphQL/React-Native Snippets Extension

This snippets extension (I won’t type the entire name out again) is incredibly popular with over 2 million downloads. To back this up, every big time developer I’ve heard talk about React on a podcast, YouTube video, etc. uses this extension and loves it.

I’ve always said that developers are “intentionally lazy”. In other words, we find ways to constantly improve the speed at which we right code by writing less of it ourselves. These snippets making writing React much much faster!

JavaScript Imports

Although this article is focused on snippets for React, React code is primarily made up of modern JavaScript. For this reason, this extension includes several useful JavaScript snippets.

In modern JavaScript, code is broken up to different modules and then reused in other areas using the import syntax. Here’s a couple of import snippets to consider.

Import a default export.

Import a named export.

To get a little more specific to React, here’s a couple of React imports.

Import React

Import React and Component.

JavaScript Iteration

Iterating through a list of items is not difficult but it does get repetetive (no pun intended).

For each iteration

For of iteration

For in Iteration

JavaScript Functions

Functions are obviously something that we write every day. Here’s a few different ways to generate them.

Anonymous Function

Named Function

React Lifecycle Methods

Now, we can dive into more React specific stuff. Let’s start with Lifecycle Methods.

ComponentDidMount

ComponentDidUpdate

ComponentWillUnmount

React Components

With the snippets we’ve mentioned so far, you have the ability to stub out most of a React component by combining them, but it gets better! Here’s some snippets that will generate an entire component for you!

React Class Component

React Class Component With Prop Types

React Functional Component

Other Snippets

We’ve covered a bunch of snippets in this article, but there are several more. Here’s a couple of categories that might be worth a deeper look!

  • React Native
  • Prop Types
  • Redux
  • Tests
  • Writing to the Console

Conclusion

Never write code that you don’t have to. My only caveat to that statement comes if you are learning. If you’re new to a language or framework, avoid snippets while you’re learning. Write it all out for the experience! After that, SNIPPETS AWAY!

Sours: https://www.digitalocean.com/community/tutorials/the-best-react-extension-for-vs-code


171 172 173 174 175