現在人気の JavaScript コード スタイル ガイド_JavaScript のヒント

JavaScript には正式なコーディング スタイル ガイドがありません。代わりに、次のような一般的なコーディング スタイルがあります。

コードをコピー コードは次のとおりです:

Google の JavaScript スタイルガイド (以下、Google)

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml NPMコーディングスタイル（以下、NPM）

https://npmjs.org/doc/coding-style.html Felix の Node.js スタイル ガイド (以下、Node.js)

http://nodeguide.com/style.html Idiomatic JavaScript (以下、Idiomatic と呼びます)

https://github.com/rwldrn/idiomatic.js/ jQuery JavaScript スタイルガイド (以下、jQuery)

http://contribute.jquery.org/style-guide/js/ Douglas Crockford (以下、Crockford と呼びます) による JavaScript スタイル ガイド。Douglas Crockford は、Web 開発の分野で最もよく知られた技術権威の 1 人であり、ECMA JavaScript 2.0 標準化委員会のメンバーです

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

もちろん、JavaScript 構文チェッカー JSLint および JSHint にもいくつかのデフォルト設定の選択肢があります。問題は、ほとんどの開発者が従うことができる究極の JavaScript コーディング スタイルとは何でしょうか?これら 6 つのスタイル ガイドからいくつかのコンセンサス スタイルを見つけてみましょう。

1. コードスタイルの比較

1.1 インデント

スペース 2 つ、インデントなし、タブ インデントなし: Google、NPM、Node.js、Idiomatic

タブインデント: jQuery
4 スペース: クロックフォード

1.2 パラメータと式の間のスペース

コンパクトなスタイルを使用する: Google、NPM、Node.js

コードをコピー コードは次のとおりです。

