vscode 사용 Prettier 플러그 인 포맷 설정 사용 코드 상세 설명

레 퍼 런 스
ESLint+Prettier 를 사용 하여 전단 코드 스타일 을 통일 합 니 다.
vscode 설정 vue+vetur+eslint+prettier 자동 포맷 기능
문제 설명

최근 Nodejs+express 로 zip 파일 업로드 기능 을 썼 습 니 다.코드 는 다른 사람 에 게 보 여 주 었 습 니 다.각종 토 크,코드 가 규범 에 맞지 않 고 eslint 에 따 르 지 않 았 습 니 다.편집기 가 열 리 면 각종 빨간색 알림 입 니 다.물론 다른 것 도 많 습 니 다.

첫 번 째 반응 은 바로 반감 입 니 다.나중에 냉정 하 게 생각해 보 세 요.아니면 자신 이 일 하 는 태도 에 문제 가 있 습 니까?기능 을 다 했 는데 95%를 완 성 했 습 니 다.왜 마지막 단계 까지 원 키 로 포맷 하지 않 고 100%를 했 습 니까?반성 중

앞으로 코드 가 아름 답 고 남 들 이 토로 하지 않도록 vscode+prettier 를 스스로 정 리 했 습 니 다.
1.vscode 를 사용 하여 prettier 플러그 인 설치

2.파일 만 들 기.prettierrc.js

module.exports = {
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true, //      
 "printWidth": 200, //        
 "htmlWhitespaceSensitivity": "ignore",
 "semi": false, //       
 "disableLanguages": ["vue"] //     vue  ，vue          
};

인터넷 에서 vscode 에 prettier 를 설정 한 것 을 찾 아 보 았 는데 효과 가 없 으 면 너무 많은 프레젠테이션 을 하지 않 습 니 다.
why prettier?
개인 적 인 이 해 를 말씀 드 리 겠 습 니 다.

포맷 의 범위 가 더욱 넓 고 HTML,CSS,JavaScript,ES6(Class 의 쓰기),JSX,typescript;prettier 응용 이 더욱 광범 위 하 다

eslint 의eslint fix all auto-fixable problems도 eslint 규범 에 부합 되 는 코드 를 자동 으로 수정 하 는 데 편리 하고 차이 가 크 지 않다

.

vetur 는 vue 파일 에 적합 하고 사용 에 한계 가 있 습 니 다

공 구 는 자신의 습관 에 맞 게 손 에 익 으 면 된다.
Prettier 설정 파일 형식

루트 디 렉 터 리 는.prettierrc 파일 을 만 들 고 YML,JSON 의 설정 형식 을 기록 할 수 있 으 며.Yml/.yml/.json/.js 접 두 사 를 지원 합 니 다.

루트 디 렉 터 리 생 성.prettierrc.js파일 및 대외 export 대상

module.exports = {
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true, //      
 "printWidth": 200, //        
 "htmlWhitespaceSensitivity": "ignore",
 "semi": false, //       
 "disableLanguages": ["vue"] //     vue  ，vue          
 "trailingComma": "none" //          
};

js 파일 을 프로필 로 사용 하 는 것 을 추천 합 니 다.설정 파일 에 설명 을 쓰 면 이해 하기 쉽 습 니 다.
3..prettierrc.json에 prettier 속성 을 새로 만 듭 니 다.

{
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true,
 "semi": false
}

json 파일 에 주석 을 쓸 수 없습니다.
Prettier 설정 파일 속성 설명

{
 //               
 "[html]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[css]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[less]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[javascript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },

 /* prettier    */
 "prettier.printWidth": 100, //        
 "prettier.tabWidth": 4, //      
 "prettier.useTabs": false, //      tab，    
 "prettier.semi": true, //       
 "prettier.singleQuote": true, //           
 "prettier.proseWrap": "preserve", //    。                （ GitHub comment）   markdown        
 "prettier.arrowParens": "avoid", // (x) => {}                   。avoid：    
 "prettier.bracketSpacing": true, //    ，             "{ foo: bar }"
 "prettier.disableLanguages": ["vue"], //     vue  ，vue          
 "prettier.endOfLine": "auto", //     
 \r 
\r auto
 "prettier.eslintIntegration": false, //  prettier  eslint         
 "prettier.htmlWhitespaceSensitivity": "ignore",
 "prettier.ignorePath": ".prettierignore", //    prettier            .prettierignore   
 "prettier.jsxBracketSameLine": false, //  jsx  '>'      
 "prettier.jsxSingleQuote": false, //  jsx           
 "prettier.parser": "babylon", //        ，   babylon
 "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
 "prettier.stylelintIntegration": false, //  prettier  stylelint         
 "prettier.trailingComma": "es5", //                    （ ES5     ）
 "prettier.tslintIntegration": false //   prettier  tslint         
}

문제 정리
Vue 파일 포맷 후 보고space-before-function-paren오류?
인터넷 에서 prettier 를 찾 아 직접 해결 방법 을 수정 하려 고 하 는데 없 으 면 다른 길 을 개척 할 수 밖 에 없다 는 것 을 알 게 되 었 습 니 다.다음은 제 가 정리 한 것 입 니 다.
1.eslint 플러그 인 설치

2.prettier 플러그 인 으로 포맷 하기
3.script 코드 에 마 우 스 를 넣 고 -> -> eslint fix all auto-fixable problems포맷
Vue 파일 의 HTML>끝 기호 줄 바 꾸 기?
1.설정 파일.prettierrc.js의 printWidth 속성 을 최대 길이 로 설정 하고 html 를 같은 줄 에 두 도록 합 니 다.html 가 너무 길 면 줄 을 바 꾸 는 것 도 존재 합 니 다.아주 적은 수 동 으로 수정 할 수 있 습 니 다.

module.exports = {
 "printWidth": 200, //        
};

포맷 함수 의 마지막 인자 뒤에 쉼표 가 있 습 니까?
쉼표 뒤 따 르 기 Trailing Commas
여러 줄 일 때 가능 한 한 꼬리 쉼표 를 인쇄 합 니 다.(예 를 들 어 한 줄 의 배열 은 쉼표 를 따 르 지 않 는 다.)

module.exports = {
	"trailingComma": "none" //          
};

유효한 옵션:
"none"-쉼표 를 따 르 지 않 았 습 니 다.
"es5"-ES5 에서 유효한 꼬리 쉼표(대상,배열 등)
"all"-가능 한 한 꼬리 쉼표(함수 인자 포함)를 사용 하 십시오.nodejs 8 이 필요 합 니 다.
JSX>엔 딩 기호 줄 바 꾸 기?JSX Brackets
>여러 줄 JSX 요 소 를 마지막 줄 의 끝 에 두 고 다음 줄 에 두 지 않 습 니 다(자 폐 요소 에는 적용 되 지 않 습 니 다).
기본 CLIAPI/.prettierrc/prettier.config.js/package.json["prettier"]
false--jsx-bracket-same-linejsxBracketSameLine:

module.exports = {
	"jsxBracketSameLine": true, //  jsx  '>'       
};

유효한 옵션:
true-예시:

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

false-예시:

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

총결산
vscode 에서 Prettier 플러그 인 을 사용 하여 설정 을 포맷 하 는 데 사용 되 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 vscode 에서 Prettier 플러그 인 을 사용 하여 설정 내용 을 포맷 하 는 것 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!