[Eslint] single quotes가 필요한 이유

JS로 개발하는 대부분의 개발자는 Eslint를 사용할 것이다.

많은 분들이 알고 있겠지만, Eslint에는 single quote(단일 인용부호) 옵션이 있다.

이 옵션이 왜 필요할까?

// .eslintrc
{
  "rules": {
    "quotes": ["error", "single"]
  }
}

이 설정에 따르면 ESLint는 문자열 리터럴에 단일 인용부호(single quotes)를 사용하도록 강제하며,

만약 개발자가 이중 인용부호(double quotes)를 사용하면 ESLint에서 오류를 발생킨다.

---

singlequote가 필요한 이유

ESLint에서 singlequote 규칙을 사용하는 주된 이유는 코드의 일관성과 가독성을 향상시키기 위해서이다.

JavaScript에서는 문자열을 표현할 때 작은따옴표(')와 큰따옴표(")를 모두 사용할 수 있다.

그러나 프로젝트 전체에서 일관된 스타일을 유지하는 것이 중요하다.

singlequote 규칙을 사용하면 다음과 같은 이점이 있다:

1. 코드 스타일의 일관성: 모든 개발자가 동일한 따옴표 스타일을 사용하게 되어 코드베이스 전체의 일관성이 향상된다.
2. 가독성 향상: 일관된 스타일은 코드를 더 쉽게 읽고 이해할 수 있게 해준다.
3. 타이핑 효율: 작은따옴표는 대부분의 키보드에서 Shift 키를 누르지 않고 입력할 수 있어 더 효율적이다.
4. JSON과의 호환성: JSON은 큰따옴표만을 사용하므로, JavaScript에서 작은따옴표를 사용하면 JSON 데이터와 구분하기 쉽다.

필요성

다음은 singlequote 규칙의 필요성을 보여주는 복잡한 예시 코드이다

const complexObject = {
  "firstName": 'John',
  'lastName': "Doe",
  "age": 30,
  'address': {
    "street": '123 Main St',
    'city': "Anytown",
    "country": 'USA'
  },
  "hobbies": ['reading', "cycling", 'swimming'],
  'greet': function() {
    return "Hello, " + this.firstName + ' ' + this.lastName + "!";
  },
  "description": 'A "software developer" with \'various\' interests'
};

function processData(data) {
  let result = "";
  for (let key in data) {
    if (typeof data[key] === 'object' && !Array.isArray(data[key])) {
      result += `${key}: ${JSON.stringify(processData(data[key]))}\n`;
    } else if (Array.isArray(data[key])) {
      result += `${key}: [${data[key].map(item => `'${item}'`).join(", ")}]\n`;
    } else if (typeof data[key] === "function") {
      result += `${key}: ${data[key]()}\n`;
    } else {
      result += `${key}: "${data[key]}"\n`;
    }
  }
  return result;
}

console.log(processData(complexObject));

위 코드에서는 작은따옴표와 큰따옴표가 일관성 없이 혼용되고 있으며, 코드의 가독성을 떨어뜨리고, 유지보수를 어렵게 만듭니다. singlequote 규칙을 적용하면 이러한 문제를 해결할 수 있다.

주의할점

singlequote 규칙을 사용할 때 주의해야 할 점들이 있다:

 

• 문자열 내 따옴표 사용: 문자열 내에 작은따옴표가 포함되어 있을 경우, 이스케이프 처리나 템플릿 리터럴 사용을 고려해야 한다.

// 잘못된 사용 
const str = 'It's a beautiful day'; 

// 올바른 사용 
const str1 = 'It\'s a beautiful day'; 
const str2 = `It's a b1eautiful day`;

• JSON 데이터 처리: JSON 데이터를 다룰 때는 큰따옴표를 사용해야 한다. JSON.parse() 메서드를 사용할 때 주의가 필요하다.

// 올바른 JSON 문자열 
const jsonStr = '{"name": "John", "age": 30}'; 
const obj = JSON.parse(jsonStr);

• 템플릿 리터럴과의 혼용: 템플릿 리터럴을 사용할 때는 백틱(`)을 사용해야 합니다. singlequote 규칙과 혼동하지 않도록 주의해야 한다.

const name = 'John'; 
const greeting = `Hello, ${name}!`;

• 다른 팀 멤버들과의 합의: 프로젝트에 singlequote 규칙을 도입할 때는 팀 전체의 동의가 필요하다. 일부 개발자들은 다른 스타일에 익숙할 수 있으므로, 팀 내 논의가 필요할 수 있다.