vscode怎么支持vue

vscode怎么支持vue

需要插件: ESLint,Prettier – Code formatter,Vetur

打開(kāi)用戶(hù)設(shè)置文件:

//?vscode默認(rèn)啟用了根據(jù)文件類(lèi)型自動(dòng)設(shè)置tabsize的選項(xiàng) ??"editor.detectIndentation":?false, ??//?重新設(shè)定tabsize ??"editor.tabSize":?2, ??//?#每次保存的時(shí)候自動(dòng)格式化 ??"editor.formatOnSave":?true, ??//??#讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格 ??"javascript.format.insertSpaceBeforeFunctionParenthesis":?true, ? ??//??#讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn) ??"prettier.eslintIntegration":?true, ??//??#去掉代碼結(jié)尾的分號(hào) ??"prettier.semi":?false, ??//??#使用帶引號(hào)替代雙引號(hào) ??"prettier.singleQuote":?true, ? ??//?#每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù) ??"eslint.autoFixOnSave":?true, ??//?添加?vue?支持 ??"eslint.validate":?[ ????"javascript", ????"javascriptreact", ????{ ??????"language":?"vue", ??????"autoFix":?true ????} ??], ?? ??//?#這個(gè)按用戶(hù)自身習(xí)慣選擇 ??"vetur.format.defaultFormatter.html":?"JS-beautify-html", ??"vetur.format.defaultFormatter.less":?"prettier", ??"vetur.completion.autoImport":?true, ??"vetur.format.defaultFormatter.js":?"vscode-typescript", ??"vetur.format.defaultFormatterOptions":?{ ????"js-beautify-html":?{ ??????"wrap_attributes":?"force-aligned" ????} ??},

保存代碼自動(dòng)按照eslint格式化。

斷點(diǎn)調(diào)試 (需安裝Debugger for chrome

立即學(xué)習(xí)前端免費(fèi)學(xué)習(xí)筆記(深入)”;

1、在瀏覽器中展示源碼 如果你使用的是 Vue CLI 2,請(qǐng)?jiān)O(shè)置并更新 config/index.js 內(nèi)的 devtool 屬性:

devtool:?'source-map',

如果你使用的是 Vue CLI 3,請(qǐng)?jiān)O(shè)置并更新 vue.config.js 內(nèi)的 devtool 屬性:

module.exports?=?{ ??configureWebpack:?{ ????devtool:?'source-map' ??} }

2、vscode中 點(diǎn)擊在 Activity Bar 里的 Debugger 圖標(biāo)來(lái)到 Debug 視圖,然后點(diǎn)擊那個(gè)齒輪圖標(biāo)來(lái)配置一個(gè) launch.json 的文件,選擇 Chrome/firefox: Launch 環(huán)境。然后將生成的 launch.json 的內(nèi)容替換成為相應(yīng)的配置:

{ ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"type":?"chrome", ??????"request":?"launch", ??????"name":?"vuejs:?chrome", ??????"url":?"http://localhost:8080", ??????"webRoot":?"${workspaceFolder}/src", ??????"breakOnLoad":?true, ??????"sourceMapPathOverrides":?{ ????????"webpack:///src/*":?"${webRoot}/*" ??????} ????}, ????{ ??????"type":?"firefox", ??????"request":?"launch", ??????"name":?"vuejs:?firefox", ??????"url":?"http://localhost:8080", ??????"webRoot":?"${workspaceFolder}/src", ??????"pathMappings":?[{?"url":?"webpack:///src/",?"path":?"${webRoot}/"?}] ????} ??] }

推薦教程:vscode教程

以上就是

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊7 分享
站長(zhǎng)的頭像-小浪學(xué)習(xí)網(wǎng)月度會(huì)員