前端必备的VScode插件

1. 中文插件  Chinese（Simplied） Lang

• 打开vscode工具；
• 使用快捷键组合【Ctrl+Shift+p】，在搜索框中输入“configure display language”，点击确定后；
• 如果是第一次安装，先在插件市场安装 Chinese（Simplied） Lang 插件，然后重启Vscode就可以了。
• 如果不是第一次安装，则进行下面这一步，修改locale.json文件下的属性“locale”为“zh-CN”，如下图;最后 ，重启vscode工具；如果重启后vscode菜单等仍然是英文显示，在商店查看已安装的插件，把中文插件重新安装一遍

2. 代码提示

• JavaScript (ES6) 代码提示：  JavaScript (ES6) snippets
• Vue代码提示： Vetur
• 代码规范工具： ESLint
• H5骨架： html5-skelton
• Sass/Less/Scss/Typescript/Javascript/Jade/Pug编译英雄专业版  ：Sass/Less/Scss/Typescript/Javascript/Jade/Pug Compile Hero Pro
• HTML Snippets：Html标签代码提示工具，不用直接输入<尖括号了
• Auto Rename Tag ， 自动重命名成对的HTML标签

3. 代码格式化

• Prettier - Code formatter，代码格式化软件，支持：html，css，js，json，php，nodejs、等【强烈推荐】
• Beautify ， 美化javascript, JSON, CSS, Sass, 和HTML代码

4. 启用保存时自动格式化

• 在VSCode的配置文件里添加 editor.formatOnSave:true 即可实现保存时自动格式化，详细请见下方配置

5. 主题

• One Dark Pro  ：黑色背景 很舒服。
• high contrast  ：黑色背景 高对比度，配合背景透明，调到很低也很清晰。
• light  ：白色背景 也很清晰。不适合配合透明。

6. 主题

• Auto-Save on Window Change  ：自动保存
  

7. 代码快捷键

• Sublime Text Keymap and Settings Importer ：基于sublime Text3的快捷键
• Sublime快捷键文档传送门： blog.csdn.net/maomaog16/a…
• Sublime Text3快捷键语法 ：  blog.csdn.net/xiaozhi_201…
• Vscode快捷键  ：    blog.csdn.net/p358278505/…

8. 调试插件

• Debugger for Chrome  ：谷歌浏览器的调试插件
  

9. 其他插件

1. Auto Close Tag  ：自动闭合HTML/XML标签
   
2. Auto Import  ：自动查找可以导入的代码和操作
   
3. Bracket Pair Colorizer  ：括号高亮显示
   
4. change-case  ： 清洁代码，普通文本一键转换包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。
   
5. Color Info  ： css样式颜色提示，可以自动选择颜色。鼠标停留就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
   
6. GlassIt-VSC  : 使vscode软件整体变透明的插件，包括背景，字体，透明度可以调节。ctrl+alt+z透明，ctrl+alt+c恢复正常。我自己特别喜欢，把vscode放在浏览器上面，配合自动保存，和自动刷新，只要一改代码，就立马能看见效果。
   
7. Minify ： 代码压缩
   
8. highlight-words： 选择代码段高亮插件
   
9. Vetur ：Vue代码高亮
   
10. Image Preview ：鼠标悬浮图片链接上可预览图片
    
11. Code Spell Checker : 单词拼写检查提示，单词拼写错误会给警告提示
12. Markdown All in One :可以书写markdown，可以边写边看，可以转换为html或者pdf文件
13. vscode-icons：通过不同的图标区分文件夹
    
14. Dependency Cruiser Extension：一键生成文件依赖关系图树【推荐】

• 当然，我们可以使用 powerShell ，如果是查看目录结构 可使用命令 tree , 如果是查看 目录下的文件 tree /f
  

15. typehole ：typehole是一个vsCode插件，可以针对TypeScript根据变量自动生成类型 ctrl + . 快捷键
    
16. GitLens — Git supercharged ： 代码提交人员git历史记录
17. Git History ： git 历史记录
    
18. import cost ： 计算引入包体积
    
19. ES7+ React/Redux/React-Native snippets
    
20. expand-region ： 支持HTML、css文件的 [],{},"",'' 里面的内容
    

快捷键配置：以下代码复制到keybindings.json ,快捷键我沿用的是sublime，楼主可做参考
{"key": "ctrl+shift+m","command": "expand_region", "when": "editorTextFocus"},
{"key": "ctrl+shift+,","command": "undo_expand_region", "when": "editorTextFocus &&editorHasSelection"}

21. VS Code Counter ： 项目统计信息详情插件【例如统计代码量，代码行数】

• 在编辑器扩展工具中找到统计扩展（VS Code Counter)并安装

