Formatting & Linting

1. Formatting

💡 ES, TS, Vue, HTML, CSS, SCSS, Java 등 모든 언어의 포매팅을 지원합니다.

Intellij

• File > Setting > Editor > Code Style 에서 각 언어별로 설정
• Scheme 파일을 프로젝트 또는 IDE 단위로 Export/Import 할 수 있어, 통합 관리가 가능함

Prettier

• 공식 홈페이지
• 설치

// npm 
npm install --save-dev --save-exact prettier 

// yarn 
yarn add --dev --exact prettier

• Prettier 의 Configuration은 루트디렉토리에 .prettierrc.js 파일에 설정
• IDE 별 초기 설정 방법
  • WebStorm
    • 마켓플레이스에서 Prettier 확장 플러그인 설치
    • Preferences > Languages & Frameworks > JavaScript > Prettier > Prettier package 경로 지정, On save 항목 체크 ( Save on Actions )
    • glob 패턴을 이용하여 포맷팅할 확장자 명시 (참조).
      

      

      
      

      

  • VS Code
    • 마켓플레이스에서 Prettier 확장 플러그인 설치
    • 기본설정 > 설정 > 텍스트 편집기로 이동, Default Formatter 를 Prettier - Code formatter로 변경.)
      

      

      

     
   설정 가능한 주요 옵션들 (공식 홈페이지내 Doc 문서)

2. ESLint - Linting

💡 ES, TS, Vue 등 의 린팅을 지원합니다.

• ESLint의 Configuration 은 eslintrc.js 파일이나 packge.json 의 eslintConfig 필드에 작성 할 수 있음.
• .eslintrc.js 파일 주요 용어
  • root : 기본적으로 ESLint는 루트 디렉토리까지 모든 상위 폴더에서 Configuration 파일을 찾는데, "root" : true 구성을 찾으면 상위 폴더 검색을 중지함.
  • env : 사용 환경. ex) "browser ": true , "node" : true , "es6" : true 등.
  • extends : 사용할 확장기능에 대한 명시, 추가한 플러그인에서 사용할 규칙. google 이나 airbnb, prettier 등을 추가하여 사용 가능. ex) vue/recommended , react/recommended 등.
    • 링크 참조 : Airbnb Style Guide, Google Style Guide, Naver Style Guide
    • 기본적으로 airbnb lint 사용하고 필요한 설정변경
    • ESLint 에도 기본적으로 코드포맷팅 기능이 들어가 있지만 Prettier 에 비해 특화되어 있지는 않음.
    • 추후, ESLint 와 Prettier 를 함께 사용하려면 ESLint 가 포맷팅에는 관여 하지 않도록 (충돌 나지않도록) 아래 설정을 해줘야함.!
    • Prettier 와 ESLint 를 같이 사용하려면..
      1. eslint-config-prettier 를 설치한다. Prettier 와 충돌하는 ESLint 규칙을 꺼주는 역할을 한다.
         1. $ npm install --save-dev eslint-config-prettier
      2. eslint-plugin-prettier 를 설치한다. 이는 Prettier 규칙을 ESLint 규칙으로 추가하는 파일이다.
         1. $ npm install --save-dev eslint-plugin-prettier
         2. 아래 설정을 extends 맨 뒤에 추가해준다.
  • parserOptions : ESLint 사용을 위해 지원하려는 언어 옵션을 지정.
  • parser : 구문 분석을 위해 기본적으로 Espree 파서를 사용하고, 추가적으로 바벨과 함께 사용되는 파서로 babel-eslint 와, Typescript 구문 분석을 위해 사용되는 @typescript-eslint/parser 가 있음. ex) "parser" : "babel-eslint" , "parer" : "@typescript-eslint/parser"
  • rules : 기준이 되는 extends 에서 예외 적용 할 부분들을 지정 가능. 규칙을 변경할때는 아래 규칙을 적용 해야함. (공식 룰 참조 : eslint.org/docs/rules/ )
    • "off" or 0 : 규칙을 사용하지 않음.
    • "warn" or 1 : 규칙을 경고로 사용.
    • "error" or 2 : 규칙을 오류로 사용.
• 참고
  • ESLint 공식 룰
  • ESLint - Vue플러그인 룰
• ESLint 가 정상동작 하지 않을때..Manual ESLint contiguration 체크
  • Node Interpreter : 프로젝트에 사용 중인 버전의 node를 선택
  • ESLint package : 프로젝트에 의존성으로 사용 중인 프로젝트 루트 디렉토리/node_modules/eslint 모듈 디렉토리를 선택
  • Configuration File : 보통은 Automatic search를 체크.만약 정상 작동 안할 경우 Configuration File에서 프로젝트 루트 디렉토리/.eslint.js 선택
  • Run eslint --fix on save 체크