코드 컨벤션을 위해 WebStrom 플러그인을 사용해서 Vue에 ESLint와 Prettier 연동.

Code convention, 코드 컨벤션

프로그래밍 언어를 사용하여 코드를 작성할 때 일관성과 가독성을 유지하기 위한 규칙과 가이드라인.

프로젝트 팀이나 개발자 커뮤니티 내에서 협업과 유지보수를 용이하게 하기 위해 중요하다. 

아래는 일반적으로 사용되는 코드 컨벤션의 몇 가지 예시.

1. 들여쓰기(Indentation):
코드 블록을 구분하기 위해 들여쓰기를 일관성 있게 사용. 대부분의 언어에서는 공백 또는 탭을 사용하여 들여쓰기를 지정한다.

2. 변수 및 함수명(Naming Conventions):
변수, 함수, 클래스 등의 이름을 명확하고 의미있게 작성. 일반적으로 카멜 케이스(camelCase)나 스네이크 케이스(snake_case)와 같은 표준 명명 규칙을 따른다.

3. 주석(Comments):
코드의 이해를 돕기 위해 주석을 사용하며, 주석은 코드의 목적과 동작을 설명하는 데 활용. 코드가 어려운 부분이나 복잡한 로직을 포함할 때 주석을 적극 활용한다.

4. 줄 길이(Line Length):
한 줄에 들어가는 문자의 길이를 제한하여 코드의 가독성을 유지. 일반적으로 80-120자 사이의 길이를 권장.

5. 공백 사용(Whitespace):
코드 내부의 공백을 일관성 있게 사용하여 가독성을 향상시킨다. 연산자 주변이나 함수 호출 시 간격을 유지.

6. 괄호 사용(Braces):
코드 블록을 나타내는 중괄호의 위치와 사용 방식을 일관성 있게 정의. 대표적으로 K&R 스타일과 Allman 스타일이 있다.

7. 들여쓰기 단계(Indentation Level):
코드 블록마다 얼마만큼 들여쓰기를 할지를 결정하여 코드의 계층 구조를 명확하게 표현한다.

---

ESLint와 Prettier

컨벤션을 잘 지킬 수 있게 도와주는 도구가 있는데, Vue에서 주로 ESLint와 Prettier를 함께 사용하여 코드의 품질을 강화하고 일관된 스타일을 유지한다. 

 

- ESLint:
ESLint는 JavaScript와 같은 프로그래밍 언어의 정적 분석 도구로, 코드에서 잠재적인 오류, 버그, 스타일 문제를 검출하고 이를 수정하도록 돕는다. 
ESLint를 사용하면 코드의 일관성을 유지하고 팀 내에서 특정한 코딩 규칙을 준수할 수 있다. 
예를 들어, 변수의 정의되지 않은 사용, 잘못된 들여쓰기, 쌍따옴표와 홑따옴표의 혼용 등을 검사하여 코드 품질을 개선한다.

- Prettier:
Prettier는 코드 포맷팅 도구로, 코드를 자동으로 정렬하고 들여쓰기를 조정하여 일관성 있는 코드 스타일을 유지할 수 있도록 돕는다. 
Prettier는 개발자가 별도로 코드 스타일을 결정할 필요 없이, 미리 정해진 규칙에 따라 코드를 자동으로 서식화한다. 
이로써 팀 내에서 일관된 코드 스타일을 유지하고, 코드 리뷰에서의 불필요한 스타일 관련 논의를 줄일 수 있다.

---

WebStrom 플러그인 사용해서 Vue에 ESLint와 Prettier 연동

1. eslint 설정

직접 하나하나 다 설치하고 적용하는 방법도 있지만,

빠르게 자동으로 모듈을 설치하고 싶기 때문에 아래 방법 선택.

npx eslint --init

? How would you like to use ESLint?
 To check syntax only
 To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

? What type of modules does your project use?
> JavaScript modules (import/export) (바벨을 쓴다면)
 CommonJS (require/exports) (바벨을 쓰지 않는다면)
 None of these

? Which framework does your project use?
 React
> Vue.js
 None of these

? Does your project use TypeScript? 
> No 
  Yes

? Where does your code run?
 Browser
> Node

? How would you like to define a style for your project?
❯ Use a popular style guide           # google, airbnb 등 중 google 선택. 
 Answer questions about your style   
 Inspect your JavaScript file(s)

? What format do you want your config file to be in?
 JavaScript
 YAML
❯ JSON

2. prettier 설정

$ npm install prettier --save-dev --save-exact 

// --save-exact는 버전이 달라지면서 생길 스타일 변화를 막을 수 있기 때문

$ npm install eslint-plugin-prettier eslint-config-prettier --save-dev

// eslint-config-prettier: Prettier와 충돌할 설정들을 비활성화합니다.
// eslint-plugin-prettier: 코드 포맷할 때 Prettier를 사용하게 만드는 규칙을 추가합니다.

.eslintrc.json에 아래 내용 추가

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

웹스톰 플러그인

1. Prettier 웹스톰에 적용 

1. settings - plugins - prettier 

2. settings에 prettier 검색 후 manual prettier configuration 선택 후 root\node_modules\prettier 입력.

3. settings - plugins - watcher 

4. settings - tools - file watchers에 추가.

- prettier 이름명, 프로젝트 스콥, js 파일 타입.

프로그램 : $ProjectFileDir$/node_modules/.bin/prettier
인수 : -write $FilePathRelativeToProjectRoot$
새로고침할 출력 경로 : $FilePathRelativeToProjectRoot$
작업 디렉터리 : 프로젝트의 루트 디렉토리

고급 옵션은 편집한 파일을 자동 저장하여 감시기 트리거만 체크. 

5. 웹스톰 내비 탭 중 코드 - 코드 정리 

 

 

2. ESLint 웹스톰에 적용 

1. settings - eslint 검색 - 수동 설정

수동 ESLint 설정을 체크
ESLint 패키지에 현재 프로젝트 node_modules 에 설치된 eslint 경로를 명시
작업 디렉터리에 현재 프로젝트의 루트 경로를 명시
구성 파일 항목에 현재 프로젝트의 .eslintrc.js의 경로를 명시
저장 시 eslint —fix 실행 옵션 체크

2. 웹스톰 내비 탭 중 코드 - 코드 정리 

 

 

참고)

https://overcome-the-limits.tistory.com/4

[협업] Prettier & ESLint, Airbnb Style Guide로 코드 컨벤션 설정하기

https://velog.io/@seungchan__y/Webstorm%EC%97%90%EC%84%9C-ESLint-Prettier-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

Webstorm에서 ESLint + Prettier 적용하기