Chapter 5: Code Style and Formatting Tools

In addition to meeting business requirements, a professional frontend project should feature clean source code that is easy to maintain and extend.

In this chapter, we'll discuss code style and consistency. Next, you'll learn how to use Prettier and EditorConfig to enforce standard code formatting in teams with multiple members working with various integrated development environments (IDEs) and editors. Finally, we'll add ESLint to our project and configure it to work with Prettier and improve your code quality.

In this chapter, we'll cover the following main topics:

• Understanding code style and consistency
• Working with EditorConfig and Prettier
• Configuring ESLint and Prettier

By the end of this chapter, you'll have learned how to configure Prettier and EditorConfig, avoiding conflicts and redundancy. You'll also have learned how to configure ESLint to improve the code quality and...

Technical requirements

To complete this chapter's exercises, you only need a computer with any OS (I recommend Ubuntu 20.04 or higher) and the software installed in Chapter 1, Environment Setup and Introduction to UmiJS (VS Code, Node.js, and Yarn).

You can find the complete project in the Chapter05 folder in the GitHub repository available at https://github.com/PacktPublishing/Enterprise-React-Development-with-UmiJs.

Understanding code style and consistency

In this section, we'll discuss code style with some examples, so you will be able to understand why it's essential to use tools such as Prettier, EditorConfig, and ESLint when working on large enterprise projects.

We will not discuss JavaScript code conventions, but if you want to revise this topic, I recommend you read the Mozilla Developer Network JavaScript Guidelines at https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/JavaScript.

Each developer has their preferences when deciding how to format code. Even when following a specific language convention, some decisions about the code formatting can divide developers. Consider the following function invocation example:

function execute(param1, param2, param3) {
    return param1 + param2 + param3;
}
execute(arg1, arg2, arg3);

Here, we invoke the function by passing the arguments inline. In some cases, when passing more arguments...

Working with EditorConfig and Prettier

In this section, you'll learn how Prettier and EditorConfig can work together to enforce the code style across IDEs and developers' code and how to prevent redundancy when configuring these tools.

Let's start by learning how EditorConfig works.

Working with EditorConfig

EditorConfig consists of a format file and a set of plugins that ensure almost any IDE or editor follows the code style you have defined as you type. In some cases, you don't even need to install any extensions as various IDEs and editors come with native support for EditorConfig. You can read more about EditorConfig at https://editorconfig.org/.

Let's take the example of the format file that comes with the umi-app template, which we used to start our project from scratch:

.editorconfig

root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md...

Configuring ESLint and Prettier

In this section, we'll configure ESLint and integrate Prettier with ESLint to improve the code quality, and to prevent conflicts between these two tools.

ESLint is a tool for analyzing, fixing, and reporting inconsistencies and issues that can generate bugs in your code. This tool can format and improve the code quality with various plugins that implement the rules that meet your project's needs. You can read more about ESLint at https://eslint.org/.

Like Prettier and EditorConfig, ESLint also applies style rules to the code. In our scenario, where we use EditorConfig to override the IDE code style and Prettier to enforce a consistent code style by applying its own rules, we'll use only the code quality rules that ESLint offers. We could use only ESLint for code quality and formatting, but Prettier excels in code formatting and easily integrates with ESLint.

Before getting into the details about integrating Prettier and ESLint...

Summary

In this chapter, we discussed code style and learned that it is essential to ensure a consistent code style when working on professional projects with multiple team members.

We learned how to use EditorConfig to define a consistent code style across IDEs and editors and maintain the same formatting regardless of developers' preferences. Next, we learned how to work with Prettier to enforce the code style and how to avoid redundancy when working with Prettier and EditorConfig in the same project.

We also installed and configured ESLint to improve the code quality by analyzing and reporting code issues in your project. We disabled the ESLint style rules by installing and extending the Prettier plugin configuration in our ESLint configuration file. Finally, we disabled the react-in-jsx-scope rule by extending the corresponding configuration from the ESLint React plugin.

In the next chapter, we'll discuss code tests and learn how to write tests using the Jest...