[VUE]ESLint 와 Prettier 개념 및 설정

오늘은 vue 프로젝트 중 설정되어 있던 ESLint와 Prettier를 알아보겠습니다.
 
두 설정은 많은 사람들과 협업하여 코드를 작성할 때 에러와 코딩스타일을 일정하게 잡아주는 가이드라인 역할을 할 수 있어서 굉장히 유용한 설정이다.
 
기존에 이런 설정 없이 코드를 작성하였다면, 적응하는데 초반에 난감할 수 있지만,
오히려 익숙해지면 더 편하고 활용성이 좋습니다.
 
ESLint는 ES (ecma script) Lint(소스 코드에서 문제가 될 만한 점을 찾는 작업)
자바스크립트 문법에 에러를 표시해 주는 도구입니다.
 
Prettier는 code formater의 일종이며, 코드 규칙을 세부적으로 설정해 두면 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성도 높이고 코드 스타일을 통일할 수 있는 플러그인입니다.
 
두 설정을 하고 개발을 하다 보면 자바스크립트 표준 가이드에 맞춰져 코드가 깔끔해지는 효과를 볼 수 있다.
 
현재 가장 많이 사용되는 건 Airbnb(https://github.com/airbnb/javascript)에서 정의한 자바스크립트 규칙이다.
저와 같이 SI를 하시는 개발자분들께서도 처음 겪어보신다면 이게 뭐지? 할 수 있습니다.
 
이러한 설정들이 있기에 에러가 난다면 규칙을 확인해 보고 개발하는 것이 바람직할 것입니다.
 
설치 방법입니다.
 
<ESLint 설치>
패키지 설치 : npm install eslint --save-dev
설정 파일 생성 : npx eslint --init
<Prttier 설치>
패키지 설치 : npm install prettier --save-dev

• ESLint와 같이 쓰기 위한 설정
• npm install eslint-config-prettier --save-dev npm install eslint-plugin-prettier --save-dev

prettier와 eslint를 같이 사용하기 위해서 eslint의 설정 파일의 extends에 prettier plugin을 추가해야 합니다.
.eslintrc.js 설정
 

        root: true, 
      

          env: { 
      

            node: true, 
      

            browser: true, 
      

            es6: true 
      

          }, 
      

          extends: [     
      

            "eslint:recommended",    
      

            "airbnb", 
      

            "plugin:prettier/recommended" 
      

          ],   
      

            rules: { 
      

            'import/no-webpack-loader-syntax': 'off', 
      

            "no-nested-ternary": 0 
      

          }, 
       parser: "@typescript-eslint/parser", 
      

          parserOptions: { 
      

            "ecmaFeatures": {       
      

                "jsx": true 
      

            }, 
      

            "ecmaVersion": "latest", 
      

            "sourceType": "module" 
      

          } 
      

 
eslint의 formatting 규칙으로 prettier도 사용하면서 prettier의 규칙을 커스텀할 필요가 있었습니다.
prettier의 규칙을 커스텀하기 위해서는 prettier 설정 파일을 생성할 필요가 있습니다.
prettier 설정 파일의 생성 방법은 공식 문서에 정리가 되어있습니다.