Skip to content

CHICPRO

  • Life Log
  • Cycling Log
  • Photo Log
    • Portrait
    • Landscape
    • Flower
    • Etc
  • Coding Log
  • Information

VS Code에 ESLint와 Prettier 적용하기

2022-05-30 by 편리

난 주로 PHP 로 개발을 진행하기 때문에 ESLint와 Prettier는 거의 사용을 하지 않지만 간혹 React Native App을 개발하거나 할 때는 사용할 때가 있다. 그리고 자바스크립트 역시 개발을 해야할 경우가 있어서 이번에 제대로 세팅을 진행하게 됐다. 포맷팅은 Prettier가 담당하고 문법오류는 ESLint에서 체크한다.

우선 아래 2개의 Extension을 VS Code에 설치한다.

특히 ESLint의 경우는 Extension만 설치했다고 사용할 수 있는 것은 아니다. 아래 내용처럼 npm install eslint 와 같이 별도로 eslint 패키지를 설치해줘야 한다.

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version. If you haven’t installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

이제 VS Code settings.json 파일에 설정을 추가해준다.

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
        },
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
        },
        "editor.formatOnSave": true
    },
    "prettier.configPath": ".prettierrc.js",
    "eslint.useESLintClass": true,
    "eslint.options": { "useEslintrc": false, "overrideConfigFile": ".eslintrc.json" }
}

위 설정은 javascript 와 typescript 파일을 저장할 때 기본 포맷터를 prettier 로 설정하고 문법 오류 등은 eslint로 체크한다는 내용이다. 팀 단위로 협업을 진행하게 되면 prettier 와 eslint 설정이 따로 관리되고 있을 터이기 때문에 공통된 설정을 적용하기 위해 각각의 설정 파일을 별도로 지정해줬다. 다만 "useEslintrc": false 설정은 꼭 필요한 내용인지는 모르겠다. 만약 Parsing error: The keyword 'import' is reservedeslint 오류가 발생한다면 위 설정 중 "eslint.useESLintClass": true 부분이 해당 오류를 해결 할 수 있다.

각 설정 파일 .prettierrc.js, .eslintrc.json 의 설정은 아래와 같은 형식으로 지정하면 된다.

module.exports = {
  bracketSpacing: false,
  bracketSameLine: true,
  singleQuote: true,
  printWidth: 80,
  useTabs: false
};
{
  "rules": {
    "no-console": 2
  }
}

참고로 VS Code 가 아닌 다른 에디터를 사용하거나 직접 eslint 명령어로 문법 오류를 체크하는 경우라면 eslint-config-prettier 를 추가로 설치해서 eslint 설정과 prettier 설정이 서로 충동하는 것을 막을 수 있다. 그리고 아래 내용을 .eslintrc 파일에 추가해 준다.

{
  "extends": [
    "prettier"
  ]
}

Post navigation

Previous Post:

iterm2 설정 백업

Next Post:

VS Code PHP 개발환경 세팅

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • UTM을 이용한 윈도우 사용 때 마우스 스크롤 방향 설정
  • Outlook.com 키보드 단축키 해제하기
  • [Mac] Teams 이미지 등의 캐시 삭제 방법
  • 맥(Mac) 키보드 단축키를 이용한 화면분할 배치 Rectangle
  • Microsoft Edge 브라우저 검색엔진 구글로 변경
  • 맥 Word 에서 최근 문서 표시되지 않게 하기
  • VS Code PHP 개발환경 세팅
  • VS Code에 ESLint와 Prettier 적용하기
  • iterm2 설정 백업
  • iTerm2 프로파일별 단축키 설정

Recent Comments

  • YS on Windows 10 iCloud 사진 저장 폴더 변경
  • 편리 on Docker를 이용한 Centos7 + httpd + php 5.4 개발환경 구축
  • Stas on Docker를 이용한 Centos7 + httpd + php 5.4 개발환경 구축
  • 편리 on [PHP] HTTP와 PHP를 이용한 html5 video 스트리밍 구현
  • Kim on [PHP] HTTP와 PHP를 이용한 html5 video 스트리밍 구현
  • 편리 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 고맙습니다 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 편리 on PHPMailer를 이용한 이메일 발송
  • 초보자 on PHPMailer를 이용한 이메일 발송
  • 편리 on PHPMailer를 이용한 이메일 발송

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
© 2022 CHICPRO | Built using WordPress and SuperbThemes