Current popular JavaScript code style guide

JavaScript doesn't have an authoritative coding style guide, instead it has some popular coding styles:

Google the JavaScript Style guide (hereinafter referred to as" Google ) 

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

NPM Coding style (hereinafter referred to as" NPM ) 

https://npmjs.org/doc/coding-style.html

Felix the Node.js Style guide (hereinafter referred to as" Node.js ) 

http://nodeguide.com/style.html

 Idiomatic ( Idiomatic ) JavaScript (hereinafter referred to as Idiomatic ) 

https://github.com/rwldrn/idiomatic.js/

jQuery JavaScript Style guide (hereinafter referred to as" jQuery ) 

http://contribute.jquery.org/style-guide/js/

Douglas Crockford the JavaScript Style guide (hereinafter referred to as" Crockford ), Douglas Crockford is Web One of the most recognized technical authorities in the development field, ECMA JavaScript 2.0 Member of standardization committee 

http://javascript.crockford.com/code.html

Of course, there are some default Settings to choose from in the JavaScript syntax checkers JSLint and JSHint. The question is, what is the ultimate JavaScript coding style that most developers can follow? Let's take a look at some of the styles we agree on from these 6 style guides.

1. Code style comparison

1.1 the indentation

Two Spaces, no longer indentation, no Tab indentation: Google, NPM, node. js, Idiomatic
Tab indentation: jQuery
4 Spaces: Crockford

1.2 Spaces between parameters and expressions

Use the compact style: Google, NPM, node. js

project.MyClass = function(arg1, arg2) {

Using Spaces too much: Idiomatic, jQuery

for ( i = 0; i < length; i++ ) {

No comment: Crockford
In most guidelines, developers are warned not to have any Spaces at the end of statements.

1.3 code line

Up to 80 characters: Google, NPM, node. js, Crockford (when in a code block, indentation with the exception of 2 Spaces allows the function argument to be aligned with the position of the first function argument. Another option is to use four Spaces instead of two when wrapping.
No comments: jQuery, Idiomatic omatic

1.4 the semicolon

Always use semicolons and do not rely on implicit inserts: Google, node. js, Crockford
Don't use expect: NPM in some cases
No comments: jQuery, Idiomatic omatic

1.5 annotations

Follow the JSDoc conventions: Google, Idiomatic
No comments: NPM, node. js, jQuery, Crockford

1.6 the quotation marks

Recommended single quotes: Google, node. js
Double quotes: jQuery
No comments: NPM, Idiomatic, Crockford

1.7 variable declaration

Declare one at a time, without the comma: node. js

var foo =  " ;

var bar =  " ;

Declare more than one line at a time, separated by commas at the end of the line: Idiomatic, jQuery

var foo =  "" ,

bar =  "" ,

quux;

Use the comma: NPM at the beginning of the line
No comments: Google, Crockford

1.8 braces

Use the open curly brace on the same line: Google, NPM, node. js, Idiomatic, jQuery, Crockford

function thisIsBlock(){

The NPM guidelines state that braces are used only when the code block needs to contain the next line, otherwise they are not used.

1.9 global variables

Don't use global variables: Google, Crockford (Google) indicates that global variable name conflicts are difficult to debug and can cause some tricky problems when two projects are being integrated. In order to facilitate the sharing of common JavaScript code, conventions need to be made to avoid conflicts. Crockford believes that implicit global variables should not be used.

No comments: Idiomatic, jQuery, NPM, node. js

2 naming style

2.1 variable naming

The first word is lowercase, and all words after that are capitalized: Google, NPM, node. js, Idiomatic

var foo =  "" ;

var fooName =  "" ;

2.2 constant naming

Use capital letters: Google, NPM, node. js

var CONS =  ' VALUE';

No comments: jQuery, Idiomatic omatic, Crockford

2.3 function naming

The first word is lowercase, and all words after that are capitalized (camel case) : Google, NPM, Idiomatic, node. js (long, descriptive function names are recommended)

function veryLongOperationName

function short()..

Function naming in keyword form:

function isReady()

function setName()

function getName()

No comments: jQuery, Crockford

2.4 array naming

Use the plural form: Idiomatic

var documents = [];

No comments: Google, jQuery, NPM, node. js, Crockford

2.5 object and class naming

Use the following forms: Google, NPM, node. js

var ThisIsObject = new Date;

No comments: jQuery, Idiomatic omatic, Crockford

2.6 other naming

Use the all-lower-hyphen-css-case form: NPM for long file names and configuration keys

3. Configure the.jshintrc file according to the above style

JSHint ((link: http://www.jshint.com/)) is a JavaScript syntax and style checker that you can use to alert code to style-related issues. It is well integrated into many commonly used editors and is a great tool for unifying team coding styles.

You can see the available options: by JSHint document (link: http://www.jshint.com/docs/#options)
Now create a.jshintrc file based on the first style under each of the above categories. You can put it in the root directory of the project, and the jshint-avare code editor will follow it to unify all the code styles in the project.

{

  "camelcase" : true,

  "indent": 2,

  "undef": true,

  "quotmark": single,

  "maxlen": 80,

  "trailing": true,

  "curly": true

}

In addition, you should add the following header to your JavaScript file:

In the node. js file you should add:

You can also add the following declarations to various JavaScript files:

 ' use strict';

This will affect JSHint and your JavaScript engine, which may not be as compatible, but JavaScript will run faster.

4. Automatically executes JSHint before committing Git

If you want to make sure that all of your JS code is in the same style as defined in.jshintrc, you can add the following to your.git/hooks/pre-commit file to automatically perform style checks when you try to commit any new files to the project.

#!/bin/bash

# Pre-commit Git hook to run JSHint on JavaScript files.

#

# If you absolutely must commit without testing,

# use: git commit --no-verify
filenames=($(git diff --cached --name-only HEAD))
which jshint &> /dev/null

if [ $? -ne 0 ];

then

  echo "error: jshint not found"

  echo "install with: sudo npm install -g jshint"

  exit 1

fi
for i in "${filenames[@]}"

do

    if [[ $i =~ .js$ ]];

    then

        echo jshint $i

        jshint $i

        if [ $? -ne 0 ];

        then

            exit 1

        fi

    fi

done