Style Guide in JavaScript

Style Guide in JavaScript is a set of best practices, coding standards, recommendations, conventions, and rules that developers should follow while writing JavaScript code. It helps in maintaining the code quality, readability, and consistency across the codebase. It also helps in avoiding common pitfalls and bugs in the code.

There are various tools available for enforcing the style guide in JavaScript such as ESLint, Prettier, Airbnb, Google, Standard, etc. These tools help in automatically checking the code against the style guide and providing suggestions or warnings to fix the issues.

In this tutorial, we will learn about the style guide in JavaScript and how to enforce it using ESLint and Prettier.

Style Guide Rules

The style guide in JavaScript consists of various rules that developers should follow while writing code. These rules cover various aspects of coding such as naming conventions, indentation, spacing, comments, etc. Some common rules in the style guide are:

Naming Conventions

Use camelCase for variable names.
Good
```
let myVariable = 10;
```
Use PascalCase for class names.
Good
```
class MyClass {
  // class definition
}
```
Use UPPERCASE for constants.
Good
```
const MY_CONSTANT = 100;
```

Indentation

Use 2 or 4 spaces for indentation.

Good
function myFunction() {
  if (condition) {
    // code block
  }
}

Good
function myFunction() {
  if (condition) {
    // code block
  }

  return result;
}

Spacing

Use spaces around operators.
Good
```
let sum = a + b;
```
Use spaces after commas.
Good
```
let arr = [1, 2, 3];
```

Comments

Use comments to explain complex code or logic.

Good
// Calculate the sum of two numbers
function sum(a, b) {
  return a + b;
}

Avoid unnecessary comments.

Bad
// Function to add two numbers
function sum(a, b) {
  return a + b; // return sum
}

These are just a few examples of the rules in the style guide. There are many more rules that cover different aspects of coding.

Linting

Linting is the process of analyzing the code for potential errors, bugs, stylistic issues, and enforcing the style guide rules. ESLint is a popular linting tool for JavaScript that helps in identifying and fixing problems in the code. It can be configured to enforce the style guide rules and provide warnings or errors when the code violates these rules.

To use ESLint in your project, you need to install it as a development dependency using npm or yarn.

npm install eslint --save-dev

Once installed, you can create an ESLint configuration file .eslintrc.js in the root of your project to define the rules for your project.

.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  extends: ["eslint:recommended"],
  rules: {
    // add your custom rules here
  },
};

You can also use popular ESLint configurations such as Airbnb, Google, Standard, etc., which provide a set of predefined rules that you can use in your project.

Install ESLint Config Airbnb

npx install-peerdeps --dev eslint-config-airbnb

.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  extends: ["airbnb"],
  rules: {
    // add your custom rules here
  },
};

Once you have configured ESLint, you can run it on your project using the following command.

Run ESLint

npx eslint .

ESLint will analyze your code and report any errors or warnings based on the rules defined in the configuration file.

Prettier

Prettier is another popular tool for code formatting that helps in enforcing consistent code style across the codebase. It automatically formats the code according to the predefined rules such as indentation, spacing, line breaks, etc.

To use Prettier in your project, you need to install it as a development dependency using npm or yarn.

npm install prettier --save-dev

Once installed, you can create a Prettier configuration file .prettierrc in the root of your project to define the formatting rules.

.prettierrc
{
  "singleQuote": true,
  "semi": false
}

You can also integrate Prettier with ESLint using the eslint-plugin-prettier and eslint-config-prettier plugins. This allows ESLint to check for formatting issues and fix them using Prettier.

npm install eslint-plugin-prettier eslint-config-prettier --save-dev

.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  extends: ["airbnb", "plugin:prettier/recommended"],
  rules: {
    // add your custom rules here
  },
};

Once you have configured Prettier with ESLint, you can run ESLint with the --fix option to automatically fix the formatting issues in your code.

Run ESLint with Prettier

npx eslint . --fix

This will format your code according to the Prettier rules and fix any formatting issues in the code.

By following the style guide rules and using ESLint and Prettier, you can maintain code quality, readability, and consistency in your JavaScript projects.

info

Note: You can also use other linting and formatting tools such as TSLint, JSHint, etc., based on your project requirements.

Conclusion

In this tutorial, we learned about the style guide in JavaScript and how to enforce it using ESLint and Prettier. We covered the common rules in the style guide, linting with ESLint, and code formatting with Prettier. By following the style guide rules and using these tools, you can maintain code quality, readability, and consistency in your JavaScript projects.

Style Guide Rules​

Naming Conventions​

Indentation​

Spacing​

Comments​

Linting​

Prettier​

Conclusion​