Eslint와 Prettier

Eslint

린트(lint) 또는 린터(linter)
소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구

잘못된 코드 스타일로 인해 에러가 나지 않게 코드 문법을 잡아주는 문법 검사기이다. 문장 뒤에 자동으로 세미콜론, 콤마를 붙여주기도 하고 의미 없는 변수, API 사용에 대해 경고해주는 등 여러 문법 오류에 대해서 미리 알려준다.

VSCode 확장 프로그램으로 설치할 수 있다.

Prettier

코드 포맷터(Code Formatter)
정해진 코딩 스타일을 따르도록 변환해주는 도구

코드 스타일에 초점을 맞추고 있어 Eslint와는 성격이 다르다. 협업 시 공통된 코딩 스타일 가이드를 통해 스타일에 관한 불필요한 시간과 비용을 줄이기 위해 많이 사용한다.

Prettier 적용하기

혼자 사용할 때는 VSCode 확장 프로그램인 Prettier를 설치한 후, settings.json 파일 내에서 자유롭게 커스터마이징해서 사용하면 된다.

협업 시에는 .prettierrc 파일을 프로젝트 최상단에 만들어 사용하는 게 좋다. 기본적으로 프로젝트 root에 위치한 .pretterrc 설정이 적용되고, 설정이 없는 경우에는 prettier 기본값이 적용된다.

설정 가능한 옵션들

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

Eslint와 Prettier 결합하기

1. npm으로 린트 및 프리티어 라이브러리 설치

npm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev

2. 프로젝트 root 레벨에 린트 설정 파일 .eslintrc.js 추가

module.exports = {
  // 현재 eslintrc 파일을 기준 하위 파일에 ESLint 규칙 적용
  root: true,
  // 추가적인 규칙들 적용
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'prettier',
    'plugin:prettier/recommended',
  ],
  // 코드 정리 플러그인 추가
  plugins: ['prettier'],
  // 사용자 편의 규칙 추가
  rules: {
    'prettier/prettier': [
      'error',
      // 개인 선호에 따라 prettier 문법 적용
      {
        singleQuote: true,
        semi: true,
        useTabs: true,
        tabWidth: 2,
        trailingComma: 'all',
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

3. package.json 파일에 아래의 NPM 커스텀 명령어 추가

{
  "lint": "eslint --ext .js,.vue src"
}

콘솔 창에서 위 명령어를 입력하면 src 폴더 밑의 js, vue 파일에 대해서 린트 검사를 수행한다.
(설정한대로 린트의 기본 규칙+rules에 설정한 프리티어 규칙도 함께 적용)

4. VSCode의 프리티어 플러그인 비활성화
   => 프리티어 플러그인을 비활성화하지 않으면 VSCode의 Formatter 기능과 린트 검사 기능이 충돌한다.

5. settings.json 파일에 아래의 내용을 추가

{
  ...
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ],
}