Prettier, Eslint 및 Vscode가 함께 작동하기

꽤 오랫동안 Prettier, Eslint 및 Vscode를 함께 사용하려고 시도했지만 나를 만족시키는 솔루션을 찾지 못했습니다. 이제 일상 업무에서 새로운 React 프로젝트를 작업하면서 마침내 작동할 시간을 찾았습니다.

Eslint와 Prettier는 무엇입니까?

Eslint는 구문 또는 기타 오류를 찾는 데 도움이 되는 자바스크립트 린터입니다. Eslint는 사전 정의된 구성을 연결하거나 직접 구성하여 확장할 수 있습니다. vscode용 플러그인과 함께 입력하면 오류가 표시될 수 있습니다.

Prettier는 javascript를 포함한 quite a few languages용 코드 포맷터입니다. 코드가 자동으로 지정되거나 선택적으로 서식이 지정되도록 할 수 있습니다.

전제 조건

여기서는 다루지 않을 것이므로 NPM 및 Vscode에 대한 기본 지식이 있다고 가정합니다. 다음이 필요합니다.

Vscode가 설치됨

NodeJS 및 NPM이 설치됨

Vscode 플러그인 설치

먼저 Vscode 플러그인ESLint 및 Prettier - Code formatter을 설치하고 활성화되어 있는지 확인합니다.

종속성 설치

npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier

구성 파일 설정

프로젝트 루트에 .eslintrc 파일을 만듭니다.

여기에서 우리는 기본적으로 Eslint에게 다음과 같이 지시합니다.

권장되는 더 예쁜 구성에서 확장

설치한 Prettier 플러그인 등록

더 예쁜 오류를 오류로 표시

{
  "extends": [
    "plugin:prettier/recommended"
  ],

  "plugins": ["prettier"],

  "rules": {
    "prettier/prettier": "error"
  }
}

참고: eslint 구성에는 더 많은 규칙이 포함될 수 있습니다. 간단하고 이해하기 쉽게 정리하고 있습니다.

다음으로 프로젝트 루트에 .prettierrc 파일을 만듭니다.

이 설정을 조정하거나 add new ones 원하는 대로 조정할 수 있습니다.

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

Vscode에서 formatOnSave 활성화

formatOnSave를 찾아 확인란을 선택하거나 다음 줄을 settings.json에 추가합니다.

"editor.formatOnSave": true,

사용해보기

위와 같이 .prettierrc 파일을 유지했다면 이제 Vscode가 다음과 같이 표시되어야 합니다.

코드를 공백 2개로 들여쓰기

큰따옴표 대신 작은따옴표 사용

세미콜론 추가 각 줄의 끝에 추가

문제가 발생하면 Vscode를 다시 시작해 보세요.