一荸恕、安裝
下載后直接安裝,安裝過程中一直點(diǎn)下一步即可,記得最好自定義安裝目錄
vscode
二、常用拓展插件
點(diǎn)擊如圖所示擴(kuò)展插件按鈕可搜索及安裝插件
擴(kuò)展插件
推薦安裝插件
| 插件名稱 | 說明 |
|---|---|
| Vetur | Vue多功能集成插件于未，包括：語法高亮，智能提示陡鹃，emmet烘浦，錯(cuò)誤提示，格式化萍鲸，自動(dòng)補(bǔ)全闷叉，debugger |
| ESLint | 代碼規(guī)范與糾錯(cuò) |
| Path Intellisense | 自動(dòng)提示文件路徑，支持各種快速引入文件 |
| Auto close Tag | 自動(dòng)閉合HTML/XML標(biāo)簽 |
| Auto Rename Tag | 自動(dòng)完成另一側(cè)標(biāo)簽的同步修改 |
| Bracket Pair Colorizer | 給括號(hào)加上不同的顏色 |
| HTML CSS Support | 智能提示CSS類名以及id |
| HTML Snippets | 智能提示HTML標(biāo)簽脊阴，以及標(biāo)簽含義 |
| JavaScript(ES6) code snippets | ES6語法智能提示以及快速輸入,支持 .js握侧，.jsx蚯瞧，.tsx，.html品擎，.vue |
| jQuery Code Snippets | jQuery代碼智能提示 |
| open in browser | 支持快捷鍵與鼠標(biāo)右鍵快速在瀏覽器中打開html文件 |
| Material Icon Theme | vscode圖標(biāo)主題 |
| Debugger for Chrome | 映射vscode上的斷點(diǎn)到chrome上埋合，方便調(diào)試 |
| GitLens | 方便查看git日志，git重度使用者必備 |
| vscode-fileheader | 新建文件作者注釋 使用教程(新建一個(gè)文件→按“F1"→輸入"fileheader"→按“enter"萄传，即可出現(xiàn)文件作者注釋) |
個(gè)人啟用插件1
個(gè)人啟用插件2
vscode如何將less編譯到指定css目錄中
image.png
settings.json
"less.compile": {
// "autoprefixer": "> 5%, last 2 Chrome versions, not ie 6-9"
// "compress": true, // true => 移除less中多余的空格饥悴，即生成壓縮生成的css
// "sourceMap": true, // 是否生成map文件 true => 生成map文件 (.css.map files)
// "out": false, // 生成的css文件輸出到什么地方 false => DON'T output .css files (overridable per-file, see below)
// "out": "${workspaceRoot}\\src\\style\\css\\"http:// 輸出到指定的目錄
"out": ".\\"http:// 輸出到當(dāng)前目錄，文件名稱為"less文件名稱.css"
}
