코드를 더 이쁘게 - Prettier

Prettier

Prettier는 코드 포맷터(Code Formatter)로써, 일관된 코딩 스타일을 유지하는 데 도움을 준다. Prettier는 코드를 읽고, 이를 내부 표현으로 변환한 다음, 미리 정의된 규칙에 따라 코드를 다시 출력한다. 이 과정에서 모든 원래의 스타일링이 제거되고, Prettier에서 정의한 규칙에 따라 일관된 스타일이 적용된다.

 

Prettier 기능

1. 코드 포맷팅: Prettier는 코드를 분석하여 추상 구문 트리 (Abstract Syntax Tree, AST)를 생성하고, 그 트리를 사용하여 코드를 재출력 한다. 이 과정에서 Prettier는 코드를 새롭게 포맷팅 하며, 일관된 스타일을 적용한다.
2. 통합: Prettier는 통합 개발 환경 (IDE) 및 코드 편집기, 버전 관리 시스템, CI 도구 등과 쉽게 통합할 수 있다 대부분의 적용 방식에서는 코드를 저장할 때 자동으로 포맷팅이 적용된다
3. 옵션 설정: Prettier는 기본 설정만으로도 충분히 사용할 수 있지만, 필요에 따라 일부 옵션을 사용자 정의할 수 있다 예를 들어, 탭 너비, 세미콜론 사용 여부, 따옴표 스타일 등을 설정할 수 있다

 

동작 방식

Prettier는 '비동의형' 코드 포맷터로 작동하며, 아래와 같은 과정을 통해 코드를 일관된 스타일로 변경해준다.

• 비동의형 코드 포맷터란?
  • 개발자가 코드를 작성하는 방식에 상관없이, 항상 동일한 규칙을 따르는 코드를 생성하는 도구를 의미
  • 이는 코드의 일관성을 높이고, 다른 개발자들이 코드를 이해하고 수정하는 데 도움을 준다.

Parsing(구문 분석): Prettier는 코드를 가져와서 '구문 트리(Abstract Syntax Tree, AST)'로 변환한다. 이 트리는 코드의 구조를 나타내는 데이터 주고이며, 예로 함수 호출을 나타내는 노드는 호출되는 함수의 이름, 인자 목록 등을 포함할 수 있다.

Printing(출력): Prettier는 이 구문 트리를 다시 코드로 "출력"한다. 이때, Prettier는 원래 코드의 모든 스타일링을 무시하고, 그 대신에 Prettier의 규칙에 따라 코드를 수정하여 출력한다. 이 과정은 코드의 의미를 변경하지는 않는다.

Line Wrapping(줄 바꿈): Prettier는 코드를 정해진 최대 줄 길이에 맞게 줄 바꿈 한다. 이 기능 덕분에, 긴 코드 라인이 자동으로 적절한 위치에서 줄 바꿈 되어, 일관된 가독성을 유지할 수 있게 된다.

 

주요 옵션

arrowParens: 화살표 함수에 한 개의 인수가 있을 때 괄호를 사용할 것인지 지정한다.

• 'avoid' 또는 'always'를 선택할 수 있으며, 디폴트 값은 'avoid'이다.

// option 'avoid'
const func = x => {
    return ''
}

// option 'always'
const func = (x) => {
    return ''
}

 

bracketSpacing: 객체 리터럴에서 괄호와 텍스트 사이에 스페이스를 넣을 것인지 지정한다.

• boolean 형태의 값을 가지고 있으며 디폴트는 true이다.

const obj = { key : 'value' } // true
const obj = {key : 'value'} // false

 

jsxBracketSameLine: JSX 요소의 닫는 괄호가 다음 줄에 배치될 것인지를 설정하는 옵션

• false (기본값)이면, JSX 요소의 닫는 괄호는 다음 줄에 배치
• true로 설정된 경우, 닫는 괄호는 마지막 속성과 같은 줄에 위치

 <button
     className="prettier-class"
     id="prettier-id"
     onClick={this.handleClick}>
    Click Here
</button> // true


<button
    className="prettier-class"
    id="prettier-id"
    onClick={this.handleClick}
    >
    Click Here
</button> // false (기본값)

 

