小編給大家分享一下VSCode中如何配置vue，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創新互聯是一家集網站建設,防城企業網站建設,防城品牌網站建設,網站定制,防城網站建設報價,網絡營銷,網絡優化,防城網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

從官網下載vscode后，安裝打開，提示要安裝中文語言包，按照提示安裝重啟，界面就變成中文界面了。

界面主題使用Materia Theme，界面風格非常干凈，顏色也比較護眼，寫代碼的時候心情也跟著清新起來~

圖標顯示使用Material Icon Theme，文件圖標非常齊全，搭配Materia Theme非常好看

因為我使用的是vue技術棧，所以還要針對vue語法做識別，這里推薦按照Vetur作為語言識別引擎，提供語法識別，格式化，相關提示。

配置格式化

vetur自帶格式化工具，使用的是prettier格式化方案，具體可以看配置，使用ctrl/command + ,打開設置

可以看到js的格式化引擎默認使用的是prettier

但是一般項目都是推薦使用eslint統一源碼格式，所以還要對vuter進行eslint的適配

安裝eslint和prettier擴展

按照eslint擴展提示，要正常使用eslint，還要全局按照eslint

npm install -g eslint

使用自定義配置進行格式化，以下是我的vscode自定義設置

{
  "workbench.iconTheme": "eq-material-theme-icons",
  "workbench.colorTheme": "Material Theme",
  "materialTheme.fixIconsRunning": false,
  "editor.fontSize": 16, // 字體大小
  // 以下是代碼格式化配置
  "editor.formatOnSave": true, // 每次保存的時候自動格式化
  "editor.tabSize": 2, // 代碼縮進修改成2個空格
  "eslint.autoFixOnSave": false, // 每次保存的時候將代碼按eslint格式進行修復
  "prettier.eslintIntegration": true, // 讓prettier使用eslint的代碼格式進行校驗
  "prettier.semi": false, // 去掉代碼結尾的分號
  "prettier.singleQuote": true, // 使用帶引號替代雙引號
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 讓函數(名)和后面的括號之間加個空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //屬性強制折行對齊
    }
  },
  "eslint.validate": [
    //開啟對.vue文件中錯誤的檢查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

每次進行保存的時候都會進行格式化，解放勞動力，效果如下

常用插件

• Auto Rename Tag 改標簽名的時候，自動更改閉合標簽名

• Bookmarks 書簽插件，記錄代碼重點，review的時候更容易get對應的點

• Bracket Pair Colorizer 括號著色，對于多個嵌套的括號對應識別精準

• Change Case 代碼變量聲明時候，可以對已有變量切換成駝峰式，常量式，其他的風格

• Codelf 說起代碼命名我就來氣，他么的編程一半時間就是在想怎么命名更貼切，合適，有了這個神器，雖然說不能解決命名想破腦瓜子的難題，但是至少提供了建議，能更快解決，避免腦瓜子想破

• cssrem 一個CSS值轉REM的VSCode插件

html字體我這邊設計是使用14px，所以轉的時候，對應關系應該是 1rem = 14px，所以要在用戶設置里面進行配置

// 第三方插件cssrem配置
  "cssrem.rootFontSize": 14

• Vue Peek 右鍵打開或預覽引用的組件

• filesize 計算源碼文件大小，并顯示在左下角

• GitLens git歷史查看，提交記錄查看，歷史比較，版本回滾，神器不解析

• Import Cost 計算import引入的文件大小

• IntelliSense for CSS class names in HTML class根據工作空間中找到的定義或通過link元素引用的外部文件，為HTML 屬性提供CSS類名稱完成。

因為我們使用vue語言開發，所以還要針對vue進行一下css的提示配置

"html-css-class-completion.includeGlobPattern": "**/*.{css,html,vue}"

• Live Server 提供對HTML的即時服務預覽，代碼改動即時刷新

• Path Intellisense 路徑引入智能感知

• npm-intellisense npm module 引入智能感知

• RegExp Preview and Editor 正則表達式預覽和編輯

• Settings Sync 同步你的vscode設置，包括插件，主題一切用戶數據

• SVG Viewer 預覽SVG

• Todo Tree 顯示你代碼里面的TODO列表

• translate 翻譯

• Tslint ts代碼格式檢測工具

• Version Lens npm version檢測

• vscode-fileheader 生成文檔注釋頭

• JavaScript (ES6) code snippets es代碼片段

• Copy Relative Path 復制相對路徑

以上是“VSCode中如何配置vue”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！