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

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

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

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

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

找到setting.json 替換以下內容。

{
    "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,
}

之后保存，即可。

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3.0報錯Cannot?find?module‘worker_threads‘的解決辦法
這篇文章介紹了vue3.0報錯Cannot?find?module‘worker_threads‘的解決辦法。對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-11-11
Vue+SpringBoot開發(fā)V部落博客管理平臺
V部落是一個多用戶博客管理平臺。這篇文章主要介紹了Vue+SpringBoot開發(fā)V部落博客管理平臺,需要的朋友可以參考下
2017-12-12
vue3+element-plus+vite實現(xiàn)動態(tài)路由菜單方式
文章詳細介紹了如何使用Vite搭建一個Vue 3 TypeScript項目,并配置了路由、狀態(tài)管理、插件和環(huán)境,項目結構包括路由持久化、白名單、動態(tài)路由和權限控制,此外,還模擬了一個后端返回的路由數(shù)據(jù)文件
2025-01-01
詳解如何添加babel?polyfill
這篇文章主要介紹了詳解vue如何添加babel?polyfill實現(xiàn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
VueQuillEditor富文本上傳圖片(非base64)
這篇文章主要介紹了VueQuillEditor富文本上傳圖片(非base64),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-06-06
Vue前端高效開發(fā)之列表渲染指令
這篇文章主要給大家介紹了關于Vue前端高效開發(fā)之列表渲染指令的相關資料,vue.js 使用的是 v-for 指令來處理組件元素的循環(huán)迭代邏輯,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2021-06-06
將vue項目打包成電腦端應用.exe的完整步驟
最近接了個小活,其中甲方要求把vue項目打包成exe安裝在windows上,其中有也會出現(xiàn)一些小問題和優(yōu)化,特此記錄,這篇文章主要給大家介紹了關于將vue項目打包成電腦端應用.exe的完整步驟,需要的朋友可以參考下
2023-10-10
vue項目中axios配置方式(代理配置)
這篇文章主要介紹了vue項目中axios配置方式(代理配置),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue3中的toRef和toRefs的區(qū)別和用法示例小結
toRef和toRefs可以用來復制reactive里面的屬性然后轉成 ref,它保留了響應式,也保留了引用,也就是你從 reactive 復制過來的屬性進行修改后,除了視圖會更新,原有 ractive 里面對應的值也會跟著更新,本文介紹Vue3中toRef和toRefs的區(qū)別和用法,需要的朋友可以參考下
2024-08-08
axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作
這篇文章主要介紹了axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11