Category: JavaScript / Node / React

In this post, we will look at configuring the ESLint semi-colon rule. The ESLint semi rule can be configured so when ESLint runs, it will either require or disallow semi-colons. The JavaScript engine does not specifically need semi-colons in many situations such as at the end of lines. The engine will interpret code without semi-colons provided and know how to deal with it using the automatic semicolon insertion feature, or … Continue reading Configuring ESLint Semi-Colons Rule

ESLint is a linter that runs in Visual Studio Code to analyze code for possible errors. In this post, we will look at how to set up ESLint in Visual Studio Code, in order to check JavaScript files for errors. You will need node and npm installed. First, let’s create a new directory and open the directory in VS Code: Now, let’s create a JavaScript file. We will call our … Continue reading Use ESLint to Validate Your JavaScript in Visual Studio Code

In this post, we will look at how to beautify a JavaScript file in Visual Studio Code using the  Beautify extension. First, let’s create a really simple JavaScript file. We can see the function is on one line: Search for and select Beautify: Click Install: Now, select CTRL + SHIFT + P or the View menu to bring up the Command Palette: Search for Beautify and you will see: Beautify … Continue reading How to Beautify a JavaScript File in Visual Studio Code

In this post, we will look at how to create a basic Babel project using Node in Visual Studio Code. Babel is a useful plugin that transpiles JavaScript to various versions. Let’s look at how to set this up. First, let’s create a new folder in Windows called babeltest and run npm init -y to create the package: We now have one file in our directory, the package.json: Note, alternatively … Continue reading How to Create a Node and Babel Project using Visual Studio Code

In Visual Studio Code, when using the eslint extension, you may get the error below. In the bottom right of the screen, you have a red circle next to ESLINT: Hovering over the red circle, we see the message “ESLint execution is not approved or denied yet. Click to open approval dialog”: There are a few reasons why this may occur. The first thing to do is to initialize ESLINT … Continue reading Fixing ESLint Execution is Not Approved or Denied in Visual Studio Code

npm init prompts you for each attribute of your package.json. Pressing enter on each line means the text in brackets will be used: This produces a package.json file like below: Or, you can accept all defaults automatically with: npm init -y The package.json looks like:  

The React DevTools are useful browser extensions for when developing React. To install the React DevTools extension, for Chrome go to https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en and click on Add to Chrome: Click Add Extension: For Firefox, go to https://addons.mozilla.org/en-US/firefox/addon/react-devtools/ and click Add to Firefox: And Add: For Edge, go to https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil: And click Add extension:  

To install Node Version Manager or nvm on Windows do the following. First, go to https://github.com/coreybutler/nvm-windows/releases and select the nvm-setup.zip file: You will see: Unblock and extract the zip file: Click Install: As Node.js is already installed, I get this message: Click Finish: Now, open a command prompt and type: nvm version You should see the version number of nvm, confirming the installation worked:  

To check if nvm or node version manager is installed in your Windows environment, open a command prompt and type: nvm version You should see the version of nvm installed: If you installed it using this GitHub release you should also be able to go to Windows Add/Remove Programs and see the app: