Popular JavaScript code styles _ javascript skills

This article mainly introduces the popular JavaScript code style guide and recommends a style check tool jshint, which can work with most editors to unify the team's code style, if you need it, you can refer to JavaScript without an authoritative coding style guide and replace it with some popular coding styles:

The Code is as follows:

Google's JavaScript Style Guide (Google for short)
Http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
NPM encoding 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 JavaScript (Idiomatic)
Https://github.com/rwldrn/idiomatic.js/
JQuery JavaScript Style Guide (jQuery)
Http://contribute.jquery.org/style-guide/js/
Douglas Crockford's JavaScript Style Guide (Crockford), one of the most well-known technical authorities in the Web development field, is a member of The ECMA JavaScript 2.0 Standardization Committee.
Http://javascript.crockford.com/code.html

Of course, there are some default settings in the JavaScript syntax checker JSLint and JSHint. The question is, what is the ultimate JavaScript coding style that most developers can follow? Next, let's find some consensus styles from these six style guides.

1. Code style comparison

1.1 indent

Two spaces, no longer indentation, no Tab indentation: Google, NPM, Node. js, Idiomatic
Tab indent: jQuery
Four spaces: Crockford

1.2 space between parameters and expressions

Compact style: Google, NPM, Node. js

The Code is as follows:

Project. MyClass = function (arg1, arg2 ){

Excessive space usage: Idiomatic, jQuery

The Code is as follows:

For (I = 0; I <length; I ++ ){

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

1.3 code line length

A maximum of 80 characters are supported: Google, NPM, and Node. js and Crockford (when a code block contains two spaces, the indentation allows you to align the function parameter with the position of the first function parameter. Another option is to use four spaces for indentation when auto-changing rows, rather than two .)
No Comments: jQuery, Idiomatic

1.4 semicolon

Always use semicolons instead of implicit insertion: Google, Node. js, Crockford
In some cases, do not use reverse CT: NPM
No Comments: jQuery, Idiomatic

1.5 annotations

Follow the JSDoc Conventions: Google, Idiomatic
No Comments: NPM, Node. js, jQuery, Crockford

1.6 quotation marks

Single quotes: Google, Node. js
Double quotation marks: jQuery
No Comments: NPM, Idiomatic, Crockford

1.7 variable Declaration

Declare one statement at a time without a comma: Node. js

The Code is as follows:

Var foo = ";
Var bar = ";

Multiple declarations at a time, separated by commas (,) at the end of a row: Idiomatic, jQuery

The Code is as follows:

Var foo = "",
Bar = "",
Quux;

Use a comma at the beginning of the row: NPM
No Comments: Google, Crockford

1.8 braces

The left braces are used in the same line: Google, NPM, Node. js, Idiomatic, jQuery, and Crockford.

The Code is as follows:

Function thisIsBlock (){

The NPM guide indicates that braces are used only when the code block must contain the next line. Otherwise, braces are not used.

1.9 global variables

Do not use global variables: Google, Crockford (Google said, global variable naming conflicts are difficult to debug, and there may be some tricky issues when the two projects are being integrated. To facilitate sharing of common JavaScript code, a Convention is required 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 at the beginning is lowercase, and the first letter of all subsequent words is uppercase: Google, NPM, Node. js, Idiomatic

The Code is as follows:

Var foo = "";
Var fooName = "";

2.2 constant name

Use uppercase letters: Google, NPM, Node. js

The Code is as follows:

Var CONS = 'value ';

No Comments: jQuery, Idiomatic, Crockford

2.3 function name

The first word at the beginning is in lower case, and the first letter of all subsequent words is in upper case (hump type): Google, NPM, Idiomatic, Node. js (long and descriptive function names are recommended)

The Code is as follows:

Function veryLongOperationName
Function short ()..

Keyword-based function naming:

The Code is as follows:

Function isReady ()
Function setName ()
Function getName ()

No Comments: jQuery, Crockford

2.4 array naming

Use the plural form: Idiomatic

The Code is as follows:

Var documents = [];

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

2.5 object and class naming

Use the following methods: Google, NPM, and Node. js

The Code is as follows:

Var ThisIsObject = new Date;

No Comments: jQuery, Idiomatic, Crockford

2.6 other names

Use the all-lower-hyphen-css-case format 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 syntax and style check tool that you can use to remind code style-related issues. It can be well integrated into many common editors and is a good tool for Unified Team coding style.

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

The Code is as follows:

{
"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:

The Code is as follows:

/* Jshint browser: true, jquery: true */

In the Node. js file, you should add:

The Code is as follows:

/* Jshint node: true */

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

The Code is as follows:

'Use strict ';

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

4. automatically execute JSHint before committing Git

If you want to ensure that all JS Code and. the style defined in jshintrc is consistent. You can add the following content to your. in the git/hooks/pre-commit file, style check is automatically executed when you try to submit any new files to the project.

The Code is 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 [@]}"
Do
If [[$ I = ~ \. Js $];
Then
Echo jshint $ I
Jshint $ I
If [$? -Ne 0];
Then
Exit 1
Fi
Fi
Done