prettier 에서 줄 을 바 꾸 는 실현 코드 를 자동 으로 포맷 합 니 다.

플러그 인


새.prettierrc 파일 은 루트 디 렉 터 리 에 이것 을 쓰 십시오.
첫 번 째 는 800 자 를 넘 어서 줄 을 바 꾸 는 것 이 고,두 번 째 는 작은 따옴표 이 며,세 번 째 는 끝 에 분 호 를 하지 않 는 것 이다.

vscode 의 설정 파일 settings.json 코드

{
 // vscode               tabsize   
 "editor.detectIndentation": false,
 //     tabsize
 "editor.tabSize": 2,
 // #            
 "editor.formatOnSave": true,
 // //    vue   
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 "eslint.autoFixOnSave": true,
 "vetur.validation.template": false,
 // # prettier  eslint         
 "prettier.eslintIntegration": true,
 // #         
 "prettier.semi": false,
 // #          
 "prettier.singleQuote": true,
 // #   ( )            
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 // #           
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // # vue  js       ts       
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   //   
   // "wrap_attributes": "force-aligned"
   //    
   "wrap_attributes": "aligned-multiple"
  }
 },
 //    stylus,    Manta's Stylus Supremacy  
 "stylusSupremacy.insertColons": false, //       
 "stylusSupremacy.insertSemicolons": false, //       
 "stylusSupremacy.insertBraces": false, //        
 "stylusSupremacy.insertNewLineAroundImports": false, // import      
 "stylusSupremacy.insertNewLineAroundBlocks": false, //           
 "auto-rename-tag.activationOnLanguage": [
  "*"
 ],
 "window.zoomLevel": 0,
 // esli    
 "devDependencies": {
  "babel-eslint": "^10.0.3",
  "eslint": "^4.15.0",
  "eslint-config-airbnb": "^16.1.0",
  "eslint-plugin-jsx-a11y": "^6.0.3",
  "eslint-plugin-react": "^7.12.1",
  "eslint-config-google": "^0.9.1",
  "eslint-config-standard": "^10.2.1",
  "eslint-plugin-html": "^4.0.1",
  "eslint-plugin-import": "^2.8.0",
  "eslint-plugin-node": "^5.2.1",
  "eslint-plugin-promise": "^3.6.0",
  "eslint-plugin-standard": "^3.0.1"
 },
 "http.proxyAuthorization": null,
 "eslint.migration.2_x": "off",
 "workbench.editorAssociations": [],
 "eslint.codeAction.disableRuleComment": {},
 "eslint.codeAction.showDocumentation": {},
 "editor.suggest.snippetsPreventQuickSuggestions": false,
 "files.associations": {
  "*.cjson": "jsonc",
  "*.wxss": "css",
  "*.wxs": "javascript"
 },
 "emmet.includeLanguages": {
  "wxml": "html"
 },
 "minapp-vscode.disableAutoConfig": true,
 "editor.codeActionsOnSave": null,
 "[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[jsonc]": {
  "editor.defaultFormatter": "vscode.json-language-features"
 },
 "[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
}

저장,접미사 이름 을 엽 니 다.vue 파일,오른쪽 단 추 를 누 르 면 문서 형식 입 니 다.

기본 포맷 프로그램 을 누 르 고 Vetur 를 누 르 십시오.


큰 성 과 를 거 두 었 습 니 다.,ctrl+s 자동 포맷,줄 을 바 꾸 지 않 는 방식 입 니 다.
접 두 사 는.js 입 니 다.위 와 같은 절 차 를 사용 하지만 기본 값 은 prettier 를 사용 합 니 다.

라벨 바 꾸 는 거 좋아해요.이거.
vscode 설정 파일 settings 를 엽 니 다.json,찾 아,원 하 는 걸 로 열 면 돼,필요 없 으 면 주석 해.

총결산
prettier 가 줄 을 바 꾸 는 실현 코드 를 자동 으로 포맷 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 prettier 포맷 과 관련 된 줄 바 꾸 기 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!