VSCode中如何配置vue

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

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

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

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

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

配置格式化

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

可以看到j(luò)s的格式化引擎默認使用的是prettier

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

安裝eslint和prettier擴展

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

npm install -g eslint

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

{
  "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, // 每次保存的時候?qū)⒋a按eslint格式進行修復(fù)
  "prettier.eslintIntegration": true, // 讓prettier使用eslint的代碼格式進行校驗
  "prettier.semi": false, // 去掉代碼結(jié)尾的分號
  "prettier.singleQuote": true, // 使用帶引號替代雙引號
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 讓函數(shù)(名)和后面的括號之間加個空格
  "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對應(yīng)的點

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

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

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

• cssrem 一個CSS值轉(zhuǎn)REM的VSCode插件

html字體我這邊設(shè)計是使用14px，所以轉(zhuǎn)的時候，對應(yīng)關(guān)系應(yīng)該是 1rem = 14px，所以要在用戶設(shè)置里面進行配置

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

• Vue Peek 右鍵打開或預(yù)覽引用的組件

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

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

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

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

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

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

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

• Path Intellisense 路徑引入智能感知

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

• RegExp Preview and Editor 正則表達式預(yù)覽和編輯

• Settings Sync 同步你的vscode設(shè)置，包括插件，主題一切用戶數(shù)據(jù)

• SVG Viewer 預(yù)覽SVG

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

• translate 翻譯

• Tslint ts代碼格式檢測工具

• Version Lens npm version檢測

• vscode-fileheader 生成文檔注釋頭

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

• Copy Relative Path 復(fù)制相對路徑

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