Linting

Introduction

Before we dive all the way into the Code, we are going to take a moment to improve your editor setup and overall productivity. Doing this now will make things much easier for you going forward. This lesson will give you some information about code style, and then give you some tools to help you maintain consistent code-style throughout your projects. In some cases it can even help adjust things like indentation for you! We will also introduce template repositories which can save you time setting up projects that share a lot of configuration with other projects.

Style guides

Code style is important! Having a consistent set of style rules for things such as indentation or preferred quote style makes your code more maintainable and easier to read. There are several popular JavaScript style guides on the net that set standards for these types of things, and a little time spent reading them will make you a better developer.

The Airbnb Style Guide is one of the most popular. It is also very well formatted and easy to read.
Google also has their own style guide for JavaScript.
The JavaScript Standard Style. Used by companies like NPM and GitHub, among others.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

Set up a linter and prettier to make your code better.
Learn what template repositories are and how to set one up.

The style guides we mentioned above are full of really helpful advice for formatting, organizing and composing your code. But there are a lot of rules - it can be difficult to internalize them all. Linters are tools that will scan your code with a set of style rules and will report any errors to you that they find. In some cases, they can even auto-fix the errors! The following articles explain in more detail the benefits of using a linter while you code.

This article gets right to the point… start here!
This article goes a little further by discussing exactly how linters do what they do.

There are multiple options for linting your JavaScript, but the most popular (and most common in the industry) is eslint. Getting it installed and the initial set-up is fairly simple.

The official ‘Getting Started’ page is a good place to start. It covers installation and basic setup. The basic way to use this tool is to simply run the eslint command in your terminal with a specific file.
Far more useful are linting plugins for your favorite text editor. Most editor plugins allow you to automatically lint your code as you are writing it, and will show the errors right in the editor, which makes resolving them much simpler. We can’t cover every editor installation but some of the more popular are:
1. Visual Studio Code - The Plugin and a tutorial.
2. Sublime Text - The Plugin and a tutorial.
3. Atom - The Plugin and a tutorial.
4. Vim - Use the ALE plugin. If you use Vim you already know what you’re getting into. ALE is a great plugin, but the setup and configuration can be a little tricky.

Prettier

Prettier is awesome. It is similar to a linter, but serves a slightly different function. Prettier will take your JS code and then automatically format it according to a set of rules. Unlike a linter, it’s not looking for style errors, but specifically targeting the layout of your code and making intelligent decisions about things like spaces, indentation levels and line-breaks.

This quick talk from Prettier’s creator is a great introduction.
Give it a test drive here. Go ahead and copy/paste some of your old JavaScript code into that editor and see what happens.
Setup is simple. The homepage links to tutorials for most popular editors.

Using prettier makes coding faster and easier! You don’t have to worry about nailing things like indentation, or remembering every semi-colon because prettier will take care of those details for you.

Using ESLint and Prettier

We highly recommend that you install ESlint and Prettier and use them for all future projects. It will make your code easier to read, both for yourself and for anyone else looking at it. However, using ESLint and Prettier together causes conflicts. To fix that follow the instructions to install eslint-config-prettier. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. Doing just this is enough to resolve the conflict and get them both working smoothly with one another. Another way to address the conflict is to use eslint-plugin-prettier. It lets you run Prettier as if it were a rule in ESLint. However, doing this is not recommended. You can learn more about it here.

Template repositories

With the last few projects, you might have felt that setting up Webpack involved a fair few files and configuration, and that you may have had to look at what you configured before to copy and paste the configuration you want to reuse. You may also have noticed that whenever you create a new repository on Github, there is an option near the top for a Repository template.

This is where template repositories can come very much in handy. Any of your existing repositories can be converted to a template in its settings (right under where you can rename the repository, there is a checkbox for whether the repository is a template or not). If you check this box, congratulations, that’s all you need to do! Now when you go to create a new repository, the Repository template dropdown will have any templates listed for you to select. Selecting one will mean your new repository will be a copy of the chosen template, not an empty one!

If you find yourself reusing a lot of setup code for multiple projects, you can simply make a new repository with all of the setup code you need then mark it as a template. Now you can select that template when creating a new project repository to save time getting set up, letting you dive into working on the project itself sooner!

Knowledge check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.