당신의 코드를 아름답게 만들기 위해 vscode Prettier 옵션의 16가지 실용적인 속성을 살펴보세요!

이 글은 vscode Prettier의 옵션을 살펴보고, 코드를 아름답게 만드는 16가지 속성을 요약하고 공유합니다. 모두에게 도움이 되길 바랍니다!

저는 오랫동안 프런트엔드 개발을 해왔지만 통일된 스타일로 코드를 작성하기 위해 스캐폴딩이나 오픈 소스 코드 템플릿에 의존할 때마다 마음에 들지 않는 작업을 접하게 됩니다. 어떻게 조정해야 할지 모르겠습니다. Baidu는 여러 번 시도한 후에도 바로 적용할 수 없으므로 이번에는 Prettier의 옵션을 살펴보고 널리 사용되는 이 도구를 이해하겠습니다. 코드 서식 지정 시나리오(20,533,053개 설치)에서 한 번에. [추천 학습: "vscode 입문 튜토리얼"]

예쁜 소개 및 사용 구성:

Prettier는 보다 적은 구성으로 코드 서식을 위한 여러 프로그래밍 언어를 지원하는 도구이며, 플러그인은 가장 일반적으로 사용되는 편집기에 통합되어 제공됩니다.

　 기사 마지막에 제공된 플러그인 주소를 사용하거나 스토어에서 VSCode로 검색하여 다운로드량이 가장 많은 플러그인을 찾을 수 있습니다. 플러그인을 설치한 후 프로젝트 루트 디렉터리에 있는 .prettierrc 파일을 구성하여 사용자 정의에 맞는 스타일을 구성할 수 있습니다. 파일 내용에는 JSON 형식 조합을 사용하는 것이 좋습니다. 물론, 다른 구성 파일 이름 지정 및 작성 방법도 지원됩니다. 원본 문서의 해당 주소도 기사 끝 부분에 제공됩니다. 기본 포맷터를 .prettierrc文件来配置一份符合我们自定义的风格，文件内容推荐使用JSON格式组合。当然也支持其他的一个配置文件命名和书写方式，文末也提供了原文档对应的地址，记得要将默认的格式化程序选择为Prettier。

     在这还推荐在项目下配置VSCode中保存时格式化代码，并在窗口状态变化是自动保存，因为过多的保存可能会造成不必要的麻烦。

属性介绍：

Print Width：

• 介绍和说明：代码行的宽度，通用建议每行最大长度建议为100/120，但最好不超过这两个数。
• API：printWidth
• 参数类型：int
• 默认值：80

Tab Width：

• 介绍和说明：指定每次缩进的空格数。
• API：tabWidth
• 参数类型：int
• 默认值：2

Tabs：

• 介绍和说明：是否用制表符代替空格执行缩进。
• API：useTabs
• 参数类型：bool
• 默认值：false

Semicolons：

• 介绍和说明：是否在代码语句结尾添加分号。
• API：semi
• 参数类型：bool
• 默认值：true

Quotes

• 介绍和说明：是否使用单引号，JSX单独设置。
• API：singleQuote
• 参数类型：bool
• 默认值：false

JSX Quotes

• 介绍和说明：是否在JSX中使用单引号。
• API：jsxSingleQuote
• 参数类型：bool
• 默认值：false

Trailing Commas

• 介绍和说明：在多行以逗号分割的句法中尽可能补充尾行逗号。
• API：trailingCommaPrettier
로 선택하세요.
• 

 여기에서도 권장됩니다. 프로젝트 하위 VSCode에 저장할 때 포맷할 코드를 지정하고, 너무 많이 저장하면 불필요한 문제가 발생할 수 있으므로 창 상태가 변경되면 자동으로 저장됩니다. 속성 소개:

인쇄 너비: 소개 및 설명: 코드 줄의 너비, 일반적인 권장 사항은 최대값입니다. 각 줄의 길이는 100/120이지만 이 두 숫자를 초과하지 않는 것이 가장 좋습니다. API: printWidth매개변수 유형: int기본값: 80

탭 너비:

소개 및 설명: 들여쓰기마다 공백 수를 지정하세요. 🎜🎜API: tabWidth🎜🎜매개변수 유형: int🎜🎜기본값: 2🎜🎜

🎜Tabs: 🎜

🎜 소개 및 설명: 공백 대신 탭으로 들여쓰기를 수행할지 여부입니다. 🎜🎜API: useTabs🎜🎜매개변수 유형: bool🎜🎜기본값: false🎜🎜

🎜세미콜론: 🎜

🎜 소개 및 설명: 코드 문의 끝에 세미콜론을 추가할지 여부입니다. 🎜🎜API: semi🎜🎜매개변수 유형: bool🎜🎜기본값: true🎜🎜

🎜Quotes🎜

🎜소개 그리고 설명: 작은따옴표 사용 여부는 JSX에서 별도로 설정합니다. 🎜🎜API: singleQuote🎜🎜매개변수 유형: bool🎜🎜기본값: false🎜🎜

🎜JSX Quotes🎜

🎜 소개 및 설명: JSX에서 작은따옴표를 사용할지 여부. 🎜🎜API: jsxSingleQuote🎜🎜매개변수 유형: bool🎜🎜기본값: false🎜🎜

🎜후행 쉼표🎜

🎜 소개 및 설명: 여러 줄로 구성된 쉼표로 구분된 구문에서는 가능할 때마다 뒤에 쉼표를 추가하세요. 🎜🎜API: trailingComma🎜🎜매개변수 유형: es5/none/all🎜🎜기본값: es5🎜🎜🎜🎜🎜🎜es5🎜🎜ES5에서 보완됨(객체, 배열)🎜 🎜🎜🎜 🎜🎜없음🎜🎜보충 없음🎜🎜🎜🎜all🎜🎜함수 매개변수, 함수 호출, 지원 TS🎜🎜🎜🎜를 포함하여 최대한 보충합니다.

