In this article I’ll be discussing how to use Emmet, and various VS Code extensions to make your coding life easier and more organized.
Professional Dev's utilize shortcuts to make coding faster and more efficient. You can do that too! Get started today learning how to set up some of these same tools to make your coding life easier.
What Is Emmet and How Do I Use It?
Emmet is a set of keyboard abbreviations that will automatically convert to the language you're using them with. Although that may sound confusing, it's a lot simpler than it sounds. Emmet allows you to type less and create code more quickly. It is simply a list of shorthand keystrokes that will fill out as HTML, CSS, and other languages. Checkout the Emmet Cheat Sheet here to see all of the available languages and to get started. Let's dive right in to see Emmet in action.
If you want, you can check out how to get started with Emmet in my help article here.
What is ESLint and How Do I Use It?
ESLint is a tool that will analyze your JavaScript code and let you know if problems exist within it while you're coding. If you want to avoid running into common syntax errors or other simple errors before you run your code in a JavaScript Runtime Environment like a browser, then you should start using ESLint today. You can use ESLint to make your coding life easier and I'll show you how. To find out more about ESLint, check out their documentation here. In short, after setting up ESLint in VSCode, you'll be able to find problems in your code and fix them before ever running it in the browser.
Check out my blog post about how to set up ESLint in VSCode.
What is Prettier & How Do I Use It?
To put it simply, Prettier is a code formatter. The reason we format code is to make it readable, not only for others, but for yourself as well. Check out the Prettier docs for more info here.
Readable code is workable code and you can make your code easy to work with if you format it appropriately. The problem with formatting your code manually is that not only is it error prone, but it's tedious and time consuming. Using a tool like Prettier can save you time, and prevent errors in your formatting. Your code will be more legible and you'll have an easier time navigating your code if you haven't looked at it in a while. You can even set up Prettier in VSCode to format your code whenever you save it. Configuring Prettier is not always a straight forward process. In this article I'm going to show you how to set Prettier up in VSCode to make your coding life easier.
Check out my blog post about how to set up Prettier in VSCode.
Top comments (0)