【vscode 常用扩展插件】_vscode npm扩展

常用插件

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

部分插件

1、Auto Close Tag
html自动闭合标签插件,具体不再详述，看插件介绍
2、Auto Rename Tag
html 自动重命名标签插件，谁用谁知道
3、Beautify—目前vscode识别为 deprecated extensions
格式化插件
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
2
3

1、ESLint
代码检查工具,不再详述，使用技巧里会分享，eslint 保存格式化
2、Git History
git 工具，鼠标定位到代码行上，可以在代码后边显示代码最近修改时间及修改人等信息
3、Git Project Manager
git 项目管理工具
4、GitLens — Git supercharged
git 工具，作用和 Git History 类似
5、HTML Snippets-–目前vscode识别为 deprecated extensions
快速生成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"
  ],
 "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

团队开发项目中会有项目的setting.json文件

{
   // 用于保存时使用进行代码格式化
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },
    // 用于vscode右下角工具栏展示eslint标识
    "eslint.alwaysShowStatus": true,
}
1
2
3
4
5
6
7
8

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 是代码片段的描述。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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"
  },
1
2
3
4
5
6
7

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