The current popular JavaScript code style guide _javascript Tips

JavaScript does not have an authoritative coding style guide and replaces some of the popular coding styles:

Copy Code code as follows:

Google's 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's 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 (hereafter referred to as jquery)
http://contribute.jquery.org/style-guide/js/
Douglas Crockford's JavaScript style Guide (hereinafter referred to as Crockford), Douglas Crockford is one of the most renowned technical authorities in the field of web development, ECMA JavaScript 2.0 Standardization Committee member
Http://javascript.crockford.com/code.html

Of course, there are also default setting selections in the JavaScript grammar checker 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 these 6 style guides to find a consensus style.

1. Code Style Comparison

1.1 Indent

Two spaces, no longer indentation, no tab indentation: Google, NPM, Node.js, idiomatic
Tab indent: JQuery
4 Spaces: Crockford

1.2 Spaces between parameters and expressions

Use compact style: Google, NPM, Node.js

Copy Code code as follows:

Project. MyClass = function (Arg1, arg2) {

Excessive use of spaces: idiomatic, jQuery

Copy Code code as follows:

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

No comments made: Crockford
In most guides, developers are reminded not to have any spaces at the end of the statement.

1.3 Code line length

Up to 80 characters: Google, NPM, Node.js, Crockford (when in a block of code, in addition to 2 empty extra indents allow the function parameter to be aligned with the position of the first function parameter). Another option is to indent with 4 spaces instead of 2 when the line is automatically wrapped. ）
No comment: jQuery, idiomatic

1.4 Semicolon

Always use semicolons and do not rely on implicit inserts: Google, Node.js, Crockford
Do not use EXPECT:NPM in some cases
No comment: jQuery, idiomatic

1.5 Notes

Follow JSDoc convention: Google, idiomatic
No comment: NPM, Node.js, JQuery, Crockford

1.6 Quotes

Recommended single quotes: Google, Node.js
Double quotes: JQuery
No comment: NPM, idiomatic, Crockford

1.7 Variable Declaration

Declare one at a time, do not use commas: node.js

Copy Code code as follows:

var foo = ";
var bar = ";

Declare multiple at once, separated by commas at the end of a line: idiomatic, JQuery

Copy Code code as follows:

var foo = "",
Bar = "",
Quux;

Use commas at the beginning of a row: NPM
No comment: Google, Crockford

1.8 Curly Braces

Use opening braces on the same line: Google, NPM, Node.js, idiomatic, JQuery, Crockford

Copy Code code as follows:

function Thisisblock () {

The NPM guide indicates that curly braces are used only when the code block needs to contain the next line, otherwise it is not used.

1.9 Global Variables

Do not use global variables: Google, Crockford (Google says that global variable naming conflicts are difficult to debug and may have some tricky problems when two projects are being consolidated.) To facilitate sharing of common JavaScript code, conventions are needed to avoid conflicts. Crockford that an implicit global variable should not be used. ）

No comment: idiomatic, jQuery, NPM, Node.js

2 naming style

2.1 Variable naming

Start with the first word lowercase, and then capitalize all the first words: Google, NPM, Node.js, idiomatic

Copy Code code as follows:

var foo = "";
var fooname = "";

2.2 Constant naming

Using uppercase letters: Google, NPM, Node.js

Copy Code code as follows:

var CONS = ' VALUE ';

No comment: jQuery, idiomatic, Crockford

2.3 Function naming

Start with the first word lowercase, all the words after the first letter (hump): Google, NPM, idiomatic, Node.js (recommended to use long, descriptive function name)

Copy Code code as follows:

function Verylongoperationname
function short ().

Function name in the form of a keyword:

Copy Code code as follows:

function IsReady ()
function SetName ()
function GetName ()

No comment: JQuery, Crockford

2.4 Array naming

Use the plural form: idiomatic

Copy Code code as follows:

var documents = [];

No comment: Google, jQuery, NPM, Node.js, Crockford

2.5 Object and Class naming

Use the following form: Google, NPM, Node.js

Copy Code code as follows:

var thisisobject = new Date;

No comment: jQuery, idiomatic, Crockford

2.6 Other names

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

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

Jshint (http://www.jshint.com/) is a JavaScript grammar and style checker that you can use to alert code-style related issues. It can be well integrated into many commonly used editors and is a good tool for unifying the team's coding style.

You can view the available options through the Jshint document: http://www.jshint.com/docs/#options
The following article creates a. jshintrc file based on the first style under each of these categories. You can put it in the root directory of your project, and the Jshint-avare Code Editor will follow it to unify all the code styles in the project.

Copy Code code as follows:

{
"CamelCase": true,
"Indent": 2,
"Undef": true,
"Quotmark": Single,
"MaxLen": 80,
"Trailing": true,
' Curly ': true
}

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

Copy Code code as follows:

* * Jshint browser:true, Jquery:true *

In the Node.js file you should add:

Copy Code code as follows:

/*jshint node:true * *

You can also add the following declaration in a variety of JavaScript files:

Copy Code code as follows:

' Use strict ';

This will affect Jshint and your JavaScript engine, which may be less compatible, but JavaScript will run faster.

4. Automate the execution of Jshint before submitting Git

If you want to make sure that all of the JS code is consistent with the style defined in the. JSHINTRC, you can add the following to your. git/hooks/pre-commit file and automatically perform a style check when you try to submit any newly modified files to the project.

Copy Code code as follows:

#!/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[@]}"
Todo
if [[$i =~ \.js$]];
Then
Echo Jshint $i
Jshint $i
If [$?-ne 0];
Then
Exit 1
Fi
Fi
Done