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:
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:
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:
You can also add the following declaration in a variety of JavaScript files:
Copy Code code as follows:
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