我們?cè)谶M(jìn)行開(kāi)發(fā)工作時(shí)，選擇一個(gè)順手好用的編輯器是必不可免的, 其中 vscode 就是一個(gè)很好的選擇。它能讓你大部分的工作都在編輯器內(nèi)完成, 大大的提高開(kāi)發(fā)效率~

概述

vscode 內(nèi)置了前端相關(guān)的基礎(chǔ)環(huán)境，如emmet擴(kuò)展。另外的環(huán)境則可以通過(guò)它自己的插件商城來(lái)找到對(duì)應(yīng)的插件。比如常見(jiàn)的預(yù)處理器的語(yǔ)法高亮。同時(shí)它有良好成熟的生態(tài)圈, 足夠滿足我們?nèi)粘ｉ_(kāi)發(fā)的所需的東西.

它提供了很多便捷的自定義配置，并且貼心的給每行設(shè)置都加上了備注，告訴你是有什么作用。

同時(shí) vscode 對(duì)中文的支持很好，對(duì)于啃英語(yǔ)有些吃力的朋友會(huì)比較友善(雖然英語(yǔ)是程序員的基本功之一~

vscode 還內(nèi)置 git 源代碼管理系統(tǒng), 也就是說(shuō)我們?cè)趯?xiě)完代碼后無(wú)需離開(kāi)編輯器再另開(kāi)一個(gè)bash來(lái)提交代碼，直接在編輯器上完成對(duì)比代碼差異后，確定無(wú)誤后再提交相關(guān)的工作。還可以直接在編輯器上進(jìn)行代碼調(diào)試, 不過(guò)這些不在本文的討論中。

主題

One Monokai Theme

程序員的日常生活就是在coding, 可以說(shuō)每天都在跟編輯器打交道, 因此編輯器的顏值能影響到咱們的心情，進(jìn)而影響開(kāi)發(fā)效率~

在擴(kuò)展商城里, 我們可以去挑選一些自己喜歡的主題, 來(lái)提高編程體驗(yàn)。這里筆者推薦使用One Monokai的主題, 它的配色對(duì)閱讀代碼還是挺舒服的，當(dāng)然也可以去嘗試其他的主題~

下載主題后還需要用戶設(shè)置上設(shè)置使用的主題.

關(guān)于快捷鍵

如果你是某個(gè)編輯器的用戶，你已經(jīng)習(xí)慣了原先編輯器的快捷鍵，現(xiàn)在切換過(guò)來(lái)的話怕又要重新設(shè)置自己熟悉的快捷鍵覺(jué)得很麻煩的話，沒(méi)有關(guān)系~

vscode貼心的準(zhǔn)備了其他編輯器快捷鍵插件，節(jié)省你重新學(xué)習(xí)的時(shí)間成本。筆者就是從sublime轉(zhuǎn)向vscode從此一去不復(fù)返~

同步配置

假設(shè)你現(xiàn)在配置了讓自己很舒服的一個(gè)開(kāi)發(fā)環(huán)境，這時(shí)你因?yàn)橛布收蠈?dǎo)致電腦重裝或者電腦遷移等因素，要需要重新配置環(huán)境，那肯定會(huì)挺苦惱的。

因此強(qiáng)烈推薦安裝一個(gè)settings sync的插件！

它需要一個(gè)Github賬號(hào)以及gits的token，它將你vscode相關(guān)的配置相關(guān)全部提交上gits上。這樣不管你因?yàn)槭裁淳壒蕦?dǎo)致重新安裝開(kāi)發(fā)環(huán)境，恢復(fù)vscode的環(huán)境只需三步：下載并安裝vscode、下載settings sync、校驗(yàn)token并從遠(yuǎn)程下載配置。

擴(kuò)展插件

善用插件的力量可以很大的提升我們的開(kāi)發(fā)效率. 下面是一些常用插件跟大家分享一下.

編輯器擴(kuò)展

