더 예쁘게 세팅하는 방법

Prettier란 무엇입니까

Prettier는 JS/JSX/TS/Flow/JSON/CSS/LESS 및 기타 파일 형식을 지원할 수 있는 코드 서식 지정 도구입니다.

Prettier

세미콜론/탭 들여쓰기/공백/따옴표와 같은 Lint 도구에서 문제를 감지한 후 수동으로 수정해야 하는 일부 시나리오를 대체하기 위해 Prettier

를 사용하는 이유 오류는 다음과 같습니다. 모두 공백이나 기호로 인해 발생하므로 상대적으로 우아하지 않습니다. 서식 도구를 사용하여 자동으로 생성하면 시간과 노력이 절약됩니다.

구성을 사용자 정의하는 방법

Prettier는 일련의 기본 구성을 제공하는데, 자체 코드 사양에 맞게 구성 항목을 수정하는 방법은 세 가지가 있습니다.

(1) . prettierrc 파일

(2) prettier.config.js 파일

(3) package.json에서 prettier 속성 구성

Prettier는 구성 파일을 확인하고 파일의 구성을 자동으로 읽습니다. 지금 선택하는 것은 두 번째입니다. 린트툴과 굉장히 비슷한 느낌이죠?

구성 가능한 속성

내 구성 파일 공유

module.exports = {
// tab缩进大小,默认为2
tabWidth: 2,
// 使用tab缩进，默认false
useTabs: true,
// 使用分号, 默认true
semi: false,
// 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
singleQuote: true,
// 行尾逗号,默认none,可选 none|es5|all
// es5 包括es5中的数组、对象
// all 包括函数对象等所有可选
TrailingCooma: "none",
// 对象中的空格 默认true
// true: { foo: bar }
// false: {foo: bar}
bracketSpacing: true,
// JSX标签闭合位置 默认false
// false: <div
//          className=""
//          style={{}}
//       >
// true: <div
//          className=""
//          style={{}} >
jsxBracketSameLine：false,
// 箭头函数参数括号 默认avoid 可选 avoid| always
// avoid 能省略括号的时候就省略 例如x => x
// always 总是有括号
arrowParens: &#39;always&#39;,
}

🎜자세한 내용🎜FAQ🎜을 보려면 PHP 중국어 웹사이트를 방문하세요. 🎜

위 내용은 더 예쁘게 세팅하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!