Use ESLint to Validate Your JavaScript in Visual Studio Code

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

How to Beautify a JavaScript File 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

Accept all Defaults with npm init -y

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:  

Installing the React DevTools Extension

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:  

List Node Packages Installed in Windows

To see a list of node user-installed packages running on Windows, type the command: npm list -g –depth=0 And with package dependencies tree: npm list -g  

localStorage and sessionStorage in JavaScript

In JavaScript, there are 2 ways to store data within a web browser: localStorage, which can be used to save data across browser sessions sessionStorage, which stores data for the page session localStorage localStorage.setItem(‘examplevariable’, ‘123’); var a = localStorage.getItem(“examplevariable”); console.log(a); This prints: To delete a variable, we use: localStorage.removeItem(‘examplevariable’); If we try to access the variable after deleting, it will return null. If we set the item in localStorage and … Continue reading localStorage and sessionStorage in JavaScript

jQuery Introduction and Hello World

jQuery is a popular JavaScript library that is very useful with JavaScript development. It contains many benefits and features, including: It’s cross-browser It has selectors It works with events Ajax support 3rd party plugins from developers To install, go to https://jquery.com/ and select the version you would like to download: If you need support for Internet Explorer versions 6-8, Opera 12.1x, or Safari 5.1x you will need jQuery 1.x. Otherwise, you … Continue reading jQuery Introduction and Hello World

Compare Dates in JavaScript

In JavaScript, there are ways to compare dates as well as methods that will not work. For example, if we have: var date1 = new Date(“2018-01-01 00:00”); var date2 = new Date(“2018-01-01 00:00”); if (date1 == date2) console.log(“equal”) else console.log(“not equal”) This will print: If we print both dates to the console, we will see they are exactly the same (note the date is different from what was supplied – … Continue reading Compare Dates in JavaScript

JavaScript Dates – new Date and UTC

In JavaScript, we can create a new date using: var date1 = new Date(“2018-01-01″); If we print this in the console, we actually get a different date: This is because we are omitting the time, so UTC time is assumed. To display the “correct” date, add the time: var date1 = new Date(“2018-01-01 00:00”); This produces: