VSCode Web开发常规设置

工欲善其事必先利其器

常用功能整理

1. 主题篇
文件-首选项-颜色主题，快捷键Ctrl+K/Ctrl+T，可选自带主题颜色和自定义安装，推荐主题Material Icon Theme插件
2. 文件图标篇
文件-首选项-文件图标主题，同样可选自带文件图表效果和自定义安装，推荐主题VScode-icons插件
3. 快捷键篇
常用快捷键：

• 查找 Ctrl+F
• 查找替换 Ctrl+H，逐一替换快捷键Enter，全部替换Ctrl+Alt+Enter
• 单行注释 Ctrl+/
• 多行注释 Shift+Alt+A
• 格式化文档 Shift+Alt+F
• 上一行插入 Ctrl+Shift+Enter
• 下一行插入 Ctrl+Enter （这个在编辑Css时候非常好用）
• 多行编辑 按住Alt，光标选中，选几个编辑几个，顶级实用快捷键
• 项目内搜索文件 Ctrl+Shift+F，分为大小写 Alt+C，不区分大小写 Alt+W
• 项目中搜索文件内容并替换 Ctrl+Shift+H
• 复制活动文件路径 Shift+Alt+C（文件绝对路径）
• 向上复制行 Shift+Al+UpArrow
• 向下复制行 Shift+Alt+DownArrow
• 调用控制台 Ctrl+·（就是Esc正下方的那个键）
• 拆分编辑器 Ctrl+\
• 视图工具调用 Ctrl+Q
• 文件重命名 F2
• 显示所有命令 F1

4. Git篇

思前想后觉得此处干系重大，不宜论述，遂JUMP 》》 Git官网地址

5. 插件篇

• 适合像我这样英文不好的朋友 Chinese (Simplified) Language Pack for Visual Studio Code
• HTML专用 Auto Close Tag 、 Auto Rename Tag 、HTML Boilerplate、HTML CSS Support
• CSS专用 Color Info CSS Peek
• 浏览器 view-in-browser Debugger for Chrome
• 文件路径提示 Path Intellisense
• Npm 安装提示 npm Intellisense

Less篇

1. less插件 Easy LESS
2. 快捷键Ctrl+Shift+P 输入setting.json
3. 配置Json文件代码如下：

 {    
     "less.compile": {
         "compress":  true,  // true => remove surplus whitespace
         "sourceMap": true,  // true => generate source maps (.css.map files)
         "out":       false, // false => DON'T output .css files (overridable per-file, see below)
     }
 }

参数解析：
compress 去除多余空格
sourceMap 生成.map文件
out CSS文件输出目录，false不输出CSS，要输出CSS，css目录可以自定义，${workspaceRoot}为项目根目录，配置代码如下：

{    
    "less.compile": {
        "out": "${workspaceRoot}\\css\\"
    }
}

CSS前缀补全，版本信息大家自行斟酌：

 {    
     "less.compile": {
         "autoprefixer": "> 5%, last 2 Chrome versions, not ie 6-9"
     }
 }

按键映射
操作方法：文件-首选项-按键映射-Enter，根据经验使用

less自动编译
配置settings.json这个使用户可以操作的，setting.json是不可以的，步骤如下：
我的是汉化过的（汉化安装Chinese (Simplified) Language Pack for Visual Studio Code插件），文件>首选项>设置>输入框搜索（settings.json），结束。添加如下代码：

  "less.compile": {
        "compress": false, 
        "sourceMap": false, 
        "out": "${workspaceRoot}\\css\\",       // 这里是代表编译后生成的css文件所放的位置
    }

以上是我常用web开发所用，不足之处望各位提点，不胜感激，共勉！