Coding is always fun when you are learning new stack or programming language and while learning, we are not always following the standard naming conventions or coding styles.

However coding style is very important if you are working within a project that contains multiple developers. Every software company can have their own standards, but applying this style for all projects is the hard part to manage.

So a common understanding of way of writing the code is one of the best practices that we have to follow. Some advantages of coding standards I can think of;

  • Easy to read someone elses code
  • Avoid simple mistakes
  • Easy maintanence
  • Less technical dept

Today I will talk about one of the most popular npm package standard for coding style of javascript. Why this is so popular, is that you do not need to make different configurations for your project. Only install it as a development dependency.

Before going forward, let me tell about npm package dependencies and the difference between development and production dependency. Briefly, all the packages you use to develop your node package, product, project etc. are production dependencies and the other packages that you use for unit testing, code coverage, coding style, generators etc. are for development dependencies.

NPM can seperate this easily by looking at the package.json file. Let me give you an example of a simple package.json file, which contains both development and production dependencies.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
"name": "nginx-upstream",
"version": "1.0.0",
"description": "Nginx upstream file configuration",
"main": "index.js",
"scripts": {
"test": "mocha"
},
"keywords": [
"nginx",
"upstream",
"node"
],
"author": "volem",
"license": "MIT",
"devDependencies": {
"mocha": "^3.2.0",
"typescript": "^2.2.1"
},
"dependencies": {
"nginx-conf": "^1.3.0",
"secure-callback": "^1.1.9"
}
}

Here you can see “devDependencies” and “dependencies” sections in the file. As you can guess “devDependencies” section is used for development and “dependencies” section is for your production dependencies.

Auto Update package.json File For Dependencies

You do not need to update package.json file manually when you want to install a dependency package for your node application. Just open your terminal and;

1
2
3
4
5
6
7
8
9
# Development Dependency
npm install <packagename> --save-dev
# Production Dependency
npm install <packagename> --save
# Example For Standard. Coding style is not for production purposes.
npm install standard --save-dev
# Example For Development
npm install express --save

Standard NPM Package

Let’s go back to our topic about coding standards on javascript and how to automate it. As I mentioned before, Standard package is easy to config and use. Let’s pass the installation part since all npm installations are same :). You can find samples at my other posts. Standard is using eslint as a dependency and this package is already one of the most popular npm package around.

Standard Usage

If you install standard globally, than by default it checks for the javascript files in your working directory. Let’s try standard in secure-callback (Check previous post about type definitions. I used the same npm package.). I go to /dist folder and run standard at my terminal and the output is;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
dist/securecallback.js:1:1: Strings must use singlequote.
dist/securecallback.js:1:13: Extra semicolon.
dist/securecallback.js:2:20: Missing space before function parentheses.
dist/securecallback.js:3:5: Expected indentation of 2 spaces but found 4.
dist/securecallback.js:3:42: Extra semicolon.
dist/securecallback.js:6:5: Expected indentation of 2 spaces but found 4.
dist/securecallback.js:6:28: Missing space before function parentheses.
dist/securecallback.js:7:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:7:64: Extra semicolon.
dist/securecallback.js:8:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:8:63: Extra semicolon.
dist/securecallback.js:9:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:9:73: Extra semicolon.
dist/securecallback.js:10:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:10:48: Unnecessary use of conditional expression for default assignment.
dist/securecallback.js:10:70: Extra semicolon.
dist/securecallback.js:11:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:11:48: Unnecessary use of conditional expression for default assignment.
dist/securecallback.js:11:94: Extra semicolon.
dist/securecallback.js:12:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:12:58: Unnecessary use of conditional expression for default assignment.
dist/securecallback.js:12:109: Extra semicolon.
dist/securecallback.js:14:5: Expected indentation of 2 spaces but found 4.
dist/securecallback.js:15:9: Expected indentation of 6 spaces but found 8.
... and 40 lines more.

