25 Miraculous VS Code Tools for JavaScript Developers

25 Miraculous VS Code Tools for JavaScript Developers

In this post is 25 Miraculous VS Code Tools for JavaScript Developers

Visual Studio Code (more casually known as VS code) is a lightweight but powerful cross platform source code editor that runs on your desktop. With built in support for development tools like TypeScript and the Chrome Debugger, I quickly fell in love with the editor the more I used it to build my projects.

Who doesn't love the bajillion open source extensions available for the public to use and contribute to?

If you're looking for more tools to add onto your development kit, I hope this article helps you find a new tool to adopt!

Not all of these tools are specifically for the JavaScript language, but tools for JavaScript developers like you and I who share a common interest. As a JavaScript developer, I will share what enhances my development flow in several aspects revolving around 3 of 5 of the Five Senses of the human.

Here are 25 Miraculous VS Code Tools for JavaScript Developers

1. Project Snippets

The first one to top off the list is my all time favorite Project Snippets --derived from the built in original User Snippets in VS Code.

If you're not familiar with User Snippets, basically this feature allows you to create your own code snippets to re-use throughout your projects.

But what exactly does it mean to "re-use" them?

Well, if you find often yourself writing any type of boilerplate like the one below:

import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return {
    ...state,
  }
}

export default useSomeHook

You can actually just slap that right into your user snippets so that instead of having to write out (or copy and paste) the entire thing, you only need to type in a custom prefix to generate the snippet that you configured it with. If you go to File > Preferences > User Snippets, you can optionally create a new global snippet by clicking New Global Snippets File.

For example, to create your own snippets file for a TypeScript React project, you can click New Global Snippets File, type in typescriptreact.json and it will direct you to a newly created .json file that you can use for react applications built using TypeScript.

For example, to create a user snippet from the code example above, this is how you would do it:

{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}

With that in place, you can create a new typescript file ending with .tsx, type in the prefix rsr and a suggestion to generate the snippet will appear. Pressing tab on that popup will generate this snippet:

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

But the issue with this is that this will persist through all of your projects (which in some cases can be powerful for general snippets). Some projects will be configured a little differently, and a global file to configure snippets begins to become a problem when you need to distinguish between specific use cases. For example, one use case is when project structures are different for each project:

{
  "import Link from components/common/Link": {
    "prefix": "gcl",
    "body": "import Link from 'components/common/Link'"
  },
  "border test": {
    "prefix": "b1",
    "body": "border: '1px solid red',"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: '1px solid green',"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: '1px solid magenta',"
  }
}

This might be sufficient for a project with that specific file/folder structure, but what if you were working on another project where a Link component had a path like components/Link?

Notice how the three border tests wrap their values in single quotation marks: border: '1px solid red'. This is perfectly valid in JavaScript, but what if you were using styled-components as your styling solution for a project? The syntax is no longer applicable for that workspace because styled components uses normal CSS syntax!

This is where the Project Snippets begins to shine!

Project Snippets enables you to declare project/workspace level snippets so that your snippets don't collide and pollute other projects. Very useful!

2. Better Comments

If you like writing comments in between code then you sometimes might find it a little frustrating to search for the locations of certain ones you wrote in the past because code can sometimes get a little crowded.

With Better Comments, you can make your comments more obvious by introducting colored comments:

Now you can better alert your team members with an ! or ? to bring something to their attention :)

3. Bracker Pair Colorizer

The first time I saw a screenshot of this extension I just knew I had to adopt and introduce this right into my development toolkit. Coding is my passion and passion should be fun. So with that mindset, this definitely helps me enjoy what I love doing even more.

A quick fun little fact is that sometimes a little more color can help speed up the development flow as it can influence blood flow and arousal. In other words--you're not just getting entertained, you're improving your health as well just by adding colors to your work flow!

4. Material Theme

Material Theme is an epic theme you can install right into VS code to make your code look like this:

That's got to be one of the best themes ever created. I'm not sure how I'd go into detail about how awesome a theme is, but this is just awesome. Install it now and join me in my quest to convert the world into a world of material theme-ists today! (Or don't join me and just use the theme. That's cool too)

5. @typescript-eslint/parser

If you're a TypeScript user: With the backers behind TSLint announcing plans to deprecate TSLint sometime this year, you should probably start looking into moving your tslint configurations to use the ESLint + TypeScript config approach.

Projects have gradually been moving towards adopting @typescript-eslint/parser and related packages to secure a future-proof setup for their projects. You'll still be able to leverage most of the ESLint's rules and compatibility with prettier using the new setups.

