vscode常用插件

客官°小女子只卖身不卖艺 2023-07-25 14:01 162阅读 0赞

## `vscode`常用插件： ##

Vue开发常用插件

### 通用插件： ###

#### 1.透明效果插件 `windows opacity` ； ####

> 推荐：`透明度：230`

#### 2. `vscode`中打开浏览器，光明正大摸鱼 ####

> Browser preview

#### 3. 迅速提升代码质量：`booster` ####

#### 4. 快速找到括号 `Bracket pair colorizer` ####

#### 5. `VSCode`装个插件 就可以偷偷玩游戏 ####

> 到`VSCode`插件中搜索`超级鼓励师`

#### 6. 优雅调试接口 ####

> #### rest client ####
> 
> 简单的使用
> 
> 1.  创建一个 `.http`文件
> 
> 你可以在任意你喜欢的地方新建一个接口测试文件，
> 
> 1.  编写测试接口文件
> 
> 最简单的方法，就是直接写上请求方式和要请求的地址

#### 7. 快速生成漂亮的代码截图 ####

> 打开`VSCode`中的插件，搜索`Polacode-2019`
> 
> 使用方法：
> 
> 安装完成后,先打开你要分享的代码,然后按`Ctrl + Shift + p` 打开命令面板,
> 
> 然后再输入框中输入`Polacode`,就可以打开使用了.

#### 8. 实现注释代码高亮 ####

> 点击`VSCode`中的插件，然后在搜索栏中输入`Better Comments`，然后点击`install`就可以安装
> 
> 使用方法：安装非常简单，现在我们来看看都又什么效果。其实使用就是在注释开头加上特殊的符号。
> 
>  *  `！` ， 红色注释
>  *  `?` , 蓝色注释
>  *  `//` , 灰色删除线注释
>  *  `todo` ,橘红色注释
>  *  `*` , 浅绿色注释
> 
> 当然如果你看不上这些颜色，你也可以自己定义属于自己的颜色。方法如下：
> 
> 1.  点击插件上的小齿轮， 选择`Extension Setting`.
> 2.  点击`Edit in setting.json`选项，点击后打开了`settings.json`
> 3.  复制下面代码到`settings.json`,根据自己的喜好自定义了
> 4.  也可以增加新的注释颜色到`setting.json`中
>     
>         "better-comments.tags": [
>           { 
>             "tag": "!",
>             "color": "#FF2D00",
>             "strikethrough": false,
>             "backgroundColor": "transparent"
>           },
>           { 
>             "tag": "?",
>             "color": "#3498DB",
>             "strikethrough": false,
>             "backgroundColor": "transparent"
>           },
>           { 
>             "tag": "//",
>             "color": "#474747",
>             "strikethrough": true,
>             "backgroundColor": "transparent"
>           },
>           { 
>             "tag": "todo",
>             "color": "#FF8C00",
>             "strikethrough": false,
>             "backgroundColor": "transparent"
>           },
>           { 
>             "tag": "*",
>             "color": "#98C379",
>             "strikethrough": false,
>             "backgroundColor": "transparent"
>           }
>         ]

#### 9. 自己`vscode`常用 ####

> 1.  Auto Rename Tag
> 2.  Debugger for Chrome
> 3.  `vscode中文` Chinese
> 4.  HTML Boilerplate
> 5.  HTML Snippets
> 6.  `jQuery Code Snippets`
> 7.  `JSON5 syntax`
> 8.  Live Server
> 9.

#### 10. 处理样式 ####

> 1.  `Beautify css / sass / scss / less`
> 2.  `CSS Formatter`
> 3.  `CSS Modules`
> 4.  `CSS Peek`
> 5.  `CSS Tree`
> 6.  `cssrem`
> 7.  Easy LESS
> 8.  open in browser
> 9.  `Path Intellisense`
> 10. `vscode-icons`

### 微信小程序专区 ###

> 1.  小程序开发助手
> 2.  微信小程序标签、属性的智能补全 `minapp`
> 3.  微信小程序`wepy`框架 `wepy snippets`
> 4.

### React专区 ###

> 1.  `React Redux ES6 Snippets`
> 2.  React-Native
> 3.  `Reactjs code snippets`
> 4.  Simple React Snippets

### `Vue`专区 ###

`Live Server` 快速启动文件服务器，代码实时编译

`Bracket pair Colorizer2` 将同一组括号，标注同一颜色

`Vetur` 扩展完整标签、语法高亮等

`Vue VSCode Snippets` 运行脚本

`View In Browser`

`Material Theme` `Community Material Theme` vscode主题颜色

`Material Theme Icons` 图标插件