VSCode: ESlint, Prettier
VSCode에서 ESlint와 Prettier는 자바스크립트 코드를 더 깔끔하고 일관성 있게 작성할 수 있도록 도와주는 플러그인입니다. 각각의 역할과 특징은 다음과 같습니다.
ESlint
ESlint는 자바스크립트 코드에서 문제점을 검사하고, 코드 스타일을 일관성 있게 유지하기 위한 도구입니다. ESlint는 일반적으로 코드 스타일, 코드 품질, 보안, 호환성 등의 측면에서 코드를 검사합니다. 예를 들어, ESlint는 변수의 선언 방법, 함수 호출 방법, 들여쓰기, 쉼표, 따옴표 등을 검사합니다.
ESlint는 VSCode에서 기본으로 제공되지 않기 때문에, VSCode에서 ESlint를 사용하려면 먼저 ESlint를 설치하고 VSCode의 ESlint 플러그인을 설치해야 합니다. 그리고 이후에는 VSCode에서 자바스크립트 파일을 열면 ESlint가 자동으로 작동하여 코드 문제를 검사하고 에러 또는 경고 메시지를 출력합니다.
Prettier
Prettier는 코드 스타일을 일관성 있게 유지하고 코드 포맷팅을 자동으로 수행해주는 도구입니다. Prettier는 들여쓰기, 줄바꿈, 쉼표, 따옴표 등을 자동으로 정리해주므로, 개발자는 코드 스타일에 대해 더 이상 고민하지 않고 코드 작성에 집중할 수 있습니다.
Prettier도 마찬가지로 VSCode에서 기본으로 제공되지 않기 때문에, 먼저 Prettier를 설치하고 VSCode의 Prettier 플러그인을 설치해야 합니다. 그리고 이후에는 VSCode에서 자바스크립트 파일을 열면 Prettier가 자동으로 작동하여 코드 스타일을 정리하고 코드 포맷팅을 수행합니다.
설치 방법
1. VSCode에서 ESLint와 Prettier 플러그인 설치
2. ESLint 글로벌로 npm 을 이용하여 설치
npm install -g eslint다음 키워드를 명령 프롬프트에 입력하여 eslint를 글로벌 설치 합니다
윈도우의 경우 명령 프롬프트를 관리자 권한으로 실행하지 않으면 오류가 발생하니, 설치 전 관리자 권한으로 실행하세요
3. setting.json 파일 수정
{
...
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
}이 두 줄을 본인의 setting.json 파일에 추가하면 됩니다
setting.json 파일을 여는 방법은 VSCode에서 (보기)-(명령 팔레트 열기) 혹은 Ctrl + <Shift> + P (윈도우 기준) 입력하여 입력 창을 띄우고, setting.json 을 입력하면 '사용자 설정 열기' 메뉴가 등장하는데 이걸 클릭해주면 됩니다
4. 본인 프로젝트에 .eslintrc 파일 생성 후 수정
eslint를 본격적으로 사용하려면 프로젝트마다 ESlint 설정파일인 .eslintrc 가 있어야 합니다
이를 사용하기 위해서 본인 프로젝트에서 파일 추가하기 -> .eslintrc 이름을 가진 파일을 하나 생성합니다
이후 내용을 다음과 같이 작성합니다
{
"extends": "rallycoding",
"env": {
"browser": true
}
}extends에 있는 요소는 따로 우리가 설정하지 않고, 알아서 eslint 설정을 해주는 플러그인이고,
밑에 env - browser 항목은 React Native에서 fetch 명령 작성시 빨간 줄로 경고 메시지가 발생하는 것을 막아 줍니다
5. rallycoding 설치
마지막으로 이전 단계에서 설정한 extends를 설치하면 끝입니다
npm install --save-dev eslint-config-rallycoding다음 명령어를 명령 프롬프트에 입력하여 rallycoding을 설치합니다
6. VSCode 재실행
왠만하면 설정이 되겠지만, 안되는 경우 VSCode를 재실행 하면
다음과 같이 오류 메시지가 출력 되는 것을 알 수 있습니다
댓글