Installing and setting up eslint and prettier configuration!!

Introduction

If you were working alone, coding yourself and make a good project without others' contribution, you might seem OK so far, BUT NOT ANYMORE.
If you are thinking of being a open source developer, you need to collaborate with strangers via online. Trust them, and give them a freedom on the project to fix bug, improve the code. Which means you barely have a full control on your project (since the project is NOT for all yours, but for everyone).

As you have a certain preference on your coding style, others do. If everyone code with different coding-style, the project is not readable and maintainable. Also, for the new contributor, they will be too exhausted to find out what's going on the project.

There are two possible solution to solve this problem

1. Make a good documentation to give a guideline for contributors

You can choose a one great style-guideline and let them know your project is following this style. By doing so, everyone knows that they need to follow the code-style to contribute.

2. Force them to follow the style anyhow

If we can make them "have to" follow the code-style, it will save time and we can spend more effort on the real thing!
In this post, we are going to talk about the second solution

prettier

What prettier does? the prettier is a kind of code-styling-checker. The users can make their own style setting and re-organize the code. For example, if you type shift + alt + f on vscode, this will re-format your code to look nicer. If you are not using proper indent and curly bracket and others, it will do them for you. Likewise the prettier do this, but you can MAKE your style.

first you need to create configuration file

• A "prettier" key in your package.json file.
• A .prettierrc file written in JSON or YAML.
• A .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
• A .prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.
• A .prettierrc.toml file.

Once you create one of them, now you can make your rules on that. For example:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

in .prettierrc.json

You can find more info on How to create configuration files?, Options for prettier

eslint

eslint seem similar to prettier, but it will check the syntax before running the program. So if it finds some invalid syntax, it will complain about that. Setting up eslint is same with prettier

You can find info here

.vscode

Many programmers use vscode, and the vscode provide nice feature "extension". prettier and eslint is also distributed by extension. You can make contributors to install them.

In the .vscode/extensions.json

{
    "recommendations": [
        "editorconfig.editorconfig",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
    ]
}

Example with findBreakUrl

// in .eslintrc.json
{
    "parserOptions": { "ecmaVersion": 8 },
    "rules": {
        "semi": "error",
        "quotes": ["error", "single"]
    }
}

// in .prettierrc.json
{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true,
    "arrowParens": "always"
}