You also get context for other cool features, like "Auto Import". Going back to the idea of IntelliSense above, you get more than just information about objects.
#Vscode reactxp code#
So, the tip here is to let VS Code do that for you. It's tedious and I have typos every time. I specifically hate writing import statements. Let me rephrase, I don't actually hate imports per se. Let's talk about JavaScript imports.one of my biggest pet peeves! and then scroll all of the info that VS Code provides! If you forget the name of a function, type React. Visual Studio Code for the Web provides a free, zero-install Microsoft Visual Studio Code experience running entirely in your browser, allowing you to quickly and safely browse source code repositories and make lightweight code changes. The tip here is to leverage this information to your benefit. In other words, VS Code will show you what type of data a function takes in as a parameter and what type of data that it returns.ĭid you know this also works with React? React comes with TypeScript typings which VS Code uses to provide us all of that fancy IntelliSense. With VS Code IntelliSense, you will also see typed definitions for functions. inside of a JavaScript file, VS Code will display all of the functions, properties, etc. For example, if you type document and then. Not familiar with IntelliSense? It's the ability for your editor to display relevant information based on the context of what you are typing. When I wrote my first line of JavaScript, the only IntelliSense you got was from variables you had already typed VS Code was the first text editor (in my mind) that absolutely nailed intellisense for Web Development. Then, start your debugging session by clicking the play button in the debugging menu. With your configuration in place, start your React application. For example, if you wanted to create the boilerplate for an HTML file, you can simple type ! and then tab.Įnter fullscreen mode Exit fullscreen mode Emmet allows you to generate HTML and CSS from short-hand snippets. More on this in a second 😀Įmmet is one of the most amazing features you may have never heard of.
You will also want to setup debugging with the Chrome Debugger Extension. You get CSS syntax and highlighting right inside of your styled component files! If you use Styled Components with React (I'm becoming a bigger and bigger fan), you literally can't live without this one. There are also several more general (JavaScript focused) ones you'll want to check out. Here's an alternative snippets extension that you also might find useful. It provides incredibly useful snippets for generating components, writing imports/exports, and lots more. There's one React extension that you absolutely have to have. In this article, we'll cover 5 tips to improve your VS Code React set up so you can improve your efficiency and proficiency as a React developer!Įxtensions are where most of the power and flexibility of VS Code comes into play. Want to become a better React developer? Your VS Code React setup can drastically change how you create React apps.
0 kommentar(er)
