[javascript] 컨벤션에 어긋나는 코드에 대한 경고 방식 설정하기

05 Dec 2023

javascript

코드 컨벤션은 개발자들이 일관된 스타일과 규칙을 따르도록 도와주는 중요한 요소입니다. 이러한 컨벤션을 준수하지 않는 코드는 가독성이 떨어지고 유지보수가 어려워질 수 있습니다. 자바스크립트에서는 다양한 도구를 사용하여 컨벤션에 어긋나는 코드를 비롯한 잠재적인 문제를 식별하고 경고하는 방식을 설정할 수 있습니다.

ESLint와 Prettier를 사용한 코드 포맷팅

ESLint는 자바스크립트 코드의 정적 분석을 통해 잠재적인 문제를 찾아내는 도구입니다. 이를 통해 코드의 일관성과 가독성을 유지할 수 있습니다. Prettier는 코드 포맷팅 도구로 자동으로 코드를 정리하고 일관된 스타일을 적용해줍니다.

프로젝트의 루트 디렉토리에 .eslintrc.json 파일을 생성합니다.
다음과 같이 설정을 추가합니다:

{
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "semi": "error",
    "indent": ["error", 2],
    "quotes": ["error", "single"]
  }
}

위 설정은 세미콜론을 필수로 사용하고, 들여쓰기를 2칸으로 지정하며, 작은 따옴표를 사용하도록 설정한 예시입니다.

프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성합니다.
다음과 같이 설정을 추가합니다:

{
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true
}

위 설정은 세미콜론을 사용하고, 탭의 너비를 2칸으로 지정하며, 작은 따옴표를 사용하도록 설정한 예시입니다.

에디터 플러그인에 ESLint와 Prettier를 설치하고 설정에 맞게 동작하도록 설정합니다.

이렇게 설정된 ESLint와 Prettier를 사용하면 코드 작성 중에 실시간으로 컨벤션에 어긋나는 부분을 확인할 수 있으며, 자동으로 코드를 정리해줍니다.

Visual Studio Code에서의 확장기능 사용

Visual Studio Code에서는 ESLint와 Prettier와 같은 다양한 확장 기능을 활용하여 컨벤션에 어긋나는 코드에 대한 경고를 더욱 쉽게 설정할 수 있습니다.

Visual Studio Code에서 “ESLint” 및 “Prettier - Code formatter”라는 확장 기능을 설치합니다.
.eslintrc.json 파일과 .prettierrc 파일을 이전 단계에서 설정한 방법과 동일하게 프로젝트에 추가합니다.
Visual Studio Code의 “Settings”를 열고 “editor.formatOnSave” 옵션을 true로 설정합니다. 이렇게 하면 파일 저장시 자동으로 포맷팅이 적용됩니다.
Visual Studio Code의 “Settings”에서 “eslint.validate” 옵션을 다음과 같이 설정합니다:

"eslint.validate": [
    "javascript",
    "javascriptreact"
]

위 설정은 JavaScript와 JavaScript React 파일만을 검증할 것을 명시한 것입니다.

이제 Visual Studio Code에서 코드를 작성하면 컨벤션에 어긋나는 부분에 대해 경고가 표시됩니다. 또한 파일을 저장할 때 자동으로 코드 포맷팅이 되어 일관된 스타일을 유지할 수 있습니다.

위에서 설명한 방법들은 자바스크립트에서 기본적인 컨벤션에 대한 경고를 설정하는 방법입니다. 더욱 복잡한 규칙을 설정하고 싶다면 해당 도구의 공식 문서와 다양한 설정 옵션을 참고하여 적용할 수 있습니다.

ESLint와 Prettier를 사용한 코드 포맷팅

Visual Studio Code에서의 확장기능 사용

참고 자료