At the most recent jQuerySF conference, Mike Sherov and I did a joint talk on the topic of JavaScript Syntax Tree: Demystified. The highlight of the talk was the demo from Mike as he showed how to fix coding style violations automatically.
The trick is to use JSCS and its latest features. If you want to follow a long, here is a step-by-step recipe.
First, you need to have JSCS installed. This is as easy as:
npm install -g jscs
Let’s pick an example project, for this illustration I use my kinetic scrolling demo:
git clone https://github.com/ariya/kinetic.git
cd kinetic
Now you want to let JSCS analyze all the JavaScript files in the project and deduce the most suitable code style:
jscs --auto-configure .
Give it a few seconds and after a while, JSCS will present the list of code style presets along with its associated number of errors, computed from your JavaScript code. If you already have a preset in my mind, you can choose one. An alternative would be to pick one that has the least amount of violations, as it indicates that your code already gravitates towards that preset.
Once you choose a preset, JSCS will ask you a couple of self-explained questions. At the end of this step, the configuration file .jscsrc will be created for you. With the configuration, the real magic happens. You just to invoke JSCS this way:
jscs -x .
then it will automatically reformat your JavaScript. Double check by looking at the changes and you will see that your code style now follows the specified preset.
With JSCS, you can comfortably ensure code style consistency throughout your project!