1、在應(yīng)用商店搜索Prettier并下載

2、下載完成之后點擊擴(kuò)展設(shè)置

?3、點擊右上角json配置文件

?4、在文件中添加如下代碼

 // prettier相關(guān)設(shè)置
  // 使能每一種語言默認(rèn)格式化規(guī)則
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features",
  },

  "editor.formatOnSave": true, // 保存格式化
  // html不換行
  "js-beautify-html": {
    // 換行
    // "wrap_attributes": "force-aligned"
    // 不換行 
    "wrap_attributes": "auto",
    // "wrap_attributes": "aligned-multiple",
  },
  "prettier": {
    "printWidth": 300, // 代碼寬度  js超過 300換行
    "bracketSameLine": true,
    "trailingComma": "none", //禁止隨時添加逗號,這個很重要。找了好久
    "singleQuote": true, // 單引號不自動轉(zhuǎn)換雙引號
    "semi": false, // 不添加分號
    "proseWrap": "preserve", // 代碼超出是否要換行 preserve保留
    "arrowParens": "avoid", // 箭頭函數(shù)一個參數(shù)不加括號
  },
  "files.associations": {
    "*.html": "html"
  },
  "workbench.iconTheme": "vscode-icons",
  "backgroundCover.autoStatus": true,
 
  // 格式化vue文件
  "files.autoSave": "onFocusChange",
  "editor.fontSize": 14,  // 設(shè)置字體
  "editor.tabSize": 2,    // 設(shè)置tab位2個空格，設(shè)置后在頁面可查看.
  "editor.tabCompletion": "on",  // 用來在出現(xiàn)推薦值時，按下Tab鍵是否自動填入最佳推薦值
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.organizeImports": true    // 這個屬性能夠在保存時，自動調(diào)整 import 語句相關(guān)順序，能夠讓你的 import 語句按照字母順序進(jìn)行排列
  },
  "editor.lineNumbers": "on",  // 設(shè)置代碼行號
  "editor.formatOnSave": true,
  "terminal.integrated.shell.osx": "zsh",
  "workbench.iconTheme": "vscode-icons",
  "explorer.confirmDelete": false, 
  // #讓vue中的js按"prettier"格式進(jìn)行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js":"prettier-eslint",
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          // #vue組件中html代碼格式化樣式
          "wrap_attributes": "force-aligned", //也可以設(shè)置為“auto”，效果會不一樣
          "wrap_line_length": 200,
          "end_with_newline": false,
          "semi": false,            "singleQuote": true
        },
        "prettier": {
            "semi": false,
            "singleQuote": true,
            "editor.tabSize": 2
        },
        "prettyhtml": {
            "printWidth": 160,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
  // 設(shè)置編譯器默認(rèn)使用vetur方式格式化代碼
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },

5、如果需要格式化vue文件，建議配合ESLint、Vetur兩個插件一起使用

?一款好用的eslint自動修復(fù)插件：eslint-config文章來源地址http://www.zghlxwxcb.cn/news/detail-662384.html

到了這里，關(guān)于vscode自動格式化插件配置說明（Prettier - Code formatter）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！