project.MyClass = function(arg1, arg2) {

スペースの過剰な使用: 慣用的、jQuery

コードをコピー コードは次のとおりです:

for ( i = 0; i コメントはまだありません: クロックフォード
ほとんどのガイドラインでは、開発者はステートメントの末尾にスペースを入れないように注意されています。
1.3 コード行の長さ

最大 80 文字: Google、NPM、Node.js、Crockford (コード ブロック内の場合、2 つのスペース以外のインデントを使用すると、関数の引数を最初の関数の引数の位置に揃えることができます。別のオプションとして、インデントに 4 つのスペースを使用します。自動的にラッピング)

コメントはありません: jQuery、慣用句

1.4 セミコロン

常にセミコロンを使用し、暗黙的な挿入に依存しないでください: Google、Node.js、Crockford

特定の状況ではexpectを使用しないでください: NPM
コメントはありません: jQuery、慣用句

1.5 ノート

JSDoc の規則に従います: Google、Idiomatic

コメントはまだありません: NPM、Node.js、jQuery、Crockford

1.6 引用

推奨される一重引用符: Google、Node.js

二重引用符: jQuery
コメントはありません: NPM、慣用句、クロックフォード

1.7 変数宣言

カンマなしで一度に 1 つずつ宣言します: Node.js

コードをコピー コードは次のとおりです:

var foo = ”;
var bar = ”;

行末にカンマで区切って複数を一度に宣言: Idiomatic、jQuery

コードをコピー コードは次のとおりです:

var foo = “”,
bar = “”,
くっ;

行の先頭にカンマを使用します: NPM
コメントはありません: Google、クロックフォード
1.8 中括弧

同じ行で左中括弧を使用します: Google、NPM、Node.js、Idiomatic、jQuery、Crockford

コードをコピー コードは次のとおりです:

function thisIsBlock(){

NPM ガイドラインでは、中括弧はコード ブロックに次の行を含める必要がある場合にのみ使用し、それ以外の場合は使用しないと規定されています。

1.9 グローバル変数

グローバル変数を使用しないでください: Google、Crockford (Google は、グローバル変数の名前の競合はデバッグが難しく、2 つのプロジェクトを統合するときに厄介な問題を引き起こす可能性があると述べています。共通の JavaScript コードの共有を容易にするために、競合を避けるためには規約を確立する必要があるとクロックフォード氏は考えています)

コメントはありません: 慣用的、jQuery、NPM、Node.js

2 命名スタイル

2.1 変数の名前付け

先頭の最初の単語は小文字で、後続のすべての単語の最初の文字は大文字になります: Google、NPM、Node.js、Idiomatic

コードをコピー コードは次のとおりです:

var foo = “”;
var fooName = “”;

2.2 定数の名前付け

大文字を使用してください: Google、NPM、Node.js

コードをコピー コードは次のとおりです:

var CONS = ‘VALUE’;

コメントはまだありません: jQuery、慣用句、Crockford

2.3 関数の名前付け

先頭の最初の単語は小文字で、後続のすべての単語の最初の文字は大文字になります (キャメルケース): Google、NPM、Idiomatic、Node.js (長くて説明的な関数名を使用することをお勧めします)

コードをコピー コードは次のとおりです:

関数 VeryLongOperationName
関数 short()..

キーワード形式での関数の名前付け:

コードをコピー コードは次のとおりです:

関数 isReady()
関数 setName()
関数 getName()

コメントはありません: jQuery, Crockford

2.4 配列の名前付け

複数形を使用します: 慣用的

コードをコピー コードは次のとおりです:

var文書 = [];

コメントはありません: Google、jQuery、NPM、Node.js、Crockford

2.5 オブジェクトとクラスの名前付け

次のフォームを使用します: Google、NPM、Node.js

コードをコピー コードは次のとおりです:

var ThisIsObject = 新しい日付;

コメントはまだありません: jQuery、慣用句、Crockford

2.6 その他の命名

長いファイル名と構成キーには、すべて小文字、ハイフン、CSS 形式を使用します: NPM

3. 上記のスタイルに従って .jshintrc ファイルを構成します

JSHint (http://www.jshint.com/) は、コード スタイル関連の問題を警告するために使用できる JavaScript 構文およびスタイル チェック ツールです。これは、一般的に使用される多くのエディターにうまく統合でき、チームのコーディング スタイルを統一するための優れたツールです。

利用可能なオプションは、JSHint ドキュメントで確認できます: http://www.jshint.com/docs/#options
次に、上記の各カテゴリの最初のスタイルに基づいて .jshintrc ファイルを作成します。これをプロジェクトのルート ディレクトリに置くと、JSHint-avare コード エディターがこれに従ってプロジェクト内のすべてのコード スタイルを統一します。

コードをコピー コードは次のとおりです:

{
"キャメルケース" : true、
「インデント」: 2、
"undef": true、
"引用符": シングル、
"maxlen": 80、
"末尾": true、
"カーリー": true
}

さらに、次のヘッダーを JavaScript ファイルに追加する必要があります:

コードをコピー コードは次のとおりです:

/* jshint ブラウザ:true、jquery:true */

Node.js ファイルに以下を追加する必要があります:

コードをコピー コードは次のとおりです:

/*jshint ノード:true */

次の宣言をさまざまな JavaScript ファイルに追加することもできます:

コードをコピー コードは次のとおりです:

'厳密な使用';

これは JSHint と JavaScript エンジンに影響し、互換性は低くなる可能性がありますが、JavaScript の実行は高速になります。

4. Git にコミットする前に JSHint を自動的に実行します

すべての JS コードが .jshintrc で定義されたスタイルと一致していることを確認したい場合は、新しい変更をコミットしようとするときに、次のコンテンツを .git/hooks/pre-commit ファイルに追加できます。スタイル チェックはファイルがプロジェクトに追加されるときに自動的に実行されます。

コードをコピーします コードは次のとおりです:

#!/bin/bash
# JavaScript ファイルで JSHint を実行するための Git フックを事前にコミットします。
#
# どうしてもテストせずにコミットする必要がある場合は、
# 使用: git commit --no-verify

ファイル名=($(git diff --cached --name-only HEAD))

どの jshint &> /dev/null
if [ $? -ne 0 ];
それから
echo "エラー: jshint が見つかりません"
echo "インストール方法: sudo npm install -g jshint"
1番出口
ふぃ

「${filenames[@]}」の私用
する
If [[ $i =~ .js$ ]];
それでは
echo jshint $i
jshint $i
if [ $? -ne 0 ];
それから
1番出口
フィ
ふぃ
完了