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:
- How and when to use comments,
- Tabs or spaces for indentation (and how many spaces),
- Appropriate use of white space,
- Proper naming of variables and functions,
- Code grouping an organization,
- Patterns to be used,
- 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
Kristories
/
awesome-guidelines
A curated list of high quality coding style conventions and standards.
Awesome Guidelines 
A set of guidelines for a specific programming language that recommend programming style, practices, and methods for each aspect of a program written in that language.
Contributions welcome. Please read the contribution guidelines before contributing. Add links through pull requests or create an issue to start a discussion.
Contents
- Programming Languages
- Development Environment
- Platforms
- Frameworks
- Content Management System
- Tools
- Contributors
Programming Languages
Brainfuck
C
C#
C++
- Google C++ Style Guide
- C++ Core Guidelines - A set of tried-and-true guidelines, rules, and best practices about coding in C++.
Clojure
- The Clojure Style Guide - A community coding style guide for the Clojure programming language.
Common Lisp
D
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.jsonfile. A sampleeslintrc.jsonis 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.jsonas,
"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
- Cover Photo by Oskar Yildiz on Unsplash
- Memes from Google Images.
- ESLint https://eslint.org/
- Prettier https://prettier.io/
- Husky https://typicode.github.io/husky/
Top comments (0)