我們在進行開發工作時，選擇一個順手好用的編輯器是必不可免的, 其中 vscode 就是一個很好的選擇。它能讓你大部分的工作都在編輯器內完成, 大大的提高開發效率~

概述

vscode 內置了前端相關的基礎環境，如emmet擴展。另外的環境則可以通過它自己的插件商城來找到對應的插件。比如常見的預處理器的語法高亮。同時它有良好成熟的生態圈, 足夠滿足我們日常開發的所需的東西.

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

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

vscode 還內置 git 源代碼管理系統, 也就是說我們在寫完代碼后無需離開編輯器再另開一個bash來提交代碼，直接在編輯器上完成對比代碼差異后，確定無誤后再提交相關的工作。還可以直接在編輯器上進行代碼調試, 不過這些不在本文的討論中。

主題

One Monokai Theme

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

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

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

關于快捷鍵

如果你是某個編輯器的用戶，你已經習慣了原先編輯器的快捷鍵，現在切換過來的話怕又要重新設置自己熟悉的快捷鍵覺得很麻煩的話，沒有關系~

vscode貼心的準備了其他編輯器快捷鍵插件，節省你重新學習的時間成本。筆者就是從sublime轉向vscode從此一去不復返~

同步配置

假設你現在配置了讓自己很舒服的一個開發環境，這時你因為硬件故障導致電腦重裝或者電腦遷移等因素，要需要重新配置環境，那肯定會挺苦惱的。

因此強烈推薦安裝一個settings sync的插件！

它需要一個Github賬號以及gits的token，它將你vscode相關的配置相關全部提交上gits上。這樣不管你因為什么緣故導致重新安裝開發環境，恢復vscode的環境只需三步：下載并安裝vscode、下載settings sync、校驗token并從遠程下載配置。

擴展插件

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

編輯器擴展

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

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

TODO Highlight 開發中一些沒有做完的事，一般會習慣性的打上TODO備注，但再要找的時候就很難顯目的找到了。TODO Highlight顧名思義就是讓TODO高亮的插件。

前端類增強

Auto Rename Tag 自動重命名配對的HTML / XML標記, 這在修改標簽名上一點挺便捷的.

Auto Close Tag 這個擴展是為 XML，PHP，Vue，JavaScript，TypeScript，JSX，TSX 等其他語言啟用的。同時它是可配置的。輸入標簽的右括號后，結束標簽將被自動插入。

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

JavaScript (ES6) code snippets es6已經是經常運用在我們的項目中了, 該擴展包含用于 Vscode 編輯器的 ES6 語法的 JavaScript 代碼片段.（同時支持 JavaScript 和 TypeScript）。

Vetur vue開發必備, 可以格式化.vue文件, 由官方維護.

Vue 2 Snippets vue開發必備, 這個插件基于最新的Vue官方語法高亮文件添加了 Syntax Highlight, 并且依據Vue 2的 API 添加了Code Snippets`.

WakaTime 統計開發時間和效率，只需注冊一個賬號即可~

代碼規范化

ESLint 要養成一個良好的編程習慣, ESLint就是一個不錯的選擇. 它能適應項目中的規則來糾正你的不好的習慣。

Prettier Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用 Prettier，并將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。

EditorConfig Editor Config可以讓團隊開發時統一約定好一種規范. 這個主流的編輯器都支持.

markdown

如果你經常使用 Markdown 的話，還可以使用安裝markdownlint和Markdown All in One這兩個插件，前者可以約束編寫的格式，后者提供方便的鍵盤快捷方式，目錄，自動預覽等。

常見問題

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

A: 在設置中定義 emmet 變量即可:

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

用戶配置

分享一下自己目前的配置, 可以根據項目所需或者自己的習慣進行調整.

{"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"},// 語言相關配置"html.format.extraLiners": "","javascript.referencesCodeLens.enabled": true,// 針對某種語言，配置替代編輯器設置。// 以下配置大多是設置默認格式化程序"[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 自動補全 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 可視化功能增強"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++ 編譯環境搭建

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

---

原文出自：[環境搭建] 從零開始配置 vscode

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。