우리의 코드는 가능한 한 깨끗하고 읽기 쉬워야합니다.복잡한 작업을 수행하고 정확하고 사람이 읽을 수있는 방식으로 코딩하는 것이 실제로 프로그래밍의 예술입니다. 좋은 코드 스타일은 크게 도움이됩니다.

Syntax

여기에 속임수 시트와 함께 몇 가지 제안된 규칙(자세한 내용은 아래 참조):

이제의 논의 규정 및 그 이유에서 세부 사항입니다.

중괄호

에서 대부분의 자바스크립트는 프로젝트 중괄호로 작성된”이집트”스타일로 여는 중괄호와 같은 줄에 해당 키워드가 아닌 새로운 라인입니다. 또한 있어야의 공간 앞에 열기 브래킷은 다음과 같습니다.

if (condition) { // do this // ...and that // ...and that}

단일 온라인 건설,같은if (condition) doSomething(),중요한 경우 가장자리. 우리는 중괄호를 전혀 사용해야합니까?

여기에 주석을 추가 개렇게 판단할 수 있습니다 그들의 가독성:자신을 위해

아주 간단한 코드,하나는 라인이 허용되는 예를 들어if (cond) return null. 그러나 코드 블록(마지막 변형)은 일반적으로 더 읽기 쉽습니다.

줄 길이

아무도 긴 가로 줄의 코드를 읽는 것을 좋아하지 않습니다. 그것들을 나누는 것이 최선의 방법입니다.예를 들어,if명령문

// backtick quotes ` allow to split the string into multiple lineslet str = ` ECMA International's TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript.`;

및if문:

if ( id === 123 && moonPhase === 'Waning Gibbous' && zodiacSign === 'Libra') { letTheSorceryBegin();}

의 최대 라인 길이 있어야 합의에 team-level. 보통 80 자 또는 120 자입니다.

들여 쓰기

두 가지 유형의 들여 쓰기가 있습니다.

• 수평 들여 쓰기:2 또는 4 공백.

  가로 들여 쓰기는 2 개 또는 4 개의 공백 또는 가로 탭 기호(키 탭)를 사용하여 수행됩니다. 어느 것을 선택해야하는지는 오래된 거룩한 전쟁입니다. 공백은 요즘 더 일반적입니다.

  탭보다 공백의 장점 중 하나는 공백이 탭 기호보다 들여 쓰기를 더 유연하게 구성 할 수 있다는 것입니다.

  예를 들어,우리가 맞출 수 있습니다 매개변수와 함께 개방 브래킷은 다음과 같습니다.

  show(parameters, aligned, // 5 spaces padding at the left one, after, another ) { // ...}

• 수직 들여쓰기:빈 줄을 나누기 위해 코드를 논리적으로 블록입니다.

  단일 함수조차도 종종 논리 블록으로 나눌 수 있습니다. 아래 예에서,이 변수의 초기화,이 메인 루프 반환하는 결과 세로로 분할:

  function pow(x, n) { let result = 1; // <-- for (let i = 0; i < n; i++) { result *= x; } // <-- return result;}

  삽입하여 추가 줄 바꿈 향상에 도움을 주는 역할을하는 코드를 확인합니다. 수직 들여 쓰기없이 9 줄 이상의 코드가 있어서는 안됩니다.

세미콜론

세미콜론은 건너 뛸 수 있더라도 각 명령문 뒤에 있어야합니다.

세미콜론이 진정으로 선택 사항이며 거의 사용되지 않는 언어가 있습니다. 자바 스크립트에서,하지만,줄 바꿈이 오류에 취약한 코드를 떠나,세미콜론으로 해석되지 않는 경우가 있습니다. 장 코드 구조에서 그에 대한 자세한 내용을 참조하십시오.

숙련 된 자바 스크립트 프로그래머라면 StandardJS 와 같은 세미콜론 코드 스타일을 선택할 수 있습니다. 그렇지 않으면 가능한 함정을 피하기 위해 세미콜론을 사용하는 것이 좋습니다. 대다수의 개발자는 세미콜론을 넣었습니다.

중첩 수준

중첩 코드가 너무 많은 수준을 피하십시오.

예를 들어,루프에서 그것은 때로는 좋은 아이디어를 사용하는continue지시어를 피하는 추가 중첩이 있습니다.

예를 들어,대신 추가 중첩된if조건 like this:

for (let i = 0; i < 10; i++) { if (cond) { ... // <- one more nesting level }}

작성할 수 있습니다:

for (let i = 0; i < 10; i++) { if (!cond) continue; ... // <- no extra nesting level}

비슷한 일을 할 수 있으로if/elsereturn.

예를 들어 아래의 두 구조는 동일합니다.

옵션 1:

function pow(x, n) { if (n < 0) { alert("Negative 'n' not supported"); } else { let result = 1; for (let i = 0; i < n; i++) { result *= x; } return result; }}

옵션 2:

function pow(x, n) { if (n < 0) { alert("Negative 'n' not supported"); return; } let result = 1; for (let i = 0; i < n; i++) { result *= x; } return result;}

두 번째는 읽기 쉽기 때문에”특별한 경우”n < 0처리합니다. 검사가 완료되면 추가 중첩이 필요없이”주”코드 흐름으로 이동할 수 있습니다.

기능을 배치

작성하는 경우 여러 가지”helper”기능과 코드를 사용하는 방법은 세 가지가 있을 구성하는 기능입니다.대부분의 경우 두 번째 변형이 선호됩니다.왜냐하면 코드를 읽을 때 먼저 그것이하는 일을 알고 싶어하기 때문입니다. 코드가 먼저 진행되면 처음부터 명확 해집니다. 그런 다음 어쩌면 우리는 할 필요가 없을 읽는 기능 모두에서,특히 그들의 이름은 설명하는 것의 그들은 실제로는 않습니다.

스타일 가이드

스타일 가이드에 포함된 일반 규칙”에 대해 작성하는 방법”코드는,예를 들어,는 따옴표는 방법을 사용하는 많은 공간을 들여쓰기에,최대 라인 길이,등등. 사소한 것들이 많이 있습니다.팀의 모든 구성원이 동일한 스타일 가이드를 사용하면 어떤 팀 구성원이 작성했는지에 관계없이 코드가 균일하게 보입니다.

물론 팀은 항상 자신의 스타일 가이드를 작성할 수 있지만 일반적으로 그럴 필요는 없습니다. 선택할 수있는 기존 가이드가 많이 있습니다.

몇 가지 인기있는 선택:

• 구글 자바 스크립트 스타일 가이드
• 에어비앤비 JavaScript 스타일 가이드
• 숙.JS
• StandardJS
• (플러스 더 많은)

경우에 당신이 있어 초보자 개발을 시작으로 치트 시트의 시작 부분에서 이 장이다. 그런 다음 다른 스타일 가이드를 탐색하여 더 많은 아이디어를 선택하고 가장 좋아하는 것을 결정할 수 있습니다.

자동 린터

린터는 코드의 스타일을 자동으로 확인하고 개선 제안을 할 수있는 도구입니다.

좋은 것은 그들에 대해는 스타일을 확인할 수 있습 또한 일부 버그,다음과 같 오타 변수에는 함수 이름. 이 기능으로 인해 하나의 특정”코드 스타일”을 고수하고 싶지 않더라도 린터를 사용하는 것이 좋습니다.

다음은 잘 알려진 linting 도구입니다.

• JSLint–첫 번째 linters 중 하나입니다.
• JSHint-JSLint 보다 더 많은 설정.
• ESLint-아마도 가장 새로운 것입니다.

그들 모두는 일을 할 수 있습니다. 저자는 ESLint 를 사용합니다.

대부분의 린터는 많은 인기있는 편집자와 통합되어 있습니다: 편집기에서 플러그인을 활성화하고 스타일을 구성하기 만하면됩니다.

예를 들어 ESLint 의 경우 다음을 수행해야합니다.

1. 설치 노드.js 입니다.
2. npm install -g eslint명령으로 ESLint 를 설치하십시오(Npm 은 JavaScript 패키지 설치 프로그램입니다).
3. JavaScript 프로젝트의 루트(모든 파일이 포함 된 폴더에 있음)에.eslintrc라는 구성 파일을 만듭니다.
4. ESLint 와 통합되는 편집기의 플러그인을 설치/활성화하십시오. 편집자의 대다수는 하나를 가지고 있습니다.

다음은.eslintrc파일의 예입니다:

{ "extends": "eslint:recommended", "env": { "browser": true, "node": true, "es6": true }, "rules": { "no-console": 0, "indent": 2 }}

여기에 이 지시어는"extends"을 나타내는 구성에 따라”eslint:을 권장”설정의 설정입니다. 그 후,우리는 우리 자신을 지정합니다.

웹에서 스타일 규칙 세트를 다운로드하고 대신 확장 할 수도 있습니다. 설치에 대한 자세한 내용은http://eslint.org/docs/user-guide/getting-started를 참조하십시오.

또한 특정 Ide 에는 linting 이 내장되어있어 편리하지만 ESLint 만큼 사용자 정의 할 수 없습니다.

요약

모든 구문 설명하는 규칙은 이 장에서(그리고 스타일 가이드 참조)가 증가하는 것을 목표로 하고 있습니의 가독성을 높이 당신의 코드입니다. 그들 모두는 논쟁의 여지가 있습니다.

우리가 생각할 때 쓰기에 대하여”좋은”코드,질문에 우리는 스스로에게 물어 봐야는 다음과 같습니다:”어떤게 만든 코드 더 쉽게 읽고 이해하십니까?”그리고”오류를 피하는 데 도움이되는 것은 무엇입니까?”이것들은 코드 스타일을 선택하고 토론 할 때 명심해야 할 주요 사항입니다.

독 인기 있는 스타일 가이드를 할 수 있도록 최신 상태로 유지와 함께 최신의 아이디어에 대한 코드 스타일 트렌드 및 모범 사례를 확인할 수 있습니다.