Open-In-Browser
由于VSCode沒(méi)有提供直接在瀏覽器中打開(kāi)文件的內(nèi)置界面，所以此插件在快捷菜單中添加了在默認(rèn)瀏覽器查看文件選項(xiàng). 在 windows 下, 可以使用快捷鍵Alt + b快速的打開(kāi).

Minify 這是一款用于壓縮合并JavaScript和CSS文件的應(yīng)用程序。它提供了大量自定義的設(shè)置，以及自動(dòng)壓縮保存并導(dǎo)出為.min文件的選項(xiàng)。它能夠分別通過(guò)uglify-js、clean-css和 html-minifier，與JavaScript、CSS和HTML協(xié)同工作。是一個(gè)可以不通過(guò)腳手架編譯就進(jìn)行壓縮的辦法，但平時(shí)工程化項(xiàng)目還是不能單單依賴這種方式。

TODO Highlight 開(kāi)發(fā)中一些沒(méi)有做完的事，一般會(huì)習(xí)慣性的打上TODO備注，但再要找的時(shí)候就很難顯目的找到了。TODO Highlight顧名思義就是讓TODO高亮的插件。

前端類增強(qiáng)

Auto Rename Tag 自動(dòng)重命名配對(duì)的HTML / XML標(biāo)記, 這在修改標(biāo)簽名上一點(diǎn)挺便捷的.

Auto Close Tag 這個(gè)擴(kuò)展是為 XML，PHP，Vue，JavaScript，TypeScript，JSX，TSX 等其他語(yǔ)言啟用的。同時(shí)它是可配置的。輸入標(biāo)簽的右括號(hào)后，結(jié)束標(biāo)簽將被自動(dòng)插入。

CSS Peek 使用此插件，你可以追蹤至樣式表中CSS類和ids定義的地方。當(dāng)你在 HTML 文件中右鍵單擊選擇器時(shí)，選擇“ Go to Definition 和 Peek definition ”選項(xiàng)，它便會(huì)給你發(fā)送樣式設(shè)置的 CSS 代碼。

JavaScript (ES6) code snippets es6已經(jīng)是經(jīng)常運(yùn)用在我們的項(xiàng)目中了, 該擴(kuò)展包含用于 Vscode 編輯器的 ES6 語(yǔ)法的 JavaScript 代碼片段.（同時(shí)支持 JavaScript 和 TypeScript）。

Vetur vue開(kāi)發(fā)必備, 可以格式化.vue文件, 由官方維護(hù).

