vscode+vue怎么添加配置？
vscode+vue不得不用的插件和不得不添加的配置
先吐槽一下：第一次用vscode，真是心酸，要啥沒啥，代碼基本錯誤檢測沒有也就算了，html標簽自動補全也沒有（當然，其實是有的，只是需要用戶自己配置），這些都不能在安裝或者初始化的時候一起裝了嗎，還非得要一個個百度然后找插件，心酸。。。
相關教程推薦：vscode教程
吐槽歸吐槽，會用谷歌百度就是大佬。
立即學習“前端免費學習筆記（深入）”；
文件自動保存設置
vscode的強大之一便是自動編譯，無需刷新頁面，但自動編譯是需要在文檔保存之后進行的，如果懶得在編輯完成后狂按”Ctrl+S”的話就設置文檔自動保存吧。
文件 -> 自動保存
以上是快捷設置的地方，更詳細的設置在vscode設置里面，路徑如下：
文件 -> 首選項 -> 設置，還可以點擊右上角的 “{}” 圖標打開json編輯窗口。在這里還可以設置自動保存的時機。
Html標簽自動補全
之前用其他編輯器（HBuilder、WS、VS等）在寫html代碼時，輸入html標簽前半部分會自動補全后半部分，但是到了vscode就不行了，很是不適應。
vscode自帶安裝的擴展中，Emmet的一大作用就是補全代碼，需要手動設置。
在設置中（兩個設置空間都要配置）添加如下配置代碼即可：
{ "emmet.triggerExpansionOnTab":?true, "files.associations":?{ "*.js":?"html", "*.vue":?"html" } }
?
高亮、語法插件
平時寫的代碼經常會遇到錯誤，但是又不知道哪里錯了，為什么錯了，怎么修改等等，如下圖所示：
?
?出現這類錯誤，我們可以借助這些插件來輔助編碼， Vetur、ESLint和Prettier插件，安裝好這三個插件后進行如下配置：
"editor.lineNumbers":?"on",?//打開行號 ??"editor.quickSuggestions":?{ ????//開啟自動顯示建議 ????"other":?true, ????"comments":?true, ????"strings":?true ??}, ??"editor.tabSize":?2,?//制表符符號eslint ??"editor.formatOnSave":?true,?//保存時自動格式化 ??"eslint.autoFixOnSave":?true,?//保存時自動將代碼按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 ????} ??]
?
如此，使用vscode寫vue便稍微順手一些了 。
下面貼出完整配置：
{ ??"files.autoGuessEncoding":?true, ??"files.autoSave":?"afterDelay",?//自動保存 ??"editor.lineNumbers":?"on",?//打開行號 ??"editor.quickSuggestions":?{ ????//開啟自動顯示建議 ????"other":?true, ????"comments":?true, ????"strings":?true ??}, ??"editor.tabSize":?2,?//制表符符號eslint ??"editor.formatOnSave":?true,?//保存時自動格式化 ??"eslint.autoFixOnSave":?true,?//保存時自動將代碼按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 ????} ??], ??"emmet.triggerExpansionOnTab":?true, ??"files.associations":?{?//要進行html補全的文件 ????"*.js":?"html", ????"*.vue":?"html" ??} }
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
喜歡就支持一下吧
