首页 > 其他分享 >VS Code常用插件整理

VS Code常用插件整理

时间:2024-06-23 13:28:52浏览次数:29  
标签:插件 Code 标签 代码 VS HTML Auto

目录

1.Chinese (Simplified) (简体中文)          VS coed汉化

2.IntelliCode                                           智能补全代码

3.IntelliCode API Usage Examples        智能代码API使用示例

4.jQuery Code Snippets                         jquery代码提示

5.Auto Close Tag                                    标签自动闭合

6.Auto Rename Tag                                标签重命名对称

7.HTML Snippets                                    快速生成HTML文档格式

8.HTML CSS Support                             智能提示CSS类名以及id

9.Auto Import                                 ​​​​​​​        ​​​​​​​  自动导入

10.Color Highlight                ​​​​​​​        ​​​​​​​        ​​​​​​​    颜色代码高亮

11.Live Server                ​​​​​​​        ​​​​​​​        ​​​​​​​          ​​​​​​​“热重载”

12.Path Intellisense                ​​​​​​​        ​​​​​​​        ​​​​​​​  智能路径补全

13.Image preview                ​​​​​​​        ​​​​​​​        ​​​​​​​     图片预览

14.Code Translate                ​​​​​​​        ​​​​​​​        ​​​​​​​    划词翻译

15.IntelliJ IDEA Key Bindings                ​​​​​​​   支持IDE快捷键

 16.Turbo Console Log                ​​​​​​​        ​​​​​​​     console.log快捷操作

17.Git Graph                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​      Git图形化

  18.ESLint                 ​​​​​​​                ​​​​​​​        ​​​​​​​        ​​​​​​​代码规范检查

19.Prettier - Code formatter                ​​​​​​​        代码格式化

20.外观美化插件推荐

主题

One Dark Pro  

Material Theme  

Tokyo Night    

文件图标

Material Icon Theme

vscode-icons

相关配置:

1.Prettier - Code formatter


1.Chinese (Simplified) (简体中文) 

VScode汉化支持

15460ccefb684d4a941e6b3d99ee41ed.png

2.IntelliCode    

代码补全(智能化代码)

26041abbb2b54deea380b929756a2cb3.png

3.IntelliCode API Usage Examples      

 智能代码API使用示例

3bf1d4a40f6f406e973759f83c5b2f47.png

4.jQuery Code Snippets

jquery代码提示

b4b5453c70194e228601092cf8b968d3.png

5.Auto Close Tag

新增标签时,自动闭合标签。

0830b90894d046ee8d3999a1eabd7157.png

6.Auto Rename Tag

修改自闭和标签时,修改 ”开始标签/结束标签“ 时,”结束标签/开始标签“  同时变更(自闭和标签和自定义标签会存在一些问题,请谨慎使用)。

cecc9831675d4c168905b69298cd8899.png

7.HTML Snippets

用于快捷生成HTML标签。

7898f3e7a6da4435a4cb4be9ea10d0aa.png

8.HTML CSS Support

智能提示CSS类名以及id

40e07b7e484f49d49382d287cba4a4f6.png

9.Auto Import 

自动导入

75da5723eb6e496688493531b555028c.png

10.Color Highlight

在编辑器中颜色高亮显示,比如:#fff#ffffffwhitergb(255,255,255)等等。

68fe0b2739e84a639d3ea8e9aa52d8ec.png

11.Live Server

为静态和动态页面启动具有实时重新加载功能的本地开发服务器,类似于webpack中的热重载功能。

e4b432623b2d455ebca494b04a6c18e4.png

12.Path Intellisense

智能路径补全

d9952803c6474b349630819735e7b479.png

13.Image preview

鼠标悬停可以预览图片

鼠标悬停在图片URL上时,可以预览图片,显示图片的大小和尺寸。不仅仅在css中,也可以在jsvue等文件中预览

b3eeb6997eaf4ea1a3e3fd8486d7e057.png

