【vscode 常用扩展插件】

vscode 常用扩展插件

常用插件
- 部分插件
- 使用技巧
- - [1、eslint 保存自动格式化](#1、eslint 保存自动格式化)
  - 2、代码片段的使用
  - 3、最后是关于引入文件路径提示的

常用插件

记录vscode方便开发的扩展插件，方便换电脑时，快速部署所需环境。

部分插件

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'

1、ESLint

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

2、Git History

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

3、Git Project Manager

git 项目管理工具

4、GitLens --- Git supercharged

git 工具，作用和 Git History 类似

5、HTML Snippets

快速生成html代码工具

6、JS JSX Snippets

同上6，通过快捷键，快速生成react代码工具

7、LeetCode

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

8、Live Server

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

9、npm

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

10、npm Intellisense

快速引入依赖插件，详见插件介绍

11、Path Autocomplete

路径提示插件

12、Path Intellisense

同上，路径补全插件

13、Prettier - Code formatter

代码格式化插件

14、Vetur

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

15、Visual Studio IntelliCode

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

16、Vue Theme

vue 代码主题插件

17、Vue VSCode Snippets

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

18、微信小程序扩展

用vscode 开发小程序插件，代码补全格式化等等

19、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代码片段，供参考：

js 复制代码

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

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