VS Code 使用小技巧

全部插件查找地址(https://marketplace.visualstudio.com/html

編碼快捷方式(http://docs.emmet.io/cheat-sheet/瀏覽器

安裝插件出現  錯誤unable to verify the first certificate (沒法確認第一證書)  服務器

  解決方法以下:  markdown

  在vscode 下 進入 文件->首選項-->設置 在上面的搜索框輸入 proxy,會出現 有3個相關設置項,設置以下的選項 ide

  

 

// 是否應根據提供的 CA 列表驗證代理服務器證書。
  "http.proxyStrictSSL": true, 
//設置爲false , 這時候會在右側的自定義設置中增長一條
  "http.proxyStrictSSL": false,

 

 

    重啓 VScode ,而後在安裝插件,會發現神奇的能夠安裝了。工具

插件ui

一、HTML Snippetsthis

  超級使用且初級的H5代碼片斷以及提示編碼

二、HTML CSS Support spa

  讓HTML標籤上寫class智能提示當前項目所支持的樣式

三、jQuery Code Snippets

  jQuery 提示工具

四、Path Intellisense

  路徑提示補全

五、Document this

  Js的註釋模板

六、ESlint

  ESlint接管原聲js提示,能夠自定製體會規則 

七、Auto Close Tag

  自動補全html標籤

八、Auto Rename Tag

  修改html標籤,自動幫你完成尾部閉合標籤的同步修改

九、默認瀏覽器查看HTML文件

  Open In Browser (快捷鍵Alt+B能夠修改)

  View InBrowser (快捷鍵Ctrl+F1能夠修改)

 

十、beautify

  格式化代碼的工具

十一、Rainbow Brackets

  彩虹括號(不推薦用)

十二、Guides(新版已經包含)

  標籤對其線

1三、Project Manager

  在多個項目以前快速切換的工具

1四、vscode-icons

  讓 vscode 資源樹目錄加上圖標;點擊設置->如圖:

  

1五、background

  可讓vscode的背景修改成本身喜歡的圖,最多3張照片

  https://marketplace.visualstudio.com/items?itemName=shalldie.background

  圖片配置

 

// Plugin background enabled.background 插件是否啓用
"background.enabled": false,

// Use default images.使用默認圖片
"background.useDefault": false,

// Your custom Images(Max length is 3). 本身定製背景圖,最多3個
"background.customImages": [
   "file:///E:/wushen.png",
   "file:///E:/wushen.png",
   "file:///E:/wushen.png"
]

 

 

  

1六、markdownlint

  Markdown格式提示

  能夠經過快捷鍵 Ctrl+Shift+V來預覽最終的顯示效果

17 、Atom Keymap

  在安裝這個插件並重啓 VS Code 以後,將使你的 VS Code 中能夠使用 Atom 的鍵盤快捷鍵。

1八、Sublime Text Keymap and Settings Importer

  在安裝這個插件和重啓 VS Code 以後,將在 VS Code 中導入 Sublime Text 的鍵盤快捷鍵。能夠經過 VS Code 的強大智能感知來使用熟悉的 Sublime Text 鍵盤快捷鍵。

 1九、 JavaScript (ES6) code snippets

  用代碼片斷加快 ES6 開發速度,例如輸入 imd 能夠自動生成以下代碼:

 20、 Document This

  在 TypeScript 和 JavaScript 文件中自動生成詳細的 JSDoc 註釋

 

 

vsCode配置

// 控制是否顯示 minimap(縮略圖)
   "editor.minimap.enabled": true,

// 視區寬度自動換行設置。
 "editor.wordWrap": "on",

// 指定用在工做臺中的顏色主題。
 "workbench.colorTheme": "Monokai",
相關文章
相關標籤/搜索