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統(tǒng)一源碼格式，所以還要對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,?//?讓函數(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對應的點
- 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語言開發(fā)，所以還要針對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設置，包括插件，主題一切用戶數(shù)據
-
SVG Viewer 預覽SVG
-
Todo Tree 顯示你代碼里面的TODO列表
-
translate 翻譯
-
Tslint ts代碼格式檢測工具
-
Version Lens npm version檢測
-
vscode-fileheader 生成文檔注釋頭
-
JavaScript (ES6) code snippets es代碼片段
-
Copy Relative Path 復制相對路徑
更多編程相關知識，請訪問：vscode教程！！