It looks like we have hell of a work to fix all these issues. Before going forward for fixing these issues, I prefer semicolons at the end of each statement, so I don’t want to fix that. There are different discussions about semicolon usage and is it necessary for javascript (here, here and here), but in summary I am on the side of “every statement should end with semicolons” just because I am C style guy. So we need a way to tell standard not to check that style. Find your global installation of standard and update the “eslintrc.json” as follows;

1
2
3
4
5
6
7
8
9
{
"extends": ["standard", "standard-jsx"],
"rules": {
/// "always" requires semicolons at the end of statements
"semi": [2, "always"]
/// To disable rule
// "semi": 0
}
}

So after our update on default settings of standard, let’s run standard again.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
dist/securecallback.js:1:1: Strings must use singlequote.
dist/securecallback.js:2:20: Missing space before function parentheses.
dist/securecallback.js:3:5: Expected indentation of 2 spaces but found 4.
dist/securecallback.js:6:5: Expected indentation of 2 spaces but found 4.
dist/securecallback.js:6:28: Missing space before function parentheses.
dist/securecallback.js:7:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:8:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:9:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:10:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:10:48: Unnecessary use of conditional expression for default assignment.
dist/securecallback.js:11:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:11:48: Unnecessary use of conditional expression for default assignment.
dist/securecallback.js:12:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:12:58: Unnecessary use of conditional expression for default assignment.
dist/securecallback.js:14:5: Expected indentation of 2 spaces but found 4.
dist/securecallback.js:15:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:16:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:17:13: Expected indentation of 10 spaces but found 12.
dist/securecallback.js:19:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:20:13: Expected indentation of 10 spaces but found 12.
dist/securecallback.js:21:17: Expected indentation of 14 spaces but found 16.
dist/securecallback.js:22:13: Closing curly brace does not appear on the same line as the subsequent block.
dist/securecallback.js:23:13: Expected indentation of 10 spaces but found 12.
dist/securecallback.js:24:17: Expected indentation of 14 spaces but found 16.
dist/securecallback.js:26:9: Closing curly brace does not appear on the same line as the subsequent block.
dist/securecallback.js:27:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:28:13: Expected indentation of 10 spaces but found 12.
dist/securecallback.js:31:5: Expected indentation of 2 spaces but found 4.
dist/securecallback.js:32:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:33:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:34:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:35:13: Expected indentation of 10 spaces but found 12.
dist/securecallback.js:37:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:39:5: Expected indentation of 2 spaces but found 4.
dist/securecallback.js:40:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:41:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:42:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:43:13: Expected indentation of 10 spaces but found 12.
dist/securecallback.js:45:9: Expected indentation of 6 spaces but found 8.
dist/securecallback.js:47:5: Expected indentation of 2 spaces but found 4.

Again hell of a work, but standard has the option to autofix most of our errors. (Thank god :)) Execute below command.

1
standard --fix

Strange no output of this command and it updated the file securecallback.js
Let’s see the status by executing standard again.

1
2
standard
# Output : Nothing. What??!! All of the errors are fixed for us!!! Thanks standard :)

Automate standard

To automate standard, we can put another script to our package.json file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"name": "secure-callback",
"version": "1.1.9",
"description": "Checks callback functions validity",
"main": "./dist/securecallback.js",
"types": "./dist/securecallback.d.ts",
"scripts": {
"test": "mocha",
"coverage": "istanbul cover node_modules/mocha/bin/_mocha test/test.js",
"build": "npm run build:live",
"build:live": "tsc",
"testlocal": "standard dist/*.js && mocha"
},
//... rest of file omitted

Here I added the testlocal method which executes standard globally and than executes our mocha tests. And before you commit your changes execute testlocal or execute this command in your CI.

The only thing I did not like about standard is that you cannot extend the standard rules. If you want to, than you can use the ruleset of standard, extend it and execute it via eslint. If I am wrong, please comment. The package you need to use for this purpose is eslint-config-standard

There is also another package for typescript coding style library using tslint. I will write another post for describing tslint automation.

Again thanks for reading.

See the source used in this post from github