【前端开发工具-代码编辑器-VSCode】windows下安装及

一、安装

VSCode官方下载地址

下载后直接安装,安装过程中一直点下一步即可,记得最好自定义安装目录

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"
}