Hygienic programming using dot files

Automating development process is really important to stay productive and focused while working on a project, and there are several dot files which can help you in doing same.

Table of Contents

  1. .gitignore
  2. .editorconfig
  3. .jshintrc ( Javascript Only )
  4. .bowerrc
  5. .travis.yml

.gitignore

Most of us live on version control systems like git to push incremental updates on a project.

These incremental updates can take long if we will start pushing all files to a git repository. Generally 3rd party dependencies/packages like npm modules for nodejs , packagist packages for php or ruby gems for ruby can be re-installed after taking pull and does not require to be pushed again and again.

.gitignore files helps you in ignoring files or folders. It accepts filenames, folders and even glob patterns to ignore files.

example .gitignore file

  node_modules
  scripts/**/*.coffee

Read more about gitignore http://git-scm.com/docs/gitignore

.editorconfig

Everyone have there own style to write code , which is perfectly fine while working on individual projects. Working as a team requires consistency, so that you are not spending time in formatting others file.

Most programmers indent their code, helping in easy visualization. I prefer to use of 2 spaces for identation where at my workplace our team follow 4 spaces.

I can easily change settings from 4 to 2 , or 2 to 4 depending upon which project i am working on.

Isn't that too hard to remember ?

This is where .editorconfig file becomes handy as i can specify rules which will be followed by my code editor. This is how .editorconfig looks like.

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

[*]
end_of_line = lf  
charset = utf-8  
trim_trailing_whitespace = true  
insert_final_newline = true  
indent_style = space  
indent_size = 4

[*.js]
indent_style = space  
indent_size = 4

[*.css]
indent_style = space  
indent_size = 4

[*.html]
indent_style = space  
indent_size = 4

[*.md]
trim_trailing_whitespace = false  

you can define different styles for different file extensions in your .editorconfig inside your project root.

I keep above file inside my project root , while working in office and i have a global editorconfig file inside my home directory for my personal project.

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true

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

[*.js]
indent_style = space  
indent_size = 2

[*.css]
indent_style = space  
indent_size = 2

[*.html]
indent_style = space  
indent_size = 2

[*.md]
trim_trailing_whitespace = false  

Your editor will look for this file inside your project root or inside your home directory ( ~/.editorconfig ).

.editorconfig does not work like a magic , as you have to download plugin for your editor. Almost every editor supports this file but i will reference to commonly used editors.

  1. Sublime Text
  2. Atom
  3. Vim

Also you can read more about .editorconfig here http://editorconfig.org/

.jshintrc

Jshint enables strict checking on your Javascript files, helping you to write better code. It will detect errors and potential problems inside your Javascript code and again enforces different set of rules which can be used as a standard within your team.

{
  "node": true,
  "browser": true,
  "esnext": true,
  "bitwise": true,
  "camelcase": false,
  "curly": true,
  "eqeqeq": true,
  "immed": true,
  "indent": 2,
  "latedef": true,
  "newcap": true,
  "noarg": true,
  "quotmark": "double",
  "undef": true,
  "unused": true,
  "strict": true,
  "trailing": true,
  "smarttabs": true,
  "globals": {
    "require": false
  }
}

Above is the set of rules i personally use for my node projects. You can save this file inside your project root and can use jshint cli tool to validate any file.

Installing jshint

You have to install jshint before you can use it or you can also copy and paste your javascript here on [jshint][f53769da].

  npm install jshint -g

Above command will install jshint globally on your machine using [npm][2dc38ac5] ( node package manager ) , after you can use it
to validate any of your js files.

Example

  jshint index.js

Outputs

jshint cli

It shows i have a typo error where i forgot to put semicolon on line 79.

You can use gulp or grunt to automate jshint process.

[Grunt plugin][3d322e8c]

Gulp Plugin

.bowerrc

Bowerrc is a bower ( package manager for frontend ) helps you defining some rules which bower understands. Bowerrc can have handful of options but i will paste the one's i use quite frequently.

{
  "directory": "app/components/", // where to save bower packages
  "analytics": false, // whether you want bower to collect anonymous data
  "timeout": 120000, // how long to wait for bower to respond
  "cwd" : "./",
  "color": true
}

You can read more about .bowerrc here http://bower.io/docs/config/

.travis.yml

.travis.yml is a file used by [Travis Ci][09db8f9b] , and makes your life easier when you are working as a team on github. It is free for open source projects on github, and manages project status, pull requests etc out of the box for you.

.travis.yml file helps you in defining different rules which are followed by Travis ci.

My example .travis.yml files looks something like this.

---
language: node_js

sudo: false

cache:  
directories:  
- node_modules

before_install:

install:  
- npm install -g bower
- npm install
- bower install

script:  
- npm test

1 important thing to note here is

sudo: false if your project does not require sudo ( root ) rights, always keep it false as it will help in faster builds. Container-Based Infrastructure will help reduce your builds time to 10 seconds, where it takes more than a 1 minute in some cases.

You can read more about Container-Based Infrastructure here on http://blog.travis-ci.com/2014-12-17-faster-builds-with-container-based-infrastructure/

Learn more about travis-ci and it's features here on https://code.tutsplus.com/tutorials/travis-ci-what-why-how--net-34771

I tried to add some light to these hidden gems , which can inturn help you in being productive by automating your development process. You can read more about all these dot files by googling them or by using reference links inside this post