jsxSingleQuote: JSX 속성에서 작은따옴표(')를 사용할 것인지를 결정한다.

• 기본값은 false로 큰따옴표를 사용

<Component prop1="value1" prop2="value2" />;
// false (기본값)

<Component prop1='value1' prop2='value2' />;
// true

 

printWidth: Prettier 설정의 한 옵션으로, 한 줄에 들어가는 최대 문자 수를 지정한다.

• printWidth는 코드의 가독성을 유지하는 데 중요한 설정인데, 만약 한 줄이 너무 길어지면, 코드를 읽는 사람이 가로 스크롤을 해야 하거나, 화면을 가로로 분할해야 할 수도 있어 코드의 가독성이 떨어지기 때문이다.
• 기본값은 80이며 한 줄에 최대 80개의 문자가 들어갈 수 있다

// 설정이 적용되지 않은 함수의 경우 매우 길게 늘어지기 때문에 가독성이 떨어진다
const veryVeryLongFunc = (parameter1, parameter2, parameter3, parameter4, parameter5) => {
    return ''
}

// 기본값으로 적용 됐을 때의 코드
const veryVeryLongFunc = (
    parameter1, 
    parameter2, 
    parameter3, 
    parameter4, 
    parameter5
) => {
    return ''
}

 

quoteProps: , JavaScript 객체 속성의 따옴표를 어떻게 처리할지를 결정한다.

• "as-needed": 따옴표가 필요한 경우에만 속성에 따옴표를 사용한다. 예를 들어, 속성 이름에 공백이 포함되어 있는 경우에 사용한다.
• "consistent": 객체의 모든 속성에 대해 일관된 따옴표를 사용한다. 즉, 하나의 속성에 따옴표를 사용해야 하는 경우, 다른 모든 속성에도 따옴표를 사용한다.
• "preserve": 입력 소스코드에 있는 따옴표를 그대로 유지한다.

// as-needed: quote를 감싸지 않으면 안되는 문자("-")등이 있으면 해당 key name을 제외하고 모든 qoute를 제거
const obj = {
    'x-x-x': {},
    yy: 123,
    abCde: 'text',
}

//consistent: quote를 감싸지 않으면 안되는 문자("-")등이 있으면 모든 key name에 qoute를 적용한다
const obj = {
    'x-x-x': {},
    'yy': 123,
    'abCde': 'text',
}

// preserve: 객체의 Syntax에 맞다면 사용자가 입력한 그대로 quote를 적용
const obj = {
    'x-x-x': {},
    yy: 123,
    abCde: 'text',
}

 

vueIndentScriptAndStyle: , Vue 파일 내의 <script>와 <style> 태그의 내용을 들여 쓸지 여부를 설정하는 옵션

• true: <script>와 <style> 태그 내부를 들여 쓴다.
• false (기본값): 들여 쓰지 않는다.

<script>
// 태그 내용이 들여쓰기로 시작되지 않는다 (기본값)
export default {
    mounted() {
        console.log("Heollo World");
    }
};
</script>

<style>
body {
    display: block;
}
</style>




<script>
// 태그 내용이 들여쓰기로 시작된다
    export default {
        mounted() {
            console.log("Heollo World");
        }
    };
</script>
<style>
    body {
        display: block;
    }
</style>

 

endOfLine: 개행문자의 형식을 결정하는 옵션으로 주로 다른 운영체제 간의 개행 문자 차이를 일관성 있게 유지하려는 경우에 사용된다.

• auto: 개행문자를 현재 운영체제에 맞게 설정한다.
• lf: 개행문자를 '\n'으로 설정한다. 대부분의 유닉스 시스템과 macOS에서 사용한다.
• crlf: 개행문자를 '\r\n'으로 설정한다. 윈도우에서 사용한다.
• cr: 개행문자를 '\r'로 설정한다. 이 옵션은 매우 드물게 사용된다.

 

htmlWhitespaceSensitivity: Prettier 설정에서 HTML 파일의 공백 민감도를 설정하는 옵션으로, HTML에서는 공백 문자가 종종 무시되거나 다르게 처리되기 때문에, 이 설정은 HTML 코드의 의도한 형식을 유지하는데 중요하게 작용될 수 있다.

• "ignore": 공백을 무시한다. 기본값
• "strict": 모든 공백을 보존한다.
• "css": CSS의 white-space 속성에 따라 공백을 보존한다.

 

proseWrap: , markdown 파일에서 문장이 어떻게 줄 바꿈 될 것인지를 결정하며 v1.8.2 이상부터 사용이 가능하다.

• "always": Prettier는 printWidth를 준수하도록 문장을 강제로 줄 바꿈 한다.
• "never": Prettier는 문장의 줄 바꿈을 강제하지 않는다.
• "preserve": Prettier는 원래의 줄바꿈을 그대로 유지한다. ( v1.9.0부터 사용이 가능하다)

 

semi: 문장 끝에 세미콜론을 넣을 것인지 지정한다.

• 기본값은 true

 

singleQuote: 작은따옴표(')를 사용할 것인지 큰 따옴표(")를 사용할 것인지 지정한다.

• 디폴트는 false

 

tabWidth: 한 탭이 몇 개의 스페이스에 해당하는지 지정한다.

• 디폴트는 2 (일반 워드 파일이나 에디터 같은 도구에서 탭 한 번으로 들여쓰기 되는 크기 = 4)

 

trailingComma: 객체나 배열 등에서 마지막 항목 뒤에 컴마를 사용할 것인지 지정한다.

• es5: 유효한 곳에서 허용하도록 설정하며, 타입스크립트의 함수 파라미터에는 허용되지 않는다.
• none: 기본값으로 적용되며 모든 곳에서 허용하지 않도록 한다.
• all: 허용 가능한 모든 곳에서 적용한다.

 

useTabs: 공백(스페이스바) 대신 탭을 사용하여 들여쓰기를 할지 여부를 설정한다.

• true: 탭을 사용하여 들여쓰기를 한다.
• false (기본값): 공백을 사용하여 들여쓰기를 한다.