一、安装
下载后直接安装,安装过程中一直点下一步即可,记得最好自定义安装目录
vscode
二、常用拓展插件
点击如图所示扩展插件按钮可搜索及安装插件
扩展插件
推荐安装插件
| 插件名称 | 说明 |
|---|---|
| Vetur | Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger |
| ESLint | 代码规范与纠错 |
| Path Intellisense | 自动提示文件路径，支持各种快速引入文件 |
| Auto close Tag | 自动闭合HTML/XML标签 |
| Auto Rename Tag | 自动完成另一侧标签的同步修改 |
| Bracket Pair Colorizer | 给括号加上不同的颜色 |
| HTML CSS Support | 智能提示CSS类名以及id |
| HTML Snippets | 智能提示HTML标签，以及标签含义 |
| JavaScript(ES6) code snippets | ES6语法智能提示以及快速输入,支持 .js，.jsx，.tsx，.html，.vue |
| jQuery Code Snippets | jQuery代码智能提示 |
| open in browser | 支持快捷键与鼠标右键快速在浏览器中打开html文件 |
| Material Icon Theme | vscode图标主题 |
| Debugger for Chrome | 映射vscode上的断点到chrome上，方便调试 |
| GitLens | 方便查看git日志，git重度使用者必备 |
| vscode-fileheader | 新建文件作者注释 使用教程(新建一个文件→按“F1"→输入"fileheader"→按“enter"，即可出现文件作者注释) |
个人启用插件1
个人启用插件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\\"// 输出到指定的目录
"out": ".\\"// 输出到当前目录，文件名称为"less文件名称.css"
}
