현재 인기 있는 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
관용적 JavaScript(이하 관용적)
https://github.com/rwldrn/idiomatic.js/
jQuery JavaScript 스타일 가이드(이하 jQuery)
http://contribute.jquery.org/style-guide/js/
Douglas Crockford(이하 Crockford)의 JavaScript 스타일 가이드, Douglas Crockford는 웹 개발 분야에서 가장 유명한 기술 권위자 중 한 명이며 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칸: Crockford

1.2 매개변수와 표현식 사이의 공백

간단한 스타일 사용: Google, NPM, Node.js

코드 복사 코드는 다음과 같습니다.

project.MyClass = function(arg1, arg2) {

과도한 공백 사용: Idiomatic, jQuery

코드 복사 코드는 다음과 같습니다.

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

아직 코멘트가 없습니다: Crockford
대부분의 지침에서는 개발자에게 명령문 끝에 공백을 두지 말 것을 상기시킵니다.

1.3 코드 줄 길이

최대 80자: Google, NPM, Node.js, Crockford(코드 블록 내에서 공백 2개 이외의 들여쓰기를 사용하면 함수 인수를 첫 번째 함수 인수 위치에 정렬할 수 있습니다. 또 다른 옵션 들여쓰기에는 공백 4개를 사용하세요. 자동 포장)
남은 댓글 없음: jQuery, Idiomatic

1.4 세미콜론

항상 세미콜론을 사용하고 암시적 삽입에 의존하지 마세요: Google, Node.js, Crockford
특정 상황에서는 Expect를 사용하지 마세요: NPM
남은 댓글 없음: jQuery, Idiomatic

1.5노트

JSDoc 규칙을 따르세요: Google, Idiomatic
남은 댓글 없음: NPM, Node.js, jQuery, Crockford

1.6 명언

권장 작은따옴표: Google, Node.js
큰따옴표: jQuery
코멘트 없음: NPM, Idiomatic, Crockford

1.7 변수 선언

쉼표 없이 한 번에 하나씩 선언: Node.js

코드 복사 코드는 다음과 같습니다.

var foo = ";
var 바 = ";

여러 개를 한 번에 선언하고 줄 끝을 쉼표로 구분하여 선언합니다: Idiomatic, jQuery

코드 복사 코드는 다음과 같습니다.

var foo = “”,
바 = “”,
quux;

줄 시작 부분에 쉼표 사용: NPM
코멘트 없음: Google, Crockford

1.8 교정기

같은 줄에 여는 중괄호 사용: Google, NPM, Node.js, Idiomatic, jQuery, Crockford

코드 복사 코드는 다음과 같습니다.

function thisIsBlock(){

NPM 지침에는 코드 블록에 다음 줄이 포함되어야 하는 경우에만 중괄호를 사용해야 하며 그렇지 않은 경우에는 사용하지 않아야 한다고 명시되어 있습니다.

1.9 전역 변수

전역 변수를 사용하지 마세요: Google, Crockford(Google에서는 전역 변수 명명 충돌이 디버그하기 어렵고 두 프로젝트가 통합될 때 몇 가지 귀찮은 문제가 발생할 수 있다고 말했습니다. 공통 JavaScript 코드 공유를 용이하게 하기 위해, 충돌을 피하기 위해 규칙을 수립해야 합니다. Crockford는 암시적 전역 변수를 사용해서는 안 된다고 생각합니다.

댓글 없음: Idiomatic, 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, Idiomatic, Crockford

2.3 함수 명명

첫 번째 단어는 소문자로 시작하고 이후 단어의 첫 글자는 모두 대문자로 표시합니다(카멜 표기법): Google, NPM, Idiomatic, Node.js(길고 설명적인 함수 이름을 사용하는 것이 좋습니다)

코드 복사 코드는 다음과 같습니다.

매우LongOperationName 함수
함수 short()..

키워드 형식의 함수 이름 지정:

코드 복사 코드는 다음과 같습니다.

함수 isReady()
함수 setName()
함수 getName()

코멘트 없음: jQuery, Crockford

2.4 어레이 명명

복수형 사용: 관용어

코드 복사 코드는 다음과 같습니다.

var document = [];

댓글 없음: Google, jQuery, NPM, Node.js, Crockford

2.5 객체 및 클래스 명명

다음 형식을 사용하세요: Google, NPM, Node.js

코드 복사 코드는 다음과 같습니다.

var ThisIsObject = 새 날짜;

남은 댓글이 없습니다: jQuery, Idiomatic, Crockford

2.6 기타 명칭

긴 파일 이름과 구성 키에는 모두 소문자 하이픈-css-case 형식을 사용하세요: NPM

3. 위 스타일에 맞게 .jshintrc 파일을 구성합니다

JSHint(http://www.jshint.com/)는 코드 스타일 관련 문제를 경고하는 데 사용할 수 있는 JavaScript 구문 및 스타일 검사 도구입니다. 일반적으로 사용되는 여러 편집기에 잘 통합될 수 있으며 팀의 코딩 스타일을 통합하는 훌륭한 도구입니다.

JSHint 문서를 통해 사용 가능한 옵션을 볼 수 있습니다: http://www.jshint.com/docs/#options
다음으로, 위의 각 카테고리 아래 첫 번째 스타일을 기반으로 .jshintrc 파일을 만듭니다. 이를 프로젝트의 루트 디렉터리에 넣으면 JSHint-avare 코드 편집기가 이를 따라 프로젝트의 모든 코드 스타일을 통합합니다.

코드 복사 코드는 다음과 같습니다.

{
"camelcase": 사실,
"들여쓰기": 2,
"undef": 사실,
"quotmark": 단일,
"maxlen": 80,
"후행": 사실,
"곱슬머리": 사실
}

또한 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[@]}"에 있는 나의 경우
하세요
만약 [[ $i =~ .js$ ]];
그럼
echo jshint $i
         jshint $i
           if [ $? -ne 0 ];
        그 다음
1번출구
       fi
안녕
완료