Collaborating on code starter pack ^

Hello fellow developers,

 
Hope you're doing well! In this post, I'll be writing about a few tools that help to maintain Code Styling and Quality, in order to have a consistency of writing code when working in teams.
 
Code styling, at the first glance, looks like it's just about how well the code looks. But in the words of a pretty cool transformer,

"There's more to them than meets the eye" - Optimus Prime
 

Code styling is also about how much the code is readable and interpretable. Most of us have a way of writing code (number of spaces for indentation, way of defining functions, etc) that we instinctively recognize and is readily intelligible to us. Being thrown into an area with an unfamiliar coding style, or having a code base which looks like a mixture of different coding styles is usually difficult to deal with. We tend to spend more time on interpreting things, and at times it could be frustrating. This leads to a severe drop in productivity.
 
Coding style is made up of numerous small decisions based on the language:

1. How and when to use comments,
2. Tabs or spaces for indentation (and how many spaces),
3. Appropriate use of white space,
4. Proper naming of variables and functions,
5. Code grouping an organization,
6. Patterns to be used,
7. Patterns to be avoided.   Code style is usually very personal to individual developers as we start out with learning things as we go, and what suits us well. However, there are some well defined code guides out there which have set up some guidelines in order to ensure code consistency.   A good place to find them is here

Now, coming back to the post, I will now introduce you all to some tools which can help you out in maintaining a code style.

1. ESLint

ESLint is a pretty famous linter for all javascript codebases. Even creat-react-app generated project has an eslint configuration built in.
 
Eslint has the following features:

• Code styling guides
• Checking the codebase (can be selective or entire project)
• Checking based on ECMA version
• Auto fixing lint errors   To enable ESLint in your project, you need to add the package to your project with your package manager (like NPM, or Yarn) and then need to define a eslintrc.json file. A sample eslintrc.json is as follows,

{
  "env": {
    "node": true,
    "jest": true
  },
  "extends": ["airbnb-base", "plugin:jest/recommended", "plugin:security/recommended"],
  "plugins": ["jest", "security"],
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-console": "error",
    "func-names": "off",
    "no-underscore-dangle": "off",
    "consistent-return": "off",
    "jest/expect-expect": "off",
    "security/detect-object-injection": "off"
  }
}

More about ESLint installations and configurations can be found here: ESLint User Guide

2. PrettierJS

PrettierJS is similar to ESLint, and both of them can be used together. Prettier is an opinionated code formatter, meaning, it passes the code formatting work to the computer-based on the rules defined by you. It analyses the code by parsing your code into an abstract syntax tree (AST) and pretty-printing the AST. This means that your code is automatically saved and you need not worry about making a long list of commits indicating "style fixes".
 
Prettier has the following features:

• Autosave formatting
• Supports many languages
• Easy to setup   Prettier can be used directly in your project by installing it with NPM or Yarn. You can also add prettier as a valid script in your package.json as,

    "prettier": "prettier --check **/*.js",
    "prettier:fix": "prettier --write **/*.js",

More information can be found at Prettier

3 Husky

This is not exactly something limited to code styling, but I thought to include it as it automates most tasks before committing.
 
Dev 1: Did you make a commit?
Dev 2: Yeah sure, just did.. Nailed that bug
Dev 1: Great! Did you fix the code style?
Dev 2: ...
 
Haha, this is where Husky🐶 comes into the picture. Husky is used to configure Git hooks which are triggered by Git actions. For example, if you keep forgetting about fixing linting errors while committing, you can set up a Git hook to automatically fix code style whenever you make a commit.
 
Husky supports all Git hooks and you can install the package to your project with your package manager (like NPM, or Yarn) and then need to define a huskyrc.json file.
A sample huskyrc.json for automating code styling on commits is as follows,

{
  "hooks": {
    "post-checkout": "yarn",
    "pre-commit": "prettier --check *.js",
    "post-commit": "git status"
  }
}

More information can be found at Husky

 
Alright, so that's it from me for now, hope this was helpful and I'll be seeing more of you people adhere to coding styles in your projects as most of us have started out as self-taught developers and this reminds me of a joke,

And always remember,

if (buildingAwesomeProject) {
   setEquallyAwesomeCodingStyles(true);
}

 
Peace and stay safe ✌️

 
You can follow me on my Dev.to @vedant1202
and on my Github@Vedant1202

 
Footnotes

1. Cover Photo by Oskar Yildiz on Unsplash
2. Memes from Google Images.
3. ESLint https://eslint.org/
4. Prettier https://prettier.io/
5. Husky https://typicode.github.io/husky/