前端VScode推薦插件

Auto Close Tag 自動添加HTML / XML關閉標籤 
Auto Rename Tag 自動重命名配對的HTML / XML標籤 
Beautify 格式化代碼 【必須】
Bracket Pair Colorizer 顏色識別匹配括號 
Code Runner 很是強大的一款插件，可以運行多種語言的代碼片斷或代碼文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等
安裝完成後，右上角會出現：▶ 
change-case 雖然 VSCode 內置了開箱即用的文本轉換選項，但其只能進行文本大小寫的轉換。而此插件則添加了用於修改文本的更多命名格式，包括駝峯命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等 
Chinese (Simplified) Language Pack for Visual Studio Code 中文簡體語言包

安裝後，在 locale.json 中添加 "locale": "zh-cn"，便可載入中文（簡體）語言包。要修改 locale.json，你能夠同時按下 Ctrl+Shift+P 打開命令面板，以後輸入 "config" 篩選可用命令列表，最後選擇配置語言命令。

Color Info 這個便捷的插件，將爲你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就能夠預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了 
CSS Peek 使用此插件，你能夠追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇「 Go to Definition 和 Peek definition 」選項，它便會給你發送樣式設置的 CSS 代碼 
Debugger for Chrome 前端調試, 
ESLint EsLint能夠幫助咱們檢查Javascript編程時的語法錯誤。好比：在Javascript應用中，你很難找到你漏泄的變量或者方法。EsLint可以幫助咱們分析JS代碼，找到bug並確保必定程度的JS語法書寫的正確性 
filesize 在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間 
Git History 以圖表的形式查看 git 日誌 
GitLens — Git supercharged 顯示文件最近的 commit 和做者，顯示當前行 commit 信息 
HTML Boilerplate 經過使用 HTML 模版插件，你就擺脫了爲 HTML 新文件從新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，便可生成乾淨的文檔結構 
HTMLHint HTML 代碼格式檢測 
HTML Snippets 代碼自動填充 
htmltagwrap 在選中HTML標籤中外面套一層標籤
」Alt + W」 (「Option + W」 for Mac) 
Image Preview 鼠標移到路徑裏顯示圖像預覽 
Indenticator 突出目前的縮進深度 
intelliSense for CSS class names in HTML 把項目中 css 文件裏的名稱智能提示在 html 中 
JavaScript (ES6) code snippets es6代碼片斷 
Live Server 瀏覽器實時刷新 
Node.js Modules Intellisense 能夠在導入語句中自動完成JavaScript / TypeScript模塊 
npm Intellisense require 時的包提示 
Path Intellisense 路徑自動補全 
Quokka.js Quokka 是一個調試工具插件，可以根據你正在編寫的代碼提供實時反饋
使用方法: ctrl+shift+p 輸入 quokka 選擇 new javascript 就能夠了 
Regex Previewer 這是一個用於實時測試正則表達式的實用工具。它能夠將正則表達式模式應用在任何打開的文件上，並高亮全部的匹配項 
SVG Viewer 此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，即可以打開 SVG 文件並查看它們。同時，它還包含了用於轉換爲 PNG 格式和生成數據 URI 模式的選項 
Vetur Vue 語法高亮顯示, 語法錯誤檢查, 代碼自動補全 【vue項目必須】
(配合 ESLint 插件效果更佳) 
vscode-fileheader 頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間
快捷鍵: Ctrl+Alt+i
(默認信息可在 文件→首選項→設置 中修改)

 

setting.json

{ "window.zoomLevel": 1, "terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe", // 使用git終端（直接顯示當前分支） "files.autoSave": "onFocusChange", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "git.autofetch": true, "fileheader.Author": "xxx", "fileheader.LastModifiedBy": "xxx", "prettier.semi": false, // 結尾不加分號 "prettier.singleQuote": true, // 單引號 "vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, // 格式化不加分號 "singleQuote": true // 格式化以單引號爲主 } },}