Developers are often judged by their code style. While sometimes this doesn’t always affect work, it can be very beneficial in teaching new developers to write better code. The trick is knowing the best tools for code style.
Do you know that your code style can be used to evaluate your programming skills? Based on my years of experience and research, this is the article which will let you know about best tools for code style. So, start coding and enjoy with your friends.
EditorConfig
EditorConfig is a dot file which registers a few basic formatting rules such as the indentation, whitespace, and new lines breaking. It works universally to any type of language and is already integrated in almost all code editors and IDEs such as Visual Studio, Sublime Text, Vim, and TextMate via plugins.
Deployment
Assuming you are using Sublime Text, the easiest way to install the plugin is through the PackageManager.
- Go to Tools > Command Palette.
- Type Install Package.
- Search and install “EditorConfig”.
- Once the plugin has been installed, create a
.editorconfigin root directory of the project that will apply the specified configurations through all the files including ones within the sub-directories. - Add EditorConfig properties to define code formatting–the following is a common generic example:
root = true [*] charset = utf-8 indent_style = tab indent_size = 4 insert_final_newline = true
Use
Granted the configuration from our example, we will find our code indented with tab, and add a new line at the end of the file as you save it.
The configuration will affect all existing files where you might have previously used space indentation.
Refer to Supported Properties for applicable properties to the .editorconfig file, and the EditorConfig Wildcard Patterns to apply the properties for specific files or directories. You can also find list the plugin of your preferred editor or IDEs in the Download section.
StyleLint
StyleLint is a tool which examines our CSS against more than a hundred pre-defined rules, producing warnings in the case of violations. Some of these violations are easy to fix with the CSSComb, making these tools great to use hand in hand. CSSLint is also a perfect tool to perform a code review.
Deployment
- Install Stylint binary:
npm install stylelint -g - Create
.stylelintrcfile in the root directory of your project. - Include the rules in
.stylelintrcfile, for example:
{
"rules": {
"color-hex-case": "lower",
"color-hex-length": "short",
"comment-empty-line-before": "always",
"selector-no-combinator": true,
"selector-no-id": true,
"string-quotes": "double",
"selector-no-type": true,
"selector-no-universal": true,
"selector-no-vendor-prefix": true
}
}
A full list of applicable Stylint rules can be found on the Rules page.
Use
Use Stylelint through the command line (eg: stylelint "css/*.css"), PostCSS with the plugin, or install a plugin that will allow you to see the warnings directly within your code editor. The plugin is currently available for Sublime Text, Atom, and Visual Studio.
JSHint
Another tool that I use daily to check my JavaScript is JSHint. Unlike JSCS, JSHint evaluations revolve around code validity, instead of merely the code styling. In addition, JSHint will also remove stylistic rules in the next release, since JSCS has been growing traction and does the job well on that specific matter. As such JSHint will only check against the use of variables, loops, comparison operators, scopes, nesting level, and the likes of other technical JavaScript stuff which possibly cause issues or bugs.
Deployment
- Install JSHint binary globally via
npm install jshint -g - Create a file named
.jshintrcin the root directory of your project. - Include JSHint rules in
.jshintrc, for example:
{
"boss": true,
"eqeqeq": true,
"eqnull": true,
"expr": true,
"immed": true,
"noarg": true,
"undef": true,
"unused": true,
"node": true
}
Use
Use the jshint command line. Assuming you have all your JavaScript files stored in a directory named js, run jshint js.
Alternately, use JSHint with the Gulp or Grunt plugin. Sublime Text or Atom users may install the linter interface for SublimeText, Atom, allowing you to see the error report directly in the code editor.
Tip: CodePen will also check your JavaScript for errors using JSHint; find this option in the JavaScript Settings panel:
Review Board
Review Board is a web-based, open source tool for code review. To test this code review tool, you can either explore the demo on their website or download and set up the software on your server.
The Python programming language and its installers, MySQL or PostgreSQL as a database, and a web server are the prerequisites to run Review Board on a server.
You can integrate Review Board with a wide range of version control systems — Git, Mercurial, CVS, Subversion and Perforce. You can also link Review Board to Amazon S3 for storing screenshots directly in the tool.
Review Board lets you perform both pre-commit and post-commit code reviews depending on your requirements. If you haven’t integrated a version control system, you can use a diff file to upload code changes to the tool for a review.
A graphical comparison of changes in your code is also provided. In addition to code reviews, Review Board lets you conduct document reviews too.
The first version of Review Board came out over a decade ago, but it’s still in active development. Therefore, the community for Review Board has grown over the years and you will likely find support if you have any issues using the tool.
Review Board is a simple tool for code reviews, which you can host on your server. You should give it a try if you do not wish to host your code on a public website.
Bit.dev
Bit.dev is a cloud component hub. It’s a place to publish, document and organize JS components. It is not a code-style validator but it’s definitely helpful in standardizing code style as it makes reusing code so much easier.
Reusing code, in and across repositories, is essential for standardized and clear code.
Conclusion
When programming, we spend a lot of time trying to write clean and efficient code. One of the biggest problems is not writing new and useful things, but refactoring and cleaning up older code. This is where consistency of style becomes important. What tools you choose to help you with your code style can be the difference between hundreds of hours of wasted time on cleanup or efficient coding.