settings:{"gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图}

14.Code Translate

 vscode 滑词翻译插件

095ff26919f148e1ad8e9cb77d7ee361.png

15.IntelliJ IDEA Key Bindings

VSCode使用IDEA快捷键

d37697f573624d829522a73227eb78ad.png

 16.Turbo Console Log

快速添加 console.log 信息,js debug 必备

29a96b0faa5f424c8990c98c946ea314.png

快捷键

ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log

alt + shift + c 注释所有 console.log

alt + shift + u 启用所有 console.log

alt + shift + d 删除所有 console.log

17.Git Graph

Git 图形化显示和操作

652e5c2a80144cc4be43d0cb0002666c.png

18.ESLint 

检查并确保代码编写的规范化,特别是在多人协同合作时(JS不是编译性语言,编写代码时无法发现错误)

4544c855a5444e03b526e73c38ba40fb.png

更多配置详情参考ESLint 中文网

19.Prettier - Code formatter

9a01d5461fd74dedbc0785d9d3f1048f.png

20.外观美化插件推荐

主题

One Dark Pro  

最受欢迎的暗黑主题

9e9cb96d913840cc8062dcf87deebdc9.png

Material Theme  

拥有非常多的主题,都很不错,也是有名的主题插件

d66582833b0c448a88b162258f36a21f.png

Tokyo Night    

不刺眼,色彩设计的很合理

71efae9009d44bc59562b7f17631c951.png

文件图标

Material Icon Theme

拥有超多的文件图标,色彩饱和度高。

da1684352d234511a0103972e4476563.png

vscode-icons

 也是非常不错的文件图标,下载量很高

d7589d6cf0e5487ab1c6ed7f2c67d15a.png

相关配置:

1.Prettier - Code formatter

        1.下载并启用插件

        2.创建并配置 .prettierrc文件

        0db415aa6457474188a021a62613f3e9.png

       附上本人用于HTML文档编写的 .prettierrc配置:

{  
    "printWidth": 80, // 每行最多字符数(超过会换行)  
    "tabWidth": 4, // 制表符(tab)的空格数  
    "useTabs": true, // 是否使用制表符(tab)进行缩进,false 表示使用空格  
    "semi": false, // 末尾无分号
    "singleQuote": true, // 单引号代替双引号
    "trailingComma": "none", // 禁止尾随逗号
    "bracketSpacing": true, // 在对象的大括号之间添加空格
    "arrowParens": "always", // 箭头函数参数周围的括号(始终添加)  
    "htmlWhitespaceSensitivity": "css", // 对 HTML 中的空白字符的敏感度
    "endOfLine": "lf", // 行尾字符('lf'、'crlf'、'cr')  
    "proseWrap": "preserve", //Markdown换行方式('always'、'never'、'preserve')  
    "overrides": [  
      {  
        "files": "*.html", // 特定于 HTML 文件的配置  
        "options": {  
          "parser": "html" // 指定使用 HTML 解析器  
        }  
      }  
    ]  
}

        3.设置  保存时自动格式化  和  默认Prettier格式化

        鼠标右键选择”使用....格式化“设置默认Prettier格式化

1fd84a7d07214a64903e28b94595a1ca.png

其他相关补充:

VS coed常用插件(补充)-CSDN博客

-------------------------------------------------------------------------------------------------------------------------------

以上内容为学习笔记,如有不足,欢迎在下方评论中补充

标签:插件,Code,标签,代码,VS,HTML,Auto
From: https://blog.csdn.net/m0_61619549/article/details/139842226

相关文章

  • LeetCode 448. 找到所有数组中消失的数字(哈希表)
    448.找到所有数组中消失的数字思路:方法一,借助额外的0(n)空间sta进行哈希classSolution{public:vector<int>findDisappearedNumbers(vector<int>&nums){intn=nums.size();vector<int>sta(n,0);for(inti=0;i<n;i++){......
  • 【VMware vSphere】使用RVTools中的PowerShell脚本创建导出vSphere环境信息的自动化任
    RVTools是VMware生态系统中一个非常受欢迎且免费的Windows实用工具,用于收集并显示VMwarevSphere环境中的相关信息,如虚拟机、主机及集群等相关配置。RVTools利用VMwarevSphereManagementSDK8.0和CISRESTAPI提供的丰富数据来直接获取和收集信息,这在管理员对VMwa......
  • UNIQUE VISION Programming Contest 2024 Summer (AtCoder Beginner Contest 359)
    A-CountTakahashi(abc359A)解题思路遍历判断即可神奇的代码#include<iostream>#include<algorithm>#include<vector>#include<queue>#include<map>#include<set>#include<cstring>usingnamespacestd;#defineendl'\n......
  • 647. 回文子串(leetcode)
    647.回文子串(leetcode)题目描述给你一个字符串s,请你统计并返回这个字符串中回文子串的数目。回文字符串是正着读和倒过来读一样的字符串。子字符串是字符串中的由连续字符组成的一个序列。示例1输入:s=“abc”输出:3解释:三个回文子串:“a”,“b”,“c”......
  • Python vs MATLAB: 易于学习和代码可理解性的对比
    PythonvsMATLABPythonvsMATLAB:易于学习和代码可理解性**Python的易用性与代码理解****MATLAB的易用性与代码理解****哪个更易上手?****结论**PythonvsMATLAB:易于学习和代码可理解性在科学计算、工程模拟和数据分析领域,Python和MATLAB是两种广泛使用的编程......
  • LeetCode665.非递减数列
    LeetCode刷题记录文章目录......
  • Leetcode 力扣 125. 验证回文串 (抖音号:708231408)
    如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后,短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。字母和数字都属于字母数字字符。给你一个字符串 s,如果它是 回文串 ,返回 true ;否则,返回 false 。示例1:输入:s="Aman,aplan,......
  • Leetcode 力扣 128. 最长连续序列 (抖音号:708231408)
    给定一个未排序的整数数组 nums ,找出数字连续的最长序列(不要求序列元素在原数组中连续)的长度。请你设计并实现时间复杂度为 O(n) 的算法解决此问题。示例1:输入:nums=[100,4,200,1,3,2]输出:4解释:最长数字连续序列是[1,2,3,4]。它的长度为4。示例2:输入:nums=......
  • MybatisPlus逆向工程插件,无需编写任何配置文件,只需配置数据库信息,一键生成Entity、Con
    文章目录1.前言2.与其它逆向工程工具相比的优势3.下载插件4.准备工作4.1创建数据库和表(可跳过)4.2配置数据库信息4.2.1打开IDEA的菜单栏4.2.2找到工具,点击ConfigDatabase4.2.3填写连接数据库所需要的信息4.3导入MybatisPlus的Maven依赖和SpringWeb的Maven依......
  • 12. Lammps入门in文件vscode高亮插件-Lammps Syntax Highlighting
    来源:“码农不会写诗”公众号链接:Lammps入门in文件vscode高亮插件-LammpsSyntaxHighlighting文章目录01LammpsSyntaxHighlighting02安装03效果LammpsSyntaxHighlighting  工欲善其事必先利其器,Lammps语法高亮插件不仅是美观视觉必备,也是命令学习、......