需要插件: 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)聲明
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載。
THE END
喜歡就支持一下吧
相關(guān)推薦