VS Code常用插件

最新推荐文章于 2024-08-21 16:07:31 发布

Tom是只好猫

最新推荐文章于 2024-08-21 16:07:31 发布

阅读量2.2k

点赞数 1

文章标签： vscode javascript ide

原文链接：https://blog.csdn.net/weixin_39689394/article/details/112187960

版权

一、常用插件

Auto Close Tag

自动添加HTML / XML关闭标签（必备）

Auto Rename Tag

自动重命名配对的HTML / XML标签(必备)

Beautify

格式化javascript，JSON，CSS，Sass，和HTML

Bootstrap 4 & Font awesome snippets

包含Bootstrap 4＆Font awesome 的代码片段

Bracket Pair Colorizer

颜色识别匹配括号

Class autocomplete for HTML

智能提示HTML class =“”属性（必备）

Code Runner

非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现：

点击这个按钮就可以运行你的文件了（必备）

css peek

能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义（必备）

使用方法：将光标放在class里面的属性，右击

Dash

查文档必备，搭配 dash（不过似乎只有 mac 版） br/>快捷键 ctrl + h 它根据你当前选中的语言查找 dash 里面的文档

Debugger for Chrome

让 vscode 映射 chrome 的 debug功能，使静态页面都可以用 vscode 来打断点调试

简单使用：戳我

Document This

添加注释块

设置：


  
  
    
    
     
     
    
    
    
    
     
     
      
      "docthis.includeAuthorTag": 
      
      true,
      
      //出现
      
      @Author
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      "docthis.includeDescriptionTag": 
      
      true,
      
      //出现
      
      @Description
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      "docthis.authorName": 
      
      "shenzekun",
      
      //作者名字

快捷键：按两次Ctrl+alt+d

ESLint

EsLint可以帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。

配置：戳我

Font-awesome codes for html

用于 html 的Font-awesome代码片段

filesize

在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

Git History

以图表的形式查看git日志

使用 command+shift+p（Ctrl+shift+p）输入git log就可以看到了

Git Lens

git 日志插件

HTML CSS Support

在 html 标签上写class 智能提示当前项目所支持的样式（必备）

HTML Snippets

html 代码片段（必备）

htmlhint

html代码检测

htmltagwrap

可以在选中HTML标签中外面套一层标签

演示图upload-images.jianshu.io

使用：选择一大段代码，然后按“Alt + W”

Indenticator

突出目前的缩进深度

演示图upload-images.jianshu.io

IntelliSense for CSS class names

智能提示 css 的 class 名

Image Preview

鼠标移到路径里显示图像预览

JavaScript (ES6) code snippets

es6代码片段（必备）

JavaScript Snippet Pack

js代码片段（必备）

jQuery Code Snippets

jQuery 代码片段

Live Sass Compiler

实时编译 sass ,不过需要配置，附上我的配置


  
  
    
    
     
     
    
    
    
    
     
     
      
      "liveSassCompile.settings.formats"
      
      :
      
      [
     
     
    
    

    
    
     
     
    
    
    
    
     
             
      
      // You can add more
     
     
    
    

    
    
     
     
    
    
    
    
     
             
      
      {
     
     
    
    

    
    
     
     
    
    
    
    
     
                 
      
      "format"
      
      : 
      
      "compressed"
      
      ,
      
      //压缩
     
     
    
    

    
    
     
     
    
    
    
    
     
                 
      
      "extensionName"
      
      : 
      
      ".min.css"
      
      ,
      
      //编译后缀名
     
     
    
    

    
    
     
     
    
    
    
    
     
                 
      
      "savePath"
      
      : 
      
      "./css"
      
      //编译保存的路径
     
     
    
    

    
    
     
     
    
    
    
    
     
             
      
      }
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      ]
      
      ,

使用

markdownlint

markdown 语法检查

Node.js Modules Intellisense

可以在导入语句中自动完成JavaScript / TypeScript模块。

npm Intellisense

在导入语句中自动填充npm模块,跟Node.js Modules Intellisense差不多

open in browser

当前的 html 文件用浏览器打开，类似 webstorm 的那四个小浏览器图标功能，前提条件html 文件必须保存

快捷键alt+b

Output Colorizer

输出提示的文字颜色有一些变化，方便获取关键信息

Path Intellisense

路径自动补全（必备）

Visual Studio IntelliCode

Visual Studio IntelliCode是一款人工智能辅助的插件，从 GitHub 上高星的开源项目经过大量的机器学习训练，给开发者提供最合适的 IntelliSense 上下文建议功能，除此之外，还有代码格式化和规则推测等功能。目前支持 TypeScript、JavaScript、Java、Python。