소개 JavaScript 코드 가이드라인

소개

이 튜토리얼에서는 내가 구조화하는 방법과 프로젝트에 대한 JavaScript 코드를 구조화하고 형식화하는 방법에 대해 배웁니다.

1. 세미콜론

선택은 모든 세미콜론 사용을 삭제하는 것입니다. 왜냐하면 적은 이점을 위해 너무 많은 타이핑을 추가하고 코드베이스를 '못생기고' 어수선하게 보이게 만들기 때문입니다. 세미콜론에 대한 두 번째 선택은 기존 프로젝트에서 일관성을 유지하기 위해 사용하는 경우 세미콜론을 고수하는 것입니다.

JavaScript는 Java 또는 C 및 C++에서와 같이 명시적으로 세미콜론을 요구하지 않습니다. 그러나 어떤 이유로 다음을 수행하는 경우 문제가 발생할 수 있습니다.

const addition = (a, b) => {
  let sum = a + b
  return // will return undefined due to automatic semicolon insertion
  sum // value will be ignored
}

2. 작은따옴표와 큰따옴표

일반 문자열에 대한 작은따옴표 및 HTML 및 JSX 에 대한 큰따옴표. 문자열 템플릿에서 보간을 사용해야 하는 경우 backticks를 사용합니다. 템플릿 리터럴은 문자열 보간을 수행하는 강력한 방법을 제공하며 사용법은 위의 사소한 예에 국한되지 않습니다.

// this:
console.log('App running on PORT' + PORT )
// becomes:
console.log(`App is running on PORT ${PORT}`)
// or better still:
const apiEndpoint = `http://api.awsomeness.com/v1/api_key=${API_KEY}/`
// instead of 
const apiEndpoint = 'http://api.awsomeness.com/v1/api_key='+API_KEY+'/'

3. 들여쓰기

탭 위의 공백. 두 칸의 탭 크기로 가독성이 향상됩니다.

4. 구조

모든 문은 해당 줄에 들어가고 모든 관련 블록은 함께 그룹화되고 빈 줄로 구분되어 가독성을 높이고 코드의 논리 블록을 함께 그룹화합니다.

5. 변수 명명 및 명명 규칙

변수 및 함수 이름과 대문자로 클래스 이름을 시작하려면 PascalCase(이 경우 lowerPascalCase)를 사용하십시오. 이 규칙은 다음 스타일을 따릅니다.

lowerPascalCase - 변수 이름의 첫 글자는 소문자로, 앞 단어는 대문자로

const carModels = ['Nissan FB15']
const userId = 400
// versus
const user_id = 500 // meh

가장 좋은 방법은 코드의 의도를 한 눈에 명확하게 보여주는 설명이 포함된 함수 이름을 사용하는 것입니다.

요약

이것들은 내가 정기적으로 사용하는 기본 규칙이지만 대부분의 프로젝트에는 Prettier 포맷터 및 Eslint linter와 같은 플러그인의 도움을 받아 이러한 가이드를 기반으로 서식을 처리하는 인기 있는 가이드가 있습니다. Formatter는 linter가 임박한 버그를 포착하는 동안 코드 서식을 지정합니다. 이들 각각을 설정하는 것은 향후 문서에 따라 달라집니다.

MDN 문서에서 일반적인 규칙에 대해 자세히 읽어보십시오.

일부 인기 있는 스타일 가이드:

Airbnb

Idiomatic.js

Google JavaScript Style Guide

NPM "funny style"

스타일 가이드를 반드시 사용해야 하는 것은 아니지만 코드베이스 전체에서 일관성을 유지하는 것은 도움이 될 뿐만 아니라 6개월 또는 3년 후 코드베이스에서 작업할 다음 개발자에게 유용합니다.


이 문서가 도움이 되었나요? 내가 웹 개발에 관한 흥미로운 주제에 대해 트윗하는 Twitter에서 나를 팔로우하거나 naftalimurgor에서 웹 개발에 대한 더 많은 주제를 팔로우할 수 있습니다.