vscode好用的插件

落日映苍穹つ 2023-06-29 14:57 20阅读 0赞

## 好用插件 ##

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

需要注意的是这里配置的别名路径要和项目里配置的一一对应，可以把配置文件修改放在项目配置里而不是全局配置。