Bracket Spacing

• 소개 및 설명: 개체 속성과 중괄호 사이의 공백을 채울지 여부입니다.
• API: bracketSpacingbracketSpacing
• 参数类型：bool
• 默认值：true

Bracket Line

• 介绍和说明：开始标签的右尖括号是否跟随在最后一行属性末尾。
• 前提：非自结束标签、HTML多行属性（HTML, JSX, Vue, Angular）
• API：bracketSameLine
• 参数类型：bool
• 默认值：false

Arrow Function Parentheses

• 介绍和说明：单个参数的箭头函数使用括号。
• API：arrowParens
• 参数类型：always / avoid
• 默认值：always

Require Pragma

• 介绍和说明：是否仅格式化文件开始位置存在特殊注释的代码。
• API：requirePragma
• 参数类型：bool
• 默认值：false

/**
 * @prettier
 */
 or
/**
 * @format
 */

Insert Pragma

• 介绍和说明：是否在文件插入标记表明该文件已被格式化处理过了。
• API：insertPragma
• 参数类型：bool
• 默认值：false

Vue files script and style tags indentation

• 介绍和说明：是否在Vue文件中对代码和标签进行缩进，script和style部分。
• API：vueIndentScriptAndStyle
• 参数类型：bool
• 默认值：false

End of Line

• 介绍和说明：设置换行风格，避免不同操作系统造成的大量代码diff。
• API：endOfLine
• 参数类型：lf / crlf / cr / auto
• 默认值：lf

Embedded Language Formatting

• 介绍和说明：是否格式化一些文件中被嵌入的代码片段的风格，如果插件可以识别。
• API：embeddedLanguageFormatting
• 参数类型：off / auto
• 默认值：auto

Single Attribute Per Line

• 介绍和说明：在Html，Vue，JSX中是否强制每条属性占用一行。
• API：singleAttributePerLine
매개변수 유형: bool
• 기본값: true

Bracket Line
소개 및 설명: 시작 레이블의 오른쪽 꺾쇠 괄호가 속성의 마지막 줄 끝에 오는지 여부입니다.
전제 조건: 자체 종료되지 않는 태그, HTML 여러 줄 속성(HTML, JSX, Vue, Angular)

API: bracketSameLine

매개 변수 유형: bool
• 기본값: false

화살표 함수 괄호
소개 및 설명: 단일 매개변수 화살표 함수는 괄호를 사용합니다.

• API: arrowParens

매개변수 유형: Always/avoid

• 기본값: Always

Pragma 필요


소개 및 설명 : 형식 파일 시작 부분에 특수 주석을 사용하여 코드만 형식화할지 여부입니다.

🎜API: requirePragma🎜🎜매개변수 유형: bool🎜🎜기본값: false🎜🎜rrreee

🎜Insert Pragma🎜🎜🎜🎜소개 및 설명: 파일에 표시를 삽입할지 여부는 파일의 형식이 지정되었음을 나타냅니다. 🎜🎜API: insertPragma🎜🎜매개변수 유형: bool🎜🎜기본값: false🎜🎜

🎜Vue 파일 스크립트 및 스타일 태그 들여쓰기🎜🎜🎜🎜 소개 및 설명: Vue 파일, 스크립트 및 스타일 섹션에서 코드와 태그를 들여쓸지 여부입니다. 🎜🎜API: vueIndentScriptAndStyle🎜🎜매개변수 유형: bool🎜🎜기본값: false🎜🎜

🎜End of Line🎜🎜🎜🎜소개 및 설명: 다양한 운영 체제로 인해 발생하는 많은 코드 차이를 방지하려면 개행 스타일을 설정하세요. 🎜🎜API: endOfLine🎜🎜매개변수 유형: lf/crlf/cr/auto🎜🎜기본값: lf🎜🎜

🎜내장 언어 형식🎜🎜 🎜🎜소개 및 설명: 플러그인이 인식할 수 있는 경우 일부 파일에 포함된 코드 조각의 스타일 형식을 지정할지 여부입니다. 🎜🎜API: embeddedLanguageFormatting🎜🎜매개변수 유형: off / auto🎜🎜기본값: auto🎜🎜

🎜한 줄당 단일 속성🎜🎜🎜🎜소개 설명: Html, Vue 및 JSX에서 각 속성이 한 줄을 차지하도록 강제할지 여부입니다. 🎜🎜API: singleAttributePerLine🎜🎜매개변수 유형: bool🎜🎜기본값: false🎜🎜🎜🎜최종 작성: 🎜🎜🎜정렬 후 서둘러 저장해 두세요. 속성 사용법은 잊어버리세요. 시간이 되면 이 글을 읽어보세요. 이제 4월 글 업데이트 챌린지가 끝났습니다. jym의 좋아요와 격려에 감사드립니다. 🎜🎜🎜링크 정리: 🎜🎜🎜🎜🎜Prettier: https://prettier.io/🎜🎜🎜🎜Prettier(vscode 플러그인): https://marketplace.visualstudio.com/items?itemName=esbenp.prettier -vscode 🎜🎜🎜🎜구성 파일: https://prettier.io/docs/en/configuration.html 🎜🎜🎜🎜온라인 디버깅: https://prettier.io/playground/🎜🎜🎜🎜VSCode 관련 추가 지식 , 방문해주세요: 🎜vscode 튜토리얼🎜! ! 🎜🎜

위 내용은 당신의 코드를 아름답게 만들기 위해 vscode Prettier 옵션의 16가지 실용적인 속성을 살펴보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!