Code Convention

프로젝트 진행 시 기능 구현도 중요하지만, 추후 유지보수를 위한 convention도 굉장히 중요하다고 생각한다. 특히 협업으로 작업하는 경우 거의 필수로 작용하는데, 개발자 마다 선호하는 코딩 스타일도 다르고 하물며 변수 명 하나하나 지을 때도 케밥케이스, 카멜케이스 등 여러 방식도 존재하기 때문이다. 물론 개인 프로젝트에서도 이 부분은 꽤나 중요한데 전체적인 일관성이 유지되어야 보는 사람들도 코드를 읽기 편하다. 컨벤션을 잘 지킬 수 있는 플러그인 중 대다수가 사용하는 eslint와 prettier를 vue와 연동해보는 것을 정리해보았다.

사전 준비

만약 vue-cli를 사용할 경우, vue create 과정에서 eslint, prettier를 같이 설치할 수 있지만 이러한 옵션을 이미 알고 설치하는 경우는 목적에 맞게 진행한 것이기 때문에 아무것도 설치가 안 되어있는 것을 전제로 적용하는 것을 목표로 둔다.

Prettier 설치

prettier는 코드를 규칙에 따라 일관성 있게 포맷팅해주는 역할을 하는 플러그인이다.

1. 먼저 VSCode 확장에서 Prettier를 설치한다.

2. 프로젝트 최상위 경로에 .prettierrc.js파일을 생성한다.
   node 환경의 root는 package.json이 위치한 경로라고 이해하면 된다. 어떤 일관성을 유지 할 것인지 설정을 해주어야하기 때문에 설정 파일을 생성한다.

   module.exports = {
     singleQuote: true, //작은 따옴표 사용 (문자열)
     bracketSpacing: false, //객체 리터럴 공백 제거
     printWidth: 200, //코드의 블록 너비
     tabWidth: 4, //개행 단위
     semi: true, //문장 뒤에 세미클론 붙임
     arrowParens: 'avoid', //화살표 함수에서 매개변수 괄호 여부
     trailingComma: 'none' //배열, 객체 속성에서 마지막 요소에 컴마 붙이지 않음
   };
   

   자주 사용하는 옵션을 예시로 들었다. 추가적인 옵션은 Prettier 공식 문서에서 확인 할 수 있다.

3. 마지막으로 코드를 저장 할 때마다 포맷팅이 되어야 하니 VS Code settings.json에서 아래의 옵션을 추가한다.

   //settings.json
   "editor.formatOnSave": true
   

4. 간혹 (3) 까지 진행을 하였음에도 불구하고, .vue컴포넌트 파일에서 자동 포맷팅이 안된다면 아래의 옵션도 추가해주자. 주로 Vetur, EsLint 등 다른 포맷팅을 지원해주는 플러그인과 충돌나서 그러는 경우가 많다고 한다.

   //settings.json
   "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   

Eslint 설치

EsLint는 Prettier보다 더 넓은 기능을 갖춘 플러그인이다. 이름 그대로 린트 (문법 검사) 기능은 기본이고, Prettier에서 제공하는 기능인 포맷팅 기능도 자체적으로 지원한다.

1. vue-cli 환경에서 EsLint를 사용하기 위해 아래와 같이 플러그인을 설치한다.

   npm install --save-dev eslint eslint-plugin-vue
   

2. 전역 설정을 위해 최상위 경로에 .eslintrc.js파일을 생성한다. 기본 구조는 아래 소스를 참고.

   //.eslintrc.js
   module.exports = {
     extends: [
       'plugin:vue/vue3-recommended' //Vue 3.X 버전 권장 규칙
       // 'plugin:vue/recommended' // Vue 2.X 버전을 사용한다면 활성화
     ],
     rules: {}
   };
   

   extends속성에 여러 규칙들을 기입할 수 있으며 (규칙 ID 여러개로 관리가 가능하다.) 자세한 설명은 eslint-plugin-vue 공식 문서에서 확인할 수 있다.

3. 옵션 설정 이 부분은 워낙 방대해 사용하고 있는 설정 기준으로 설명해보자면

   //.eslintrc.js
   module.exports = {
     root: true,
     env: {
       node: true
     },
     extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
     parserOptions: {
       parser: 'babel-eslint'
     },
     rules: {
       'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', //콘솔 사용 제한
       'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' //디버거 사용 제한
     }
   };
   

   • root : 최상위 디렉토리 여부
   • env : 프로젝트 환경 (참고)
   • extends : 사용 할 플러그인 이름 (참고)
   • parserOptions : 구문 분석 옵션
     • ecmaVersion : ECMA 스크립트 버전 (3, 5, 6, .. , 2022, latest)
     • sourceType : 파서의 출력 형태
     • parser : parser 선택
   • rules : 규칙 설정 (참고) 규칙은 다음과 같은 값으로 설정 할 수 있다. (off - 규칙 사용 안함, warn - 경고 규칙, error : 오류 발생)
     이 규칙 설정이 EsLint의 꽃이라 볼 수 있는데 다양한 설정으로 어떤 수준으로 개발자에게 알려줄 지 설정 할 수 있기 때문이다.
     자세한 규칙은 공식 문서를 참고하면 되고 아래와 같이 사용하면된다.

   {
     "rules": {
       "eqeqeq": "off",
       "curly": "error",
       "quotes": ["error", "double"]
     }
   }
   

참고자료

• eslint-bea-vue document
• ESLint - Configuring ESLint