혼자 작업하든 개발자 팀과 함께 작업하든 깔끔하고 읽기 쉬운 코드를 작성하는 것은 필수입니다. 코드 가독성에 영향을 미치는 요소는 여러 가지가 있지만, 가장 중요한 것 중 하나는 일관된 코드 서식입니다.
하지만 수동으로 코드 서식을 지정하는 것은 매우 번거롭고 오류가 발생하기 쉬운 작업이라는 문제가 있습니다. Prettier와 같은 도구를 사용하면 HTML, CSS, JavaScript 및 기타 언어의 서식을 훨씬 쉽게 지정할 수 있습니다. 코드 서식 지정을 위한 Prettier 확장 프로그램의 설치 및 사용 방법과 몇 가지 고급 구성 설정을 알아보세요.
Prettier 설치하기
계속 진행하기 전에 컴퓨터에 Node.js가 설치되어 있는지 확인하세요. 최신 버전은 공식 Node.js 다운로드 페이지 에서 설치할 수 있습니다. 이 버전에는 Node.js 패키지를 관리하는 데 사용할 node 패키지 관리자(npm)가 기본으로 제공됩니다.
Node.js가 로컬에 설치되었는지 확인한 후 프로젝트에 빈 디렉터리를 생성하여 시작합니다. 디렉터리 이름을 prettier-demo로 지정할 수 있습니다.
그런 다음 명령줄을 사용하여 해당 디렉터리에 cd한 다음 다음 명령을 실행하여 Node.js 프로젝트를 초기화합니다.
npm init -y
이 명령은 기본 설정이 포함된 package.json 파일을 생성합니다.
Prettier 확장 프로그램을 설치하려면 이 터미널 명령을 실행하세요:
npm i --save-dev prettier
–save-dev 플래그는 개발 종속성으로 prettier를 설치하므로 개발 중에만 사용됩니다.
이제 설치가 완료되었으므로 명령줄에서 Prettier를 사용하여 작동 방식을 살펴볼 수 있습니다.
명령줄에서 Prettier 사용하기
먼저 script.js 파일을 생성하고 다음 코드로 채웁니다:
function sum(a, b) { return a + b }
const user = { name: "Kyle", age: 27,
isProgrammer: true,
longKey: "Value",
moreData: 3
}
명령줄을 통해 이 script.js 파일의 코드 서식을 지정하려면 다음 명령을 실행합니다:
npx prettier --write script.js
이 명령은 script.js의 JavaScript 코드를 Prettier의 기본 표준에 맞게 다시 포맷합니다. 결과는 다음과 같습니다.
function sum(a, b) {
return a + b;
}
const user = {
name: "Kyle",
age: 27,
isProgrammer: true,
longKey: "Value",
moreData: 3,
};
명령줄에서 HTML 마크업의 서식을 지정할 수도 있습니다. script.js와 같은 디렉터리에 index.html 파일을 만듭니다. 그런 다음 다음과 같은 잘못된 형식의 HTML을 파일에 붙여넣습니다:
<header>
<div>
<img src="" alt="" class="weather-icon large">
<div class="currentHeaderTemp"><span>21</span></div>
</div>
</header>
HTML의 서식을 지정하려면 다음 명령을 실행합니다:
npx prettier --write index.html
이 명령은 HTML을 Prettier의 기본 표준으로 다시 포맷하며, 그 결과 다음 코드가 생성됩니다:
<header>
<div>
<img src="" alt="" class="weather-icon large" />
<div class="currentHeaderTemp"><span>21</span></div>
</div>
</header>
–check 플래그를 사용하여 코드가 Prettier의 표준을 준수하는지 확인할 수도 있습니다. 다음 예제는 script.js를 검사합니다:
npx prettier --check script.js
이 플래그는 사람들이 Git에 푸시하기 전에 Prettier를 사용하고 파일을 포맷하는지 확인하기 위한 사전 커밋 후크를 원하는 경우에 유용합니다. 오픈소스에 기여할 때 잘 작동합니다.
Visual Studio 코드에 Prettier 통합하기
명령줄을 통해 Prettier를 사용하는 것은 번거로울 수 있습니다. 코드 서식을 지정할 때마다 수동으로 명령을 실행하는 대신 파일을 변경할 때 자동으로 서식을 지정하도록 설정할 수 있습니다. 다행히 Visual Studio Code(VS Code)에는 이 작업을 수행할 수 있는 방법이 내장되어 있습니다.
VS Code의 확장 탭으로 이동하여 Prettier를 검색합니다. Prettier – 코드 포맷터를 클릭하고 설치한 다음 활성화합니다.
파일; 환경설정; 설정으로 이동하여 VS Code 설정으로 이동합니다. 검색 상자에서 Prettier를 검색합니다. Prettier 확장을 구성하는 데 도움이 되는 다양한 옵션을 찾을 수 있습니다.
일반적으로는 기본 설정으로 사용할 수 있습니다. 변경을 고려할 수 있는 유일한 항목은 세미콜론입니다(원하는 경우 제거할 수 있음). 그 외에는 모든 것이 기본값으로 설정되어 있지만 원하는 대로 변경할 수 있습니다.
파일을 저장할 때 각 파일의 코드가 자동으로 포맷되도록 포맷온세이브 옵션을 활성화해야 합니다. 이 옵션을 활성화하려면 포맷온세이브를 검색하고 확인란을 선택하기만 하면 됩니다.
VSCode를 사용하지 않거나 어떤 이유로 확장 프로그램이 작동하지 않는 경우 onchange 라이브러리를 다운로드할 수 있습니다 . 그러면 파일을 변경할 때마다 코드 형식을 지정하는 명령이 실행됩니다.
예쁘게 포맷할 때 파일을 무시하는 방법
전체 폴더에서 예쁘게 –write 명령을 실행하면 모든 노드 모듈을 살펴볼 수 있습니다. 하지만 다른 사람의 코드를 포맷하는 데 시간을 낭비해서는 안 됩니다!
이 문제를 해결하려면 .prettierignore 파일을 생성하고 파일에 node_modules라는 용어를 포함하세요. 전체 폴더에 대해 –write 명령을 실행하면 node_modules 폴더에 있는 파일을 제외한 모든 파일이 다시 포맷됩니다.
특정 확장자를 가진 파일을 무시할 수도 있습니다. 예를 들어 모든 HTML 파일을 무시하려면 .prettierignore에 *.html을 추가하면 됩니다.
프리티어 구성 방법
다양한 옵션으로 프리티어가 작동하는 방식을 구성할 수 있습니다. 한 가지 방법은 package.json 파일에 prettier 키를 추가하는 것입니다. 이 값은 모든 구성 옵션이 포함된 객체가 됩니다:
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
prettier: {
// options go here
}
}
두 번째 옵션(권장)은 .prettierrc 파일을 만드는 것입니다. 이 파일을 사용하면 모든 종류의 사용자 지정을 수행할 수 있습니다.
세미콜론이 마음에 들지 않는다고 가정해 봅시다. 파일에 다음 개체를 배치하여 제거할 수 있습니다:
{
"semi": true,
"overrides": [
{
"files": ".ts",
"options": {
"semi": false
}
}
]
}
오버라이드 속성을 사용하면 특정 파일 또는 파일 확장자에 대한 사용자 지정 오버라이드를 정의할 수 있습니다. 이 경우 .ts로 끝나는 모든 파일(즉, 타입스크립트 파일)에는 세미콜론이 없어야 한다고 말합니다.
ESLint와 함께 Prettier 사용
ESLint는 자바스크립트 코드의 오류를 감지하고 서식을 지정하기 위한 린팅 도구입니다. Prettier를 사용하는 경우 서식 지정에도 ESLint를 사용하고 싶지 않을 것입니다. 이 둘을 함께 사용하려면 eslint-config-prettier 를 설치 및 설정해야 합니다. 이 도구는 Prettier가 이미 처리하는 항목에 대한 모든 ESLint 구성을 해제합니다.
먼저 설치해야 합니다:
npm i --save-dev eslint-config-prettier
그런 다음 .eslintrc 파일의 확장 목록에 추가합니다(목록의 마지막 항목인지 확인):
{
"extends": [
"some-other-config-you-use",
"prettier"
],
"rules": {
"indent": "error"
}
}
이제 ESLint는 충돌을 방지하기 위해 Prettier가 이미 처리하고 있는 모든 규칙을 비활성화합니다.
Prettier 및 ESLint로 코드베이스 정리
Prettier는 코드를 정리하고 프로젝트 내에서 일관된 서식을 적용하는 데 이상적인 도구입니다. VS Code와 함께 작동하도록 설정하면 항상 손이 닿는 곳에 있습니다.
ESLint는 Prettier와 함께 사용해야 하는 필수 자바스크립트 도구입니다. 기본 서식을 뛰어넘는 다양한 기능과 사용자 지정 옵션을 제공합니다. 더 생산적인 개발자가 되고 싶다면 자바스크립트와 함께 ESLint를 사용하는 방법을 알아보세요.