• 重新启动VS code，再用快捷键ctrl+shift+p工作区选择 VscodeCounter:Count lines in directory 后回车会出现当前项目的默认路径。(右下方会出现统计代码的提示）

• 统计的所有代码行数就好了
  

• 【补充】统计行，参考文档：wenku.baidu.com/view/cbcfa1…

22. Dot Log ： consloe.log的简快捷键
    
23. Material Theme ： 好看的主题插件，果然很赞 【推荐】
    
24. intelliCode API Usage Examples ： 对方法属性的介绍
    
25. Project Manage 用于项目管理网站的插件 【推荐】
    
26. Local History ：本地会有文件缓存
    

10. 浏览器打开

1. open in browser  ：浏览器打开文件，快捷键：alt+b 或右键打开
   
2. 自动刷新–> Live Server   ：右键打开或终端打开，local host：5500选择文件，自动刷新。

11. 尺寸转换计算工具

1. px to rem
   
2. px to rem & rpx & vw (cssrem)
   

12. 快速添加头部注释和函数注释插件 koroFileHeader

1. koroFileHeader ： vscode安装koroFileHeader插件，ctrl+shift+p 搜索setting【VScode编辑器的设置】，然后搜索FileHeader点击并且进入setting界面。 文档传送门：www.cnblogs.com/liutongqing…

• 文件头部添加注释快捷键：

windows：ctrl+alt+i
mac：ctrl+cmd+i

• 在光标处添加函数注释快捷键：

window：ctrl+alt+t
mac：ctrl+cmd+t

修改默认头部信息

点进去后，会有一个空白的用户自定义设置 "fileheader.customMade"，下方是我的配置

"fileheader.customMade": {
        "Author": "Null",
        "Date": "Do not edit",
        "Email": "<obkoro1@foxmail.com>",
        "LastEditors": "Null",
        "LastEditTime": "Do not edit",
        "Description": "file information",
        "Company": "your company"
    },

关闭自动生成头部注释  'autoAdd':false

// 头部注释
    "fileheader.customMade": {
        "autoAdd": false,  //关闭自动生成头部注释
    },
    // "fileheader.configObj": {
    //     "autoAdd": false, // 关闭
    // },
    //函数注释
    "fileheader.cursorMode": {
        "description":"",
        "param": "",
        "return": "",
        "Date Changed":""
    },

当我们想重新定义函数注解快捷键

【函数注释快捷键更改】我们可以通过， ctrl+shift+p 中键盘快捷方式。然后再键盘快捷方式中搜索中的输入cursortip  【头部注释】 fileheader

【注意】最新版本的插件 函数注释快捷方式是 ctrl + window + T  文件头部注释为 ctrl + window + i

【补充】有趣的代码注释 codeDesign

效果为：

13. VScode插件 CSS Tree 自动将html中的class提取 操作流程 文档传送门： www.cnblogs.com/cqkjxxxx/p/…

14. 常用的快捷键

• ctrl + shift + p 打开工作区设置，或者直接搜索 工作区设置:  open workspace setting  用户设置： open user setting

15. Preview.js 【用于预览的插件】
官网：previewjs.com/docs

16. 微信小程序

17. eslint配置文档 文档传送门：blog.csdn.net/weixin_3622…

18. 常用的快捷键

• 使用快捷键：Ctrl+ ·     即可；注意那个点是键盘上 esc 下面的那个；
• 删除一行：Ctrl+Shilft+K
• 复制改行到下一行： Ctrl+Shilft+D
• 缩进/缩进行 Indent/outdent line  :  Ctrl+] / [
• 折叠（折叠）区域 Fold (collapse) region  :  Ctrl+Shift+[
• 展开（未折叠）区域 Unfold (uncollapse) region  :  Ctrl+Shift+]
• 折叠（未折叠）所有子区域 Fold (collapse) all subregions :  Ctrl+K Ctrl+[
• 展开（未折叠）所有子区域 Unfold (uncollapse) all subregions :  Ctrl+K Ctrl+]
• 添加行注释 Add line comment :  Ctrl+K Ctrl+C
• 删除行注释 Remove line comment : Ctrl+K Ctrl+U
• 切换行注释 Toggle line comment :  Ctrl+K Ctrl+U
• 切换行注释 Toggle line comment :  Ctrl+K Ctrl+U
• 选择当前字的所有出现 Select all occurrences of current word:   Ctrl + F2
• 展开选择 Expand selection:   Shift + Alt + →
• 展开选择 Expand selection:   Shift + Alt + ←
• 列（框）选择 Column (box) selection:   Shift + Alt + （拖动鼠标）或 Ctrl + Shift + Alt +（箭头键）

VScode最新配置文件

{
  //打开文件不覆盖
  "workbench.editor.enablePreview": false,
  //关闭快速预览
  "editor.minimap.enabled": false,
  //打开自动保存
  "files.autoSave": "afterDelay",
  // 头部注释
  "fileheader.customMade": {
    // "autoAdd": false, //关闭自动生成头部注释
    "Author": "Null",
    "Date": "Do not edit", // 设置后默认设置文件生成时间
    //"LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
    //"LastEditors": "Null", // 设置后，保存文件更改默认更新最后编辑人
    "Description": ""
  },
  // 函数注释
  "fileheader.cursorMode": {
    "description": "", // 函数注释的描述
    "param": "", // 函数注释的参数
    "return": "" // 函数注释的返回值
  },
  //手机项目rem适配
  "px-to-rem.px-per-rem": 100,
  // -----------------------自动格式化配置eslint+prettier-----------------------
  // 每次保存自动格式化ctrl+s
  // "editor.formatOnSave": true, //【存在】
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  //配置内配置对 .vue 文件的格式化
  "[vue]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  //配置内配置对 .ts 文件的格式化
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //配置内配置对 .js 文件的格式化
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //配置内配置对 .json 文件的格式化
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "liveServer.settings.donotShowInfoMsg": true,
  // liveServer默认打开的浏览器路径； IE浏览器位置：C:\\Program Files\\Internet Explorer\\iexplore.exe
  // 360极速版位置 ：C:\\Users\\Administrator\\AppData\\Local\\360Chrome\\Chrome\\Application\\360chrome.exe
  // 360 :C:\\Users\\Administrator\\AppData\\Roaming\\360se6\\Application\\360se.exe
  "liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Users\\Administrator\\AppData\\Local\\360Chrome\\Chrome\\Application\\360chrome.exe",
  "[scss]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "workbench.colorTheme": "One Dark Pro Darker",
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "window.zoomLevel": -1
}