Home - The Productive Engineer

VS Code is a robust code editor that supports programming languages such as C++, C#, PHP, Python, HTML, CSS, and many others. Its rich set of features include IntelliSense, Code Refactoring, and others that make working with it an effortless job. VS Code is also an excellent code editor for JavaScript, with a rich set of functionality and extensions custom-built to make coding JavaScript a breeze. Before we get started, if you are looking to learn more about JavaScript or other topics, you should really check out SkillShare, you should really check out SkillShare. Skillshare is an online learning platform with courses on pretty much anything you want to learn. To learn more about Skillshare and its vast library of courses and get 30% off, click the link below: SkillShare - Online Learning Platform If you are looking to learn how to use arrays to their fullest potential in JavaScript, check out our Complete Guide to Arrays in JavaScript here. It will teach you everything you need to know on creating, using, and manipulating arrays efficiently in JavaScript. Now, let's get started with the tutorial! Can You Code JavaScript On VS Code? Yes, you can! JavaScript is one of the many languages that can be coded, debugged, and run in the VS Code IDE. Unlike languages like Python, VS Code has a built-in JavaScript interpreter, debugger, and advanced features that support the language. You can also add extensions to augment the abilities or even modify them. If you’re giving VS Code a shot for the first time to write JavaScript programs, here’s all you need to know about the setup process and the benefits of coding in this IDE. How Do I Setup VS Code For JavaScript? Since VS Code already has built-in JavaScript features, you don’t need a whole lot of extensions or packages. However, you can enhance your coding experience by downloading and installing a couple of packages that will come in handy. Let us quickly go through each of them, their purpose, and their configuration (if any). JavaScript (ES6) Code Snippets Although JavaScript comes with many built-in code snippets, this extension will give you snippets for the ECMAScript 6 (ES 6) Syntax. Besides this, you can also get snippets for Angular 1, Angular 2, JQuery, and ReactJs if you require them for your program. You can find the ES6 extension in the link below: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets JavaScript Code Snippets VS Code extension Alternatively, you can also click the Extensions button on the left pane, search the name and install it. ESLint ESLint allows you to check syntax, format your code and even see problems with it. This extension is handy for writing codes since you’ll know the errors while you write the program. First, you’ll need to download and install ESLint on your system. For this, open up the terminal in VSCode and use the following command: npm install eslint This will download and install ESLint on your system, and now you need to do the configuration. Use the command below: ./node_modules/.bin/eslint --init This will ask you a set of questions to understand what your requirements from ESLint are. Based on that, it will create a configuration file and also install specific packages that you will need to fulfill your requirements. Once those are done, you can install all the necessary packages, and your configuration file will be created. Now you need to install the ESLint extension from VS Code. You can either go to the link below or use the Extensions tab on the left pane within VS Code. https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ESLint extension for VSCode Other Recommended Extensions for Writing JavaScript in VSCode Besides these, there are a few other extensions that can be useful while writing code. Prettier Prettier is one of the most popular extensions that enable you to format your code and make it look legible for others to read and understand. GitLens If you’re working on a repository or a project with more than one person, this extension allows you to collaborate and simultaneously write code. It has a series of features such as Code Authorship, Blame, Recent Changes, History, etc., to make working a simple process. REST Client It allows you to send HTTP requests and receive an immediate response within the VS Code environment itself. This way, you can check and test your APIs without having to leave the VS Code editor. Npm IntelliSense This extension allows you to autocomplete npm import commands. It’s a good feature to have. However, please note that for this, you’ll need to have NodeJs installed on your system so that it reads and interprets these commands. How Do I Run A JavaScript Code In VS Code? Although you can run your code files inside VS Code, it is better to have the Code Runner extension since it helps you run code files or active code text directly on the VS Code editor. You can go to the link below, download and install the extension: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner When running a program, the configuration needs to know where to look for the run-time executor. For this, you go to File -> Preferences -> Settings -> Workspace Settings Here, ensure that you have the executor PATH entered into an environment variable by adding it in the code-runner.executorMap block. Running a JavaScript File inside VS Code Running JavaScript file inside VSCode Create a new file and save it as a .js fileType in some javascriptSave the fileClick the Play Button in the top right corner of the VSCode window Is Visual Studio Code Good For JavaScript? Yes, it is! Considering it has almost all built-in JavaScript functions and features, Visual Studio Code makes it much easier for you to write JavaScript. In addition, the setup and configuration don’t take much time since most of it is already native to VSCode. However, it doesn’t restrict you to those features alone. You can augment them with additional extensions and use the full power of the code editor. Besides its user-friendly features, VS Code is also a lightweight program that consumes very little memory. As a result, its performance is fast, and the resource management is impeccable. Overall, VS Code is one of the best code editors for JavaScript out there. VS Code vs Atom: Which Is The Better Code Editor For JavaScript? Comparing the two editors as an overall coding experience, VS Code is better than Atom for the following reasons. Electron applications, in general, are infamous for being slow, and Atom is no exception to this. Unfortunately, it’s not as fast as VS Code. While VS Code’s structure has a combination of built-in features + extensions, Atom is powered primarily by extensions. For small programs, Atom is perfect since you only need a few extensions and packages, but Atom will slow down for larger programs since you’ll have to install too many extensions.However, on the design front, Atom is definitely more appealing to the users. Its UI is clean, slick, and breaks the monotony of too much code on the screen. As you see, when both editors are evaluated on a holistic level, VS Code comes out on top as the better editor for users. However, you should try both editors out for yourself and decide. If you want to learn how to set up Atom for JavaScript development, check out my Complete Guide to Setting Up Atom for JavaScript. Want More Tips and Tricks? Subscribe to our Newsletter! If you haven’t already subscribed, please subscribe to The Productive Engineer newsletter. It is filled with tips and tricks on how to get the most out of the productivity apps you use every day. We hate spam as much as you do and promise only to send you stuff we think will help you get things done. Newsletter Subscribe to our newsletter and stay updated. Enter your email address to subscribe Provide your email address to subscribe. For e.g abc@xyz.com SUBSCRIBE Terms & Privacy policy Check Out Our YouTube Channel! https://www.youtube.com/watch?v=3NiJEQCAFMc How to Use the Outline Tool in Google Docs We have a YouTube channel now and we are working hard to fill it with tips, tricks, how-tos, and tutorials. Click the link below to check it out! link to our YouTube page Do you use the same password for multiple sites? Do you have trouble remembering all your passwords? You should try 1Password! 1Password is secure and allows you to log in to sites and fill forms securely with a single click. I use 1Password for all my passwords and it really makes managing all my passwords simple. For more information on 1Password and to get a 30-day free trial, go to 1Password at the link below: 1Password - The world’s most-loved password manager Check out our Resources Page Check out our resources page for the products and services we use every day to get things done or make our lives a little easier at the link below: Link to the resources page Looking to Get Started Blogging or on YouTube? Getting started can seem daunting and scary (I know it was for me) but it doesn't have to be. I was very lucky to find a program that that has helped me grow my blog to over 35,000 page views and a YouTube channel that is growing month-over-month. Project 24 by Income School is the program that I have used. I have been a member for over a year now and just renewed my membership. I cannot recommend Project 24 enough! For more information on Income School, click the link below: Project 24 byIncome School - Teaching You How to Create Passive Income from Blogs and YouTube

How to be Productive When Working Remote

Recent Posts