前言

多人開發vue專案,程式碼風格形式不一

vscode儲存程式碼，自動按照eslint規範格式化程式碼設定（vscode最新版配置）

vscode外掛

首先vscode需要裝一些vscode外掛

ESLint、Vetur、Prettier-Code formatter、GitLens-Git supercharged

配置settings.json

開啟settings.json，貼上配置，注意自己原有的vscode主題和字型等不要替換掉

開啟方式

方式一:

1)檔案 ------.>【首選項】---------->【設定】

2）搜尋emmet.include;

3）在settings.json下的【工作區設定】中新增

方式二:

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程式碼自動格式化