vscode 常用扩展插件(工具篇)

欲善其工必先利其器，本文以vscode编辑器为例子，分享一下笔者常用的vscode工具及技巧，同时也欢迎高手不惜赐教，分享更多的使用技巧，提高工作效率和编程幸福感。本文分为两个部分，常用插件和使用技巧,欢迎点赞(pai zhuan)。

常用插件

1. Auto Close Tag html自动闭合标签插件,具体不再详述，看插件介绍

2. Auto Rename Tag html 自动重命名标签插件，谁用谁知道

3. Beautify 格式化插件

4. Chinese (Simplified) vscode 汉化插件

5. Code Runner 在编辑器里运行js代码，同时可在terminal里显示打印结果的工具，方便调试代码,支持多种语言比如 C++, Python, Java等等

6. ES7 React/Redux/React-Native/JS snippets 通过指定的前缀，快速生成react代码工具，写一个例子，详看插件介绍

imrcp + tab → import React, { Component } from 'react' import PropTypes from 'prop-types'

7. ESLint 代码检查工具,不再详述，使用技巧里会分享，eslint 保存格式化

8. Git History git 工具，鼠标定位到代码行上，可以在代码后边显示代码最近修改时间及修改人等信息

9. Git Project Manager git 项目管理工具

10. GitLens — Git supercharged git 工具，作用和 Git History 类似

11. HTML Snippets 快速生成html代码工具

12. JS JSX Snippets 同上6，通过快捷键，快速生成react代码工具

13. LeetCode 力扣刷题神器，没有梯子的注意把账号体系切换到国内账号就可以登录，默认是连的国外账号

14. Live Server 快速启动一个本地服务，方便html文件预览调试等

15. npm npm 依赖安装提示，未安装的依赖会在依赖下显示波浪线提示

16. npm Intellisense 快速引入依赖插件，详见插件介绍

17. Path Autocomplete 路径提示插件

18. Path Intellisense 同上，路径补全插件

19. Prettier - Code formatter 代码格式化插件

20. Vetur vue 代码高亮插件,写vue必装神器

21. Visual Studio IntelliCode 代码智能补全插件，这个不错，大力推荐，用了就知道

22. Vue Theme vue 代码主题插件

23. Vue VSCode Snippets 快速生成vue代码插件，在下边的使用技巧里会分享高级使用技巧

24. 微信小程序扩展 用vscode 开发小程序插件，代码补全格式化等等

25. vscode wxml 提供 wxml 语法支持及代码片段，和上一个类似

总结，以上插件是笔者用过的，基本都是评价4.5和5星的插件，在使用时，有的插件功能重复，建议大家一个功能选一个自己喜欢的，安装太多的插件影响启动速度，同时增加内存占用，可能影响开发效率，最终适得其反。

使用技巧

使用技巧里暂先分享三个小技巧，笔者也是黔驴技穷，各位高手有好的工具方法，欢迎交流分享。

1. eslint 保存自动格式化 打开 文件 -> 首选项 -> 设置 -> 点击任意一个 ‘在setting.json中编辑’, 打开配置文件，添加一下代码就OK!

 "eslint.autoFixOnSave": true,
 "eslint.validate": [
      "javascript",
      "javascriptreact",
      "html",
      {
        "language": "vue",
        "autoFix": true
      },
      "typescript",
      "typescriptreact"
  ]

2. 代码片段的使用

通过代码片段，可以用预定义快捷键，快速生成自定的代码片段，对于开发效率的提高很有裨益。打开 文件 -> 首选项 -> 用户代码片段 弹出菜单有 ‘新建全局代码片段文件’和 ‘新建项目代码片段’，根据自己需要灵活选择 如下是笔者的react代码片段，供参考：

{
  "React template": {
  "scope": "javascript,jsx",
  "prefix": "irea",
  "body": [
    "import React, {Component} from 'react'",
    "",
    "class $1 extends Component{",
    "  render () {",
    "    return (",
    "      <>",
    "         $2",
    "      </>",
    "   )",
    "  }",
    "}",
    "",
    "export default $1"
  ],
  "description": "react template"
  }
}

其中的scope 是代码片段用于那些文件，本例的用于js和jsx 文件；prefix 是自定义的快捷键；body是自定义的内容，将会插到文件中， 1 2 等是光标的位置；description 是代码片段的描述。

3. 最后是关于引入文件路径提示的 在开发时，我们可能会通过webpack定义一些路径别名，但是路径补全插件不认识这些路径别名，所以在别名引入时就不能用了，别着急，我们可以通过配置插件的路径别名来达到目的。如下是我的Path Intellisense 插件配置供参考，还是打开vscode配置 "setting.json" 文件,添加如下配置：

  "path-intellisense.mappings": {
      "@": "${workspaceRoot}/src",
      "components": "${workspaceRoot}/src/components",
      "assets": "${workspaceRoot}/src/assets",
      "util": "${workspaceRoot}/src/util",
      "plugin": "${workspaceRoot}/src/plugin"
  },

需要注意的是这里配置的别名路径要和项目里配置的一一对应，可以把配置文件修改放在项目配置里而不是全局配置。以上，有误或者不妥的地方，欢迎留言指出，谢谢！