Vue 2 Snippets vue開(kāi)發(fā)必備, 這個(gè)插件基于最新的Vue官方語(yǔ)法高亮文件添加了 Syntax Highlight, 并且依據(jù)Vue 2的 API 添加了Code Snippets`.

WakaTime 統(tǒng)計(jì)開(kāi)發(fā)時(shí)間和效率，只需注冊(cè)一個(gè)賬號(hào)即可~

代碼規(guī)范化

ESLint 要養(yǎng)成一個(gè)良好的編程習(xí)慣, ESLint就是一個(gè)不錯(cuò)的選擇. 它能適應(yīng)項(xiàng)目中的規(guī)則來(lái)糾正你的不好的習(xí)慣。

Prettier Prettier 是目前 Web 開(kāi)發(fā)中最受歡迎的代碼格式化程序。安裝了這個(gè)插件，它就能夠自動(dòng)應(yīng)用 Prettier，并將整個(gè) JS 和 CSS 文檔快速格式化為統(tǒng)一的代碼樣式。

EditorConfig Editor Config可以讓團(tuán)隊(duì)開(kāi)發(fā)時(shí)統(tǒng)一約定好一種規(guī)范. 這個(gè)主流的編輯器都支持.

markdown

如果你經(jīng)常使用 Markdown 的話，還可以使用安裝markdownlint和Markdown All in One這兩個(gè)插件，前者可以約束編寫(xiě)的格式，后者提供方便的鍵盤(pán)快捷方式，目錄，自動(dòng)預(yù)覽等。

常見(jiàn)問(wèn)題

Q: Emmet 生成的 HTML 模板如何修改 lang 屬性？

A: 在設(shè)置中定義 emmet 變量即可:

{"emmet.variables": {"lang": "zh-CN","charset": "UTF-8"}, }

用戶配置

分享一下自己目前的配置, 可以根據(jù)項(xiàng)目所需或者自己的習(xí)慣進(jìn)行調(diào)整.

{"workbench.settings.editor": "ui",// 文本編輯器"editor.suggestSelection": "first","editor.renderControlCharacters": true,"editor.multiCursorModifier": "ctrlCmd","editor.snippetSuggestions": "top","editor.renderWhitespace": "all","editor.formatOnPaste": true,"editor.wordWrap": "on","editor.fontSize": 12,"editor.tabSize": 2,"editor.codeActionsOnSave": {// For ESLint"source.fixAll.eslint": true,// For TSLint"source.fixAll.tslint": true,// For Stylelint"source.fixAll.stylelint": true},"diffEditor.ignoreTrimWhitespace": true,// 窗口"window.zoomLevel": 0,// 文件資源管理"explorer.confirmDragAndDrop": false,"explorer.confirmDelete": false,// 終端"terminal.integrated.cursorBlinking": true,"terminal.integrated.rendererType": "dom","terminal.integrated.cursorStyle": "line",// 文件"files.insertFinalNewline": true,"files.eol": "n","files.associations": {"*.vue": "vue","*.wxss": "css","*.cjson": "jsonc","*.wxs": "javascript","*.js": "javascript","*.wxml": "html"},// 語(yǔ)言相關(guān)配置"html.format.extraLiners": "","javascript.referencesCodeLens.enabled": true,// 針對(duì)某種語(yǔ)言，配置替代編輯器設(shè)置。// 以下配置大多是設(shè)置默認(rèn)格式化程序"[html]": {"editor.defaultFormatter": "vscode.html-language-features"},"[vue]": {"editor.defaultFormatter": "octref.vetur"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},"[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[markdown]": {"editor.defaultFormatter": "yzhang.markdown-all-in-one"},// ============= plugin config begin =============// sublime 按 tab 自動(dòng)補(bǔ)全 tag"auto-close-tag.SublimeText3Mode": true,// emmet"emmet.triggerExpansionOnTab": true,"emmet.includeLanguages": {"vue-html": "html","wxml": "html","javascript": "javascriptreact"},"emmet.syntaxProfiles": {"vue-html": "html",},// 代碼格式"prettier.singleQuote": true,"prettier.requireConfig": true,// sync githubg 同步模塊"sync.gist": "Your GitHub Gist ID","sync.autoDownload": false,"sync.autoUpload": true,"sync.forceDownload": false,"sync.removeExtensions": true,"sync.syncExtensions": true,"sync.forceUpload": true,// gitlens, git 可視化功能增強(qiáng)"gitlens.advanced.messages": {"suppressCommitHasNoPreviousCommitWarning": false,"suppressCommitNotFoundWarning": false,"suppressFileNotUnderSourceControlWarning": false,"suppressGitVersionWarning": false,"suppressLineUncommittedWarning": false,"suppressNoRepositoryWarning": false,"suppressResultsExplorerNotice": false,"suppressShowKeyBindingsNotice": true},"gitlens.views.fileHistory.enabled": true,"gitlens.views.lineHistory.enabled": true,// markdown"markdownlint.config": {"MD033": {"allowed_elements": ["iframe","details","summary","div","hr","br","a",]}},"workbench.colorTheme": "One Monokai","minapp-vscode.disableAutoConfig": true, }

C/C++ 編譯環(huán)境搭建

C/C++ for Visual Studio Code (Preview)

---

原文出自：[環(huán)境搭建] 從零開(kāi)始配置 vscode

總結(jié)

以上是生活随笔為你收集整理的vscode emmet默认模板_从零开始配置 vscode的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。