vue文件代碼縮進以及格式化代碼方式[自定義]

更新時間：2024年03月18日 17:15:47 作者：終究是半圈

這篇文章主要介紹了vue文件代碼縮進以及格式化代碼方式[自定義],具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue文件代碼縮進及格式化代碼[自定義]

文件->首選項->設置->

找到setting.json 替換以下內(nèi)容。

{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 3000,
    "files.associations": {
        "vue-html": "html",
        "vue": "html"
    },
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "editor.detectIndentation": false,
    "window.zoomLevel": 0,
    "npm.enableRunFromFolder": true,
    "vetur.format.options.tabSize": 4,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    }
}

vue項目中常用的格式化代碼

1.首先在Vscode編輯器中，同時按下 Shift + Ctrl + P，

2.在出現(xiàn)的搜索框中輸入settings后，按下Enter鍵，

3.在出現(xiàn)的settings.json中粘貼如下代碼。

{
  "git.enableSmartCommit": true,
  // 修改注釋顏色
  "editor.tokenColorCustomizations": {
    "comments": {
      "fontStyle": "bold",
      // "foreground": "#82e0aa"
    }
  },
  // 配置文件類型識別
  "files.associations": {
    "*.js": "javascript",
    "*.json": "jsonc",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "extensions.ignoreRecommendations": false,
  "files.exclude": {
    "**/.DS_Store": true,
    "**/.git": true,
    "**/.hg": true,
    "**/.svn": true,
    "**/CVS": true,
    "**/node_modules": false,
    "**/tmp": true
  },
  // "javascript.implicitProjectConfig.experimentalDecorators": true,
  "explorer.confirmDragAndDrop": false,
  "typescript.updateImportsOnFileMove.enabled": "prompt",
  "git.confirmSync": false,
  "editor.tabSize": 2,
  "editor.fontWeight": "500",
  "[json]": {},
  "editor.tabCompletion": "on",
  "vsicons.projectDetection.autoReload": true,
  // "editor.fontFamily": "Monaco, 'Courier New', monospace, Meslo LG M for Powerline",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "editor.fontSize": 16,
  "debug.console.fontSize": 14,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.minimap.enabled": true,
  "emmet.extensionsPath": [
    ""
  ],
  // vue eslint start 保存時自動格式化代碼
  "editor.formatOnSave": true,
  // eslint配置項，保存時自動修復錯誤
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "vetur.ignoreProjectWarning": true,
  // 讓vetur使用vs自帶的js格式化工具
  // uni-app和vue 項目使用
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.semicolons": "remove",
  // // 指定 *.vue 文件的格式化工具為vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // // 指定 *.js 文件的格式化工具為vscode自帶
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  // // 默認使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.jsxBracketSameLine": true,
  // 函數(shù)前面加個空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  // eslint end
  // react
  // 當按tab鍵的時候，會自動提示
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.includeLanguages": {
    // jsx的提示
    "javascript": "javascriptreact",
    "vue-html": "html",
    "vue": "html",
    "wxml": "html"
  },
  // end
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // @路徑提示
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "git.ignoreMissingGitWarning": true,
  "editor.fontSize": 15,
  "window.zoomLevel": 1.5,
}

之后保存，即可。