6. Stylelint

For me, stylelint is a must in all of my projects for multiple of reasons:

  1. It helps avoid errors.
  2. It enforces styling conventions in css.
  3. It goes hand in hand with prettier support.
  4. It supports css/scss/sass/less.
  5. It supports plugins written by the community.
7. Markdownlint + Docsify

Now i'm not sure how you or other developers like to take notes when brainstorming for their projects, but I like to write down notes in markdown format.

For one, it's easy for me to understand. There's also an abundance of tools available out there that help facilitate the process of writing markdown text, including markdownlint. Markdownlint is a vs code extension linter that assists in style checking inside your .md files. The cooler part is that it supports prettier formatting!

In addition I personally like to install Docsify on all of my projects as it supports markdown and other enhancements for each project.

8. TODO Highlight

I have a habit of writing todos in my application code, so extensions like TODO Highlight are really useful to highlight the todos I set in place throughout my projects.

9. Import Cost

Import Cost is one of those tools that become very useful the first time you try it. But after awhile you start to realize you don't really need the tool anymore because it tells you what you already know over time. Nonetheless, try this tool out for awhile because you might find it useful.

10. Highlight Matching Tag

Sometimes it can get frustrating trying to match the other end of a tag. That's where Highlight Matching Tag becomes to take your frustrations away:

11. vscode-spotify

And speaking of frustrations, sometimes it can get frustrating having to go back into your music player to switch music and then having to go back to vs code to continue doing what you were doing. That's where vscode-spotify comes in, because it allows you to use spotify right inside vs code!

With this extension you'll be able to see the song that is currently playing in the status bar, switch between songs by pressing hotkeys, clicking buttons to control spotify, and more!

11. GraphQL for VSCode

GraphQL has constantly been growing as we're starting to see it just about every corner in the JavaScript community. And with that said, it's probably a good idea to start thinking about installing GraphQL for VSCode into your vs code if you haven't already so that you benefit from syntax highlighting, linting and auto complete features when dealing with GraphQL syntax.

I personally use GatsbyJS a lot, so my daily coding life involves reading GraphQL syntax somewhat.

12. Indent Rainbow

A similar reason to the Highlight Matching Tag above. If you have trouble finding your way through indentations, then Indent Rainbow can help make those indentations easier to read.

Here's an example:

13. Color Highlight

This is one of those extensions where everybody asks me "Where did you get that?" if they haven't come across this extension yet. Basically Color Highlight helps highlight colors inside your code like this:

14. Color Picker

Color Picker is a vscode extension that gives you a graphical user interface to assist in selecting and generating color codes like CSS color notations.

15. REST Client

The first time I read about REST Client and tried it out for myself, it didn't seem like a very useful tool over an established software like Postman.

But the more I played with the REST Client extension, the more I realized how much it can impact my development tool especially when testing APIs.

You can just create a new file and have this one line:

https://google.com

All you need to do to create an HTTP GET request is to highlight that one line, go to the command palette (CTRL + SHIFT + P), click Rest Client: Send Request and it will go ahead and pop open a new tab with the request response details in the split of a second.

Very useful:

You can even pass in parameters or request body data to a POST request with just a couple of more lines of code underneath:

POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

{ "email": "[email protected]", "password": 1 }

And that will make a POST request with body parameters { "email": "[email protected]", "password": 1 }

But that's just scratching the surface of the possibilities of the extension. Read about it to find out more.

16. Settings Sync

I hated having to manually write down a markdown list of notes of extensions that I use in my development tool and saving it in a notes service like Evernote until Settings Sync came to the rescue.

Basically, you just need a gist/github account and everytime you want to save your settings (this includes keybindings, snippets, extensions, etc) you just need to press SHIFT + ALT + U to upload the private settings to your gist account, so that the next time you log in or reformat to another computer, you can immediately just download your settings in an instant by pressing SHIFT + ALT + D.

17. Todo Tree

Todo Tree will help you find all the todos you created throughout your application code into a single tree where you can view them all at once on the left side of your panel:

18. Toggle Quotes

Toggle Quotes is a fun utility extension that lets you toggle between quotes. It comes in handy when you need to switch to backticks when you're about to use string interpolations especially when prettier has a habit of prettifying your strings to single quotes.

19. Better Align

You can align your code without selecting them first with Better Align.

To use: Place your cursor in the code you want to be aligned, then pop open your command palette with CTRL + SHIFT + P (or whatever your customized shortcut is to open the command palette) and invoke the Align command.

