VSCode常用插件推荐

Bertha 。 2023-10-11 12:59 0阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th style="border-color:#cc0033;text-align:left;vertical-align:middle;width:300px;">插件</th> 
   <th style="border-color:#cc0033;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Debugger for Chrome</td> 
   <td>很好用的debug插件</td> 
  </tr> 
  <tr> 
   <td>Beautify</td> 
   <td>格式化代码</td> 
  </tr> 
  <tr> 
   <td>Prettier</td> 
   <td>格式化代码</td> 
  </tr> 
  <tr> 
   <td>SCSS Formatter</td> 
   <td>格式化SCSS</td> 
  </tr> 
  <tr> 
   <td>Bracket Pair Colorizer</td> 
   <td>让括号拥有独立的颜色，易于区分。可以配合任意主题使用</td> 
  </tr> 
  <tr> 
   <td><a href="https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dstreetsidesoftware.code-spell-checker" rel="nofollow">Code Spell Checker</a></td> 
   <td>单词拼写是否有误，并给出提示</td> 
  </tr> 
  <tr> 
   <td> <p>Turbo Console Log</p> </td> 
   <td><strong>快捷添加 console.log</strong></td> 
  </tr> 
  <tr> 
   <td> <p>vscode-json</p> </td> 
   <td>处理 JSON 文件</td> 
  </tr> 
  <tr> 
   <td>Auto Rename Tag</td> 
   <td>自动重命名配对的HTML / XML标签</td> 
  </tr> 
  <tr> 
   <td>change-case</td> 
   <td>用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等</td> 
  </tr> 
  <tr> 
   <td> <p>CSS Peek</p> </td> 
   <td><strong>显示css内容，定位 CSS 类名</strong></td> 
  </tr> 
  <tr> 
   <td><strong>Material Theme</strong></td> 
   <td><strong>为 tabs 设置强调色</strong></td> 
  </tr> 
  <tr> 
   <td>SVG Viewer</td> 
   <td>SVG查看器</td> 
  </tr> 
  <tr> 
   <td>Chinese (Simplified) Language Pack for Visual Studio Code</td> 
   <td>中文简体语言包</td> 
  </tr> 
  <tr> 
   <td>Color Info</td> 
   <td>提供你在 CSS 中使用颜色的相关信息</td> 
  </tr> 
  <tr> 
   <td>ESLint</td> 
   <td>检查js，ts编程时的语法错误</td> 
  </tr> 
  <tr> 
   <td>Git History</td> 
   <td>可以用命令行输入&gt;git 进行revert等操作</td> 
  </tr> 
  <tr> 
   <td>Image Preview</td> 
   <td>鼠标移到路径里显示图像预览</td> 
  </tr> 
  <tr> 
   <td> <p>Angular 8 Snippets</p> </td> 
   <td>angular代码片段</td> 
  </tr> 
  <tr> 
   <td>Node.js Modules Intellisense</td> 
   <td>可以在导入语句中自动完成JavaScript / TypeScript模块</td> 
  </tr> 
 </tbody> 
</table>

**1、power mode：非常炫酷高逼格的敲代码的效果动画**

安装插件后，在 seting.json 添加以下几行代码

"powermode.enabled": true, //启动效果
    "powermode.presets": "flames", // flames 火花效果
    "powermode.enableShake": false // 关闭代码抖动

"powermode.presets"支持："particles", "fireworks", "flames", "magic", "clippy", "simple-rift", "exploding-rift"

**2、indent-rainbow：凸显缩进，让你的缩进一目了然**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

**3、BookMarks插件：书签插件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1][]

安装后在上面显示所有书签。

书签：Toggle   标记/取消标记带书签的行
    书签：Jump to Next  将光标向前移动到下面的书签
    书签：Jump to Previous  将光标向后移动到上面的书签
    书签：List  列出当前文件中的所有书签
    书签：List from All Files  列表列出所有文件中的所有书签
    书签：Clear   删除当前文件中的所有书签
    书签：Clear from All Files  中清除从所有文件中删除所有书签
    书签（选择）：Select Lines  选择包含书签的所有行
    书签（选择）：Expand Selection to Next  将所选文本展开到下一个书签
    书签（选择）：Expand Selection to Previous  将所选文本展开到上一个书签
    书签（选择）：Shrink Selection   将选择文本缩小到上一个/下一个书签

**4、GitLens：鼠标所在行显示git日志**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191102233032552.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191108140114875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA==,size_16,color_FFFFFF,t_70