프로그래밍은 코드를 입력하며 진행된다.

사람마다 글쓰는 방식이 다르듯, 코딩하는 스타일도 다르다.

협업을 하는 과정에서 일관된 규칙 없이 코딩이 진행된다면 코드 해석이 어려워지고 더 나아가 유지보수에 지장이 생길 수 있다.

이러한 문제를 해결하기 위해 코딩 컨벤션(코딩스타일)을 일관되게 유지해주는 확장 플러그인들이 생겨났다.

오늘은 자바스크립트 코딩 컨벤션 플러그인 중에 대표적인 ESLint, Prettier를 활용하는 방법에 대해 알아보자.
(필자는 Visual Studio Code를 기준을 작성한다.)

ESLint

ESLint는 코드 일관성을 높이고 버그를 방지하기 위해 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 툴이다.

• 설치

1. VS Code 마켓플레이스에 들어가 ESLint 검색.

2. 설치(설치 되어 있다면 제거 버튼이 보임.)

3. eslint 규칙에 어긋난 코드 컨벤션이 발견되면 오류 도출
   

이렇게 에러를 도출하여 컨벤션을 유지해준다.
근데, 이렇게 화면에 계속 오류가 오버레이 된다면 생산성이 굉장히 저해된다.

오버레이 되지 않도록 설정해보자.

1. 프로젝트 루트 경로에 vue.config.js 파일을 생성하자.(vue 설정파일)

module.exports = {
   devServer: {
      overlay: false
   }
}

위 코드를 입력해놓고 서버를 재실행하면 오버레이가 생성되지 않는다.

.eslintrc.js

eslint의 설정파일이다. 이 파일에서 rules 속성에 코딩 규칙을 커스터마이징 할 수 있다.

커스터마이징을 Prettier로 해보자

Prettier

Eslint와 동일하게 plugin을 설치하자.

rules에 다음 코드를 붙여넣자.

rules: {
    "prettier/prettier": ['error', {
      singleQuote: true,
      semi: true,
      useTabs: false,
      tabWidth: 2,
      trailingComma: 'all',
      printWidth: 80,
    }]
  },

• singleQuote : 작은따옴표 사용 여부
• semi : 코드 끝에 세미콜론 사용 여부
• useTabs : tab키 사용 여부
• tabWidth : tab키 눌렀을 때 띄어지는 칸 수
• trailingComma : 코드 끝에 , 사용 여부
• printWidth : 한 줄에 쓸 수 있는 글자수

본인의 취향대로 속성을 지정하면 되겠다.

마지막으로 VS Code에서 eslint를 적용시키는 방법을 알아보자.

(윈도우 기준) Ctrl + , 를 누르면 설정 탭이 열린다.

상단 검색창에 eslint를 검색하고 좌측 확장 메뉴 하위에 EsLint선택.

쭉 내려보면 Eslint:Validate 항목을 찾은 뒤 settings.json에서 편집 클릭.

제일 아래쪽에 다음 코드를 삽입.

"eslint.validate": [
  "vue",
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
]

저장하면 세팅 끝.

파일 절대 경로 설정 @

이전 프로젝트에서 항상 import 받아올 때 경로를 아래 방식으로 했었다.

import Test from '../component/Test.vue';

../을 사용하는 것을 상대경로 방식이라고 한다.
(현재 파일 기준으로 위치를 찾는 방식)

가까운 경로를 찾아갈 때는 문제가 되지 않지만... 상위 폴더와 하위 폴더가 복잡한 구조라면 ../ <--을 꽤나 많이 사용해야 하는 상황이 올지도 모른다.

그래서 절대경로를 한번 사용해보자.
절대경로란 특정 위치를 고정해두고 고정된 위치를 기준으로 파일경로를 찾아가는 방식이다.

특정 위치를 고정해둔다고 했는데 대게 src 폴더를 기준삼는다.

절대경로 위치 지정 방법

VS Code

1. 프로젝트 루트 경로에 jsconfig.json 파일을 생성한다.
2. 생성한 파일 내에 다음과 같은 코드를 작성한다.

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  }

이외
1. vue.config.js 파일을 생성한다.
2. 생성한 파일 내에 다음과 같은 코드를 작성한다.

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.join(__dirname, "src/")
      }
    }
  },
}

@가 src 경로를 대신하는 alias 역할을 하고 사용법은 다음과 같다

import Test from '@/component/Test.vue';

Vue 프로젝트를 진행하기 전 설정하는 부분을 알아보았다.

출처 : Vue.js 끝장내기 - 실무에 필요한 모든 것