20. Auto Close Tag

Auto Close Tag has been useful to me since the day I first started VS code. It allows you to type something like <div, following a slash / and it will complete the last arrow for you. This is something that isn't in vs code by default and is very useful to me :)

21. Sort Lines

I have a frustrating habit of becoming frustrated when my arrays aren't aligned alphabetically. Luckily tools like Sort Lines exist to make my life easier. You might find this very helpful to you as well if you get frustrated in a similar fashion.

22. VScode Google Translate

I might be the only one that finds this useful, but VScode Google Translate helps me in my projects as I am involved in a project that is multi lingual. Useful if you don't want to leave your editor.

23. Prettier

Prettier is an extension for vs code that automatically formats your JavaScript/TypeScript/etc. code using prettier.

24. Material Icon Theme

I prefer Material Icon Theme over other icon themes because it's a little more obvious to the eye which files types are which, especially when working in a dark theme.

25. IntelliSense for CSS Class Names in HTML

IntelliSense for CSS class names in HTML is a CSS class name completion based on the HTML class attribute based on the definitions found in your workspace.

Conclusion

And that concludes the end of this post! I hope this helped you find something new to add onto your development kit! Look forward for more posts from me in the future! Thank you !

6 Tools for Debugging React Native

6 Tools for Debugging React Native

In the React Native world, debugging may be done in different ways and with different tools. Knowing the context behind common errors in React Native can help developers save a lot of time and energy debugging. React Native is a great framework to implement your app for both Android and iOS platforms.

Debugging is an essential part of software development. It’s through debugging that we know what’s wrong and what’s right, what works and what doesn’t. Debugging provides the opportunity to assess our code and fix problems before they’re pushed to production.

In the React Native world, debugging may be done in different ways and with different tools, since React Native is composed of different environments (iOS and Android), which means there’s an assortment of problems and a variety of tools needed for debugging.

Thanks to the large number of contributors to the React Native ecosystem, many debugging tools are available. In this brief guide, we’ll explore the most commonly used of them, starting with the Developer Menu.

Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it. — Brian W. Kernighan

The Developer Menu

The in-app developer menu is your first gate for debugging React Native, it has many options which we can use to do different things. Let’s break down each option.

  • Reload: reloads the app
  • Debug JS Remotely: opens a channel to a JavaScript debugger
  • Enable Live Reload: makes the app reload automatically on clicking Save
  • Enable Hot Reloading: watches for changes accrued in a changed file
  • Toggle Inspector: toggles an inspector interface, which allows us to inspect any UI element on the screen and its properties, and presents and interface that has other tabs like networking, which shows us the HTTP calls, and a tab for performance.
YellowBoxes and RedBoxes

RedBoxes are used to display errors. Every time an app throws an error, it will display a RedBox and the description of the error. You can display it any time by writing console.error. But it doesn’t work in the production, meaning that if an error happens in that environment, the app will crash and stop running.

The RedBox is your friend. One of the helpful things about it is that it displays the error and gives you the suggestions on how to fix it, which you won’t find in the console. For example, I’ll frequently write a style property that’s not supported by React Native, or a property that’s used for a specific element—such as setting backroundImage for the View element. The Redbox will throw an error, but it will also show the list of supported style properties that you can apply to the View.

YellowBoxes are used to display warnings. You can disable them by adding line of code shown below inside index.js in the root directory of your app. But that’s not recommended, as YellowBoxes are very useful. They warn you about things like performance issues and deprecated code. You can use the YellowBox element from react-native to display a specific warning.

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

Most YellowBox warnings are related to some bad practice in your code. For example, you might get a warning that you have an eventListener that you aren’t removing when the component unmounts, or that you have deprecated features and dependencies like this:

warning: ViewPagerAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. See https://github.com/react-native-community/react-native-viewpager

Fixing these issues will prevent many bugs and will improve the quality of your code.
You can always learn more about debugging React Native in the official docs.

Chrome’s DevTools

Chrome is possibly the first tool you’d think of for debugging React Native. It’s common to use Chrome’s DevTools to debug web apps, but we can also use them to debug React Native since it’s powered by JavaScript.

To use Chrome’s DevTools with React Native, first make sure you’re connected to the same Wi-Fi, then press command + R if you’re using macOS, or Ctrl + M on Windows/Linux. When the developer menu appears, choose Debug Js Remotely. This will open the default JS debugger.

Then check this address http://localhost:8081/debugger-ui/ in Chrome. You should see this page:

You may have to do some troubleshooting on Android.

To solve this problem, make sure your your machine and the device are connected on the same Wi-Fi, and then add android:usesCleartextTraffic="true" to android/app/src/main/AndroidManifest.xml. If this doesn’t work for you, check out these links for other solutions:

After you have successfully connected to Chrome, you can simply toggle the Chrome inspector.

Then take a look at the logs of your React Native app. Also have a look through the other features offered by Chrome’s DevTools, and use them with React Native as you do with any Web app.

One of the limitations of using Chrome’s DevTools with React Native is that you can’t debug the styles and edit the style properties as you usually do when you debug web apps. It’s also limited in comparison with React’s devtools when inspecting React’s component hierarchy.

React Developer Tools

To debug React Native using React’s Developer Tools, you need to use the desktop app. You can install it globally or locally in your project by just running this following command:

yarn add react-devtools

Or npm:

npm install react-devtools --save

Then start the app by running yarn react-devtools, which will launch the app.

React’s Developer Tools may be the best tool for debugging React Native for these two reasons:

  • It allows for debugging React components.
  • It makes it possible to debug styles in React Native (my favorite feature of these developer tools!). The new version comes with this feature that also works with inspector in the developer menu. Previously, it was a problem to write styles and have to wait for the app to reload to see the changes. Now we can debug and implement style properties and see the effect of the change instantly without reloading the app.

You can learn more about using React’s Developer Tools app here.

React Native Debugger

If you’re using Redux in your React Native app, React Native Debugger is probably the right debugger for you. It’s a standalone desktop app that works on macOS, Windows, and Linux. It integrates both Redux’s DevTools and React’s Developer Tools in one app so you don’t have to work with two separate apps for debugging.

React Native Debugger is my favorite debugger and the one I usually use in my work with React Native. It has an interface for Redux’s DevTools where you can see the Redux logs and the actions, and an interface for React’s Developer Tools where you can inspect and debug React elements. You can find the installation instructions here. You can connect with this debugger in the same way you open Chrome’s inspector.

Using React Native Debugger over Chrome’s DevTools has some advantages. For example, you can toggle the inspector from the Dev Menu to inspect React Native elements and edit styles, which isn’t available in Chrome’s DevTools.

React Native CLI

You can use the React Native CLI to do some debugging as well. You can use it for showing the logs of the app. Hitting react-native log-android will show you the logs of db logcat on Android, and to view the logs in iOS you can run react-native log-ios, and with console.log you can dispatch logs to the terminal:

console.log("some error🛑")

You should then see the logs in the terminal.

You can use the React Native CLI to get some relevant info about the libraries and the dependencies you’re using in your app, by running react-native info on the terminal. It shows us some useful info about the tools you’re using. For instance, here’s an example of an output when you run react-native info:

You can use this info to fix some bugs caused by version mismatches of a tool you’re using in your project, so it’s always good to check the environment info using this command.

Summary

There are lots of tools for debugging React Native in addition to the ones we’ve looked at here. It really depends on the specific needs of your project. I mostly use React Native Debugger Desktop because I often work with Redux, and it combines an array of tools in one app which is great and a time saving.

Getting Started with React Native in 2020: Build Your First App

Getting Started with React Native in 2020: Build Your First App

Getting Started with React Native in 2020: Build Your First App. How To Code Your First Mobile App Using React Native. Learn how to build your first React Native app with important basic concepts. Learn the basics of React Native, a JavaScript Native Mobile App compiler. We look into components, events, props and passing them and more.

How To Code Your First Mobile App Using React Native

Learn how to build your first React Native app with important basic concepts

Today we start off with the basics of React Native, a javascript native mobile app compiler. We look into components, events, props and passing them and more.

React Tutorial for Beginners - Learn React in 1 Hour

React Tutorial for Beginners - Learn React in 1 Hour

React Tutorial for Beginners - Learn React in 1 Hour. The quick guide to learn basic concepts and workflow of how to build React App. In this course you will learn React in 1 hour. You will learn what react does, you will learn how react works, you will learn views, components, state, routing, react lifecycle and much more.

React is not complicated as it seems and you can learn it quickly.

In this course you will learn React in 1 hour. This is not a code along and the styling is not important. The important things are - You will learn what react does, you will learn how react works, you will learn views, components, state, routing, react lifecycle and much more. You dont need 14 hours to learn react.

This course is 1 hour long and it will probably take you from 1 - 3 hours to finish it in a sense where you will understand what React does and how it works.