前言

寫了很多代碼，但是亂七八糟，既不美觀也不方便找錯，這時候一鍵自動規范格式功能簡直不能再爽了。下面簡單整理了一下如何在Visual Studio Code配置自動規范代碼格式。

1. 插件安裝

在VSCode的插件庫中搜索 Prettier - Code formatter 插件：

點擊安裝：

2. 配置個性化設置

2.1 在左下角點擊設置按鈕 ，點擊命令面板（或者也可以之間按快捷鍵Ctrl+Shift+P）

2.2 在彈出的搜索框輸入 settings.json，打開首選項：打開工作區設置；

如果想要應用于全部項目，可以選擇打開用戶設置

2.3 在settings.json文件中添加如下配置并保存

{"workbench.sideBar.location": "left","cssrem.rootFontSize": 80,"git.ignoreWindowsGit27Warning": true,"eslint.codeAction.showDocumentation": {"enable": true},//改變注釋顏色// "editor.tokenColorCustomizations": {//   "comments": "#ff4f81" // 注釋// }, //導入文件時是否攜帶文件的擴展名"path-autocomplete.extensionOnlmport": true,//配置@的路徑提示"path-autocomplete.pathMappings": {"@": "${folder}/src"},//配置eslint"eslint.validate": ["javascript", "javascriptreact", "html", "vue"],// "eslint.run": "onSave","editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit"},"editor.mouseWheelZoom": true,"editor.minimap.renderCharacters": false,"debug.javascript.defaultRuntimeExecutable": {"pwa-node": "node"},"open-in-browser.default": "{\"open-in-browser.default\":\"Chrome\"}","files.associations": {"*.cjson": "jsonc","*.wxss": "css","*.wxs": "javascript"},"emmet.includeLanguages": {"wxml": "html"},"minapp-vscode.disableAutoConfig": true,"[python]": {"editor.formatOnType": true},"editor.detectIndentation": false,"explorer.compactFolders": false,// html使用prettier格式化"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[vue]": {// "editor.defaultFormatter": "Vue.volar""editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// json使用prettier格式化"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.tabSize": 2,"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"px2rem.rootFontSize": 64,"px2rem.autoRemovePrefixZero": false,"editor.formatOnSave": true // 保存時自動規范代碼}

2.4 重啟VSCode

重啟后打開代碼，就可以實現點擊Ctrl+s，保存文件的同時自動格式化啦。

如果第一次使用保存時沒有效果，需要按Shift+Alt+F，它會彈出讓你設置默認的格式化程序，設置后后續就能正常使用保存時自動格式化功能啦，記得選第一個選項

3. 不想保存時自動格式化？

把settings.json文件最后一行去掉，按Shift+Alt+F來實現規范代碼，也可以右鍵選擇格式化文檔。

  "editor.formatOnSave": true // 保存時自動規范代碼