vue 프로젝트 Ctrl + s vscode 코드 자동 포맷

머리말
다 중 개발 vue 프로젝트, 코드 스타일 형식 이 다 릅 니 다.
vscode 코드 저장, 자동 으로 eslint 규범 에 따라 포맷 코드 설정 (vscode 최신 버 전 설정)
vscode 플러그 인
우선 vscode 는 vscode 플러그 인 을 설치 해 야 합 니 다.
ESLint、Vetur、Prettier-Code formatter、GitLens-Git supercharged
settings. json 설정
settings. json 을 열 고 설정 을 붙 이 고 기 존의 vscode 테마 와 글꼴 등 을 바 꾸 지 않도록 주의 하 십시오.
열기 모드
방식 1:
1) 파일 ---. > [첫 번 째 옵션] --- --- - > [설정]
2) emmet. include 검색 하기;
3) settings. json 의 [작업 영역 설정] 에 추가
방식 2:
Ctrl + P 검색 settings. json
아래 설정 을 붙 입 니 다

{
  "window.zoomLevel": 0,
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.colorTheme": "One Monokai",
  "editor.fontSize": 14,
  "workbench.editor.enablePreview": true, //      
  "editor.formatOnSave": true, // #            
  //     
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "eslint.enable": true, //    vscode eslint
  // vscode               tabsize   
  "editor.detectIndentation": false,
  //     tabsize
  "editor.tabSize": 2,
  //  #          
  "prettier.semi": false,
  //  #           
  "prettier.singleQuote": true,  
  //  # prettier  eslint          
  "prettier.eslintIntegration": true,
  "javascript.preferences.quoteStyle": "double",
  "typescript.preferences.quoteStyle": "double",
  //  #   ( )            
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  //    ESLint        
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ],
  "eslint.options": { //  vscode eslint         
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  }, 
  "git.enableSmartCommit": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  //    vutur.defaultFormatterOptions     ，    prettier               ，  perttier     vue  （          vue         ）
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, //        
      "singleQuote": true, //          
    },
    "js-beautify-html": {
      // force-aligned | force-expand-multiline vue html     
      "wrap_attributes": "force-aligned",//"auto","force-expand-multiline"
      "wrap_line_length": 200,
      "wrap_width_line": false,
      "semi": false,
      "singleQuote": true,
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    },
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "javascript.updateImportsOnFileMove.enabled": "never",
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "workbench.editor.showTabs": true,
  "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressResultsExplorerNotice": false,
        "suppressShowKeyBindingsNotice": true,
        "suppressUpdateNotice": false,
        "suppressWelcomeNotice": true
    },
    "gitlens.keymap": "alternate",
    "git.enableSmartCommit": true,
    "gitlens.historyExplorer.enabled": true,
    "gitlens.views.fileHistory.enabled": true,
    "gitlens.views.lineHistory.enabled": true,
}

vue 프로젝트 Ctrl + s vscode 코드 자동 포맷