VSCode中怎麼配置vue，使用Vetur語言識別引擎！

VSCode中怎麼配置vue？針對vue語法做辨識？以下這篇文章為大家介紹一下將Vetur作為語言辨識引擎的方法，讓我們來打造vuers最好用的VSCode吧！

從官網下載vscode後，安裝打開，提示要安裝中文語言包，依照指示安裝重啟，介面就變成中文介面了。 【推薦學習：《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，使用Vetur語言識別引擎！的詳細內容。更多資訊請關注PHP中文網其他相關文章！