【vscode】vscode常用插件介绍

article/2025/10/5 11:38:27

1、Angular Snippets（angular片段）

在这里插入图片描述
这个扩展为 TypeScript 和 HTML 添加了 Angular 的代码片段。

2、Auto Close Tag（自动闭合标签）

在这里插入图片描述
自动添加 HTML/XML 关闭标记。

3、Auto Rename Tag（自动重命名标签）

在这里插入图片描述
自动重命名成对的 HTML/XML 标记。

3、Bracket Pair Colorizer 2 （括号对色）

在这里插入图片描述用于为匹配括号着色的可定制扩展，v2 使用与 VSCode 相同的括号解析引擎，大大提高了速度和准确性。因为清理了设置，打破了向后兼容性，所以发布了一个新版本。

4、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

在这里插入图片描述
Visual Studio Code 的简体中文 (简体中文) 语言包，此中文（简体）语言包为 VS Code 提供本地化界面。

5、Code Runner（代码运行器）

在这里插入图片描述
在这里插入图片描述

6、Code Spell Checker（代码拼写检查器）

在这里插入图片描述
一个基本的拼写检查器，适用于 camelCase 代码。这个拼写检查器的目标是帮助捕捉常见的拼写错误，同时保持低误报的数量。

7、Color Highlight（颜色高亮）

在这里插入图片描述
这个扩展样式可以在您的文档中找到 css/web 颜色。

8、ESLint

在这里插入图片描述

9、IntelliSense for CSS class names in HTML（HTML 中 CSS 类名称智能感知）

在这里插入图片描述
class一个 Visual Studio Code 扩展，它根据在工作区中找到的定义或通过link元素引用的外部文件为 HTML 属性提供 CSS 类名称补全。

10、JavaScript (ES6) code snippets（JavaScript (ES6) 代码片段）

在这里插入图片描述
在这里插入图片描述

11、Live Server（本地服务器）

在这里插入图片描述
在这里插入图片描述

12、Material Icon Theme（材质图标主题）

在这里插入图片描述
将 Material Design 图标添加到您的 VS 代码中。

13、open in browser（在浏览器中打开）

在这里插入图片描述
允许在默认浏览器或应用程序中打开当前文件。

14、Path Intellisense（路径智能感知）

在这里插入图片描述
自动完成文件名的 Visual Studio Code 插件。

15、Prettier - Code formatter（Prettier - 代码格式化）

在这里插入图片描述

16、Turbo Console Log（Turbo控制台日志）

在这里插入图片描述
通过自动化编写有意义的日志消息的操作使调试变得更加容易。

17、Vue Language Features (Volar)（vue语言功能volar）

在这里插入图片描述
VueLF 是一个专门为 Vue 3 构建的语言支持插件。它基于@vue/reactivity按需计算一切，实现原生 TypeScript 语言服务级别的性能。

18、One Dark Pro（代码主题插件）

在这里插入图片描述
Atom 标志性的 One Dark 主题，也是VS Code安装最多的主题之一！

19、jsdoc注释插件

在这里插入图片描述
生成头部注释和注释的方便功能，支持简单方便的语言功能，灵活，文档多功能，使用方便！
在vscode setting配置项中加入：

// 头部注释
"fileheader.customMade": {// Author字段是文件的创建者 可以在specialOptions中更改特殊属性// 公司项目和个人项目可以配置不同的用户名与邮箱 搜索: gitconfig includeIf  比如: https://ayase.moe/2021/03/09/customized-git-config/// 自动提取当前git config中的: 用户名、邮箱"Author": "git config user.name && git config user.email", // 同时获取用户名与邮箱// "Author": "git config user.name", // 仅获取用户名// "Author": "git config user.email", // 仅获取邮箱// "Author": "OBKoro1", // 写死的固定值 不从git config中获取"Date": "Do not edit", // 文件创建时间(不变)// LastEditors、LastEditTime、FilePath将会自动更新 如果觉得时间更新的太频繁可以使用throttleTime(默认为1分钟)配置更改更新时间。"LastEditors": "git config user.name && git config user.email", // 文件最后编辑者 与Author字段一致// 由于编辑文件就会变更最后编辑时间，多人协作中合并的时候会导致merge// 可以将时间颗粒度改为周、或者月，这样冲突就减少很多。搜索变更时间格式: dateFormat"LastEditTime": "Do not edit", // 文件最后编辑时间// 输出相对路径，类似: /文件夹名称/src/index.js"FilePath": "Do not edit", // 文件在项目中的相对路径 自动更新// 插件会自动将光标移动到Description选项中 方便输入 Description字段可以在specialOptions更改"Description": "", // 介绍文件的作用、文件的入参、出参。// custom_string_obkoro1~custom_string_obkoro100都可以输出自定义信息// 可以设置多条自定义信息 设置个性签名、留下QQ、微信联系方式、输入空行等"custom_string_obkoro1": "", // 版权声明 保留文件所有权利 自动替换年份 获取git配置的用户名和邮箱// 版权声明获取git配置, 与Author字段一致: ${git_name} ${git_email} ${git_name_email}"custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by ${git_name_email}, All Rights Reserved. "// "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by 写死的公司名/用户名, All Rights Reserved. "
},
// 函数注释
"fileheader.cursorMode": {"description": "", // 函数注释生成之后，光标移动到这里"param": "", // param 开启函数参数自动提取 需要将光标放在函数行或者函数上方的空白行"return": "",
},
// 插件配置项
"fileheader.configObj": {"autoAdd": true, // 检测文件没有头部注释，自动添加文件头部注释"autoAddLine": 100, // 文件超过多少行数 不再自动添加头部注释"autoAlready": true, // 只添加插件支持的语言以及用户通过`language`选项自定义的注释"supportAutoLanguage": [], // 设置之后，在数组内的文件才支持自动添加// 自动添加头部注释黑名单"prohibitAutoAdd": ["json"],"prohibitItemAutoAdd": [ "项目的全称禁止项目自动添加头部注释, 使用快捷键自行添加" ],"folderBlacklist": [ "node_modules" ], // 文件夹或文件名禁止自动添加头部注释"wideSame": false, // 头部注释等宽设置"wideNum": 13,  // 头部注释字段长度 默认为13"functionWideNum": 0, // 函数注释等宽设置 设为0 即为关闭// 头部注释第几行插入"headInsertLine": {"php": 2 // php文件 插入到第二行},"beforeAnnotation": {}, // 头部注释之前插入内容"afterAnnotation": {}, // 头部注释之后插入内容"specialOptions": {}, // 特殊字段自定义 比如: Author、LastEditTime、LastEditors、FilePath、Description、Date等"switch": {"newlineAddAnnotation": true // 默认遇到换行符(\r\n \n \r)添加注释符号},"moveCursor": true, // 自动移动光标到Description所在行"dateFormat": "YYYY-MM-DD HH:mm:ss","atSymbol": ["@", "@"], // 更改所有文件的自定义注释中的@符号"atSymbolObj": {}, //  更改单独语言/文件的@"colon": [": ", ": "], // 更改所有文件的注释冒号"colonObj": {}, //  更改单独语言/文件的冒号"filePathColon": "路径分隔符替换", // 默认值： mac: / window是: \"showErrorMessage": false, // 是否显示插件错误通知 用于debugger"writeLog": false, // 错误日志生成"CheckFileChange": false, // 单个文件保存时进行diff检查"createHeader": false, // 新建文件自动添加头部注释"useWorker": false, // 是否使用工作区设置"designAddHead": false, // 添加注释图案时添加头部注释"headDesignName": "random", // 图案注释使用哪个图案 "headDesign": false, // 是否使用图案注释替换头部注释// 自定义配置是否在函数内生成注释 不同文件类型和语言类型"cursorModeInternalAll": {}, // 默认为false 在函数外生成函数注释"openFunctionParamsCheck": true, // 开启关闭自动提取添加函数参数"functionParamsShape": ["{", "}"], // 函数参数外形自定义 // "functionParamsShape": "no type" 函数参数不需要类型"functionBlankSpaceAll": {}, // 函数注释空格缩进 默认为空对象 默认值为0 不缩进"functionTypeSymbol": "*", // 参数没有类型时的默认值"typeParamOrder": "type param", // 参数类型 和 参数的位置自定义"NoMatchParams": "no show param", // 没匹配到函数参数，是否显示@param与@return这两行 默认不显示param"functionParamAddStr": "", // 在 type param 后面增加字符串 可能是冒号，方便输入参数描述// 自定义语言注释，自定义取消 head、end 部分// 不设置自定义配置language无效 默认都有head、end"customHasHeadEnd": {}, // "cancel head and function" | "cancel head" | "cancel function" "throttleTime": 60000, // 对同一个文件 需要过1分钟再次修改文件并保存才会更新注释// 自定义语言注释符号，覆盖插件的注释格式"language": {// js后缀文件"js": {"head": "/$$","middle": " $ @","end": " $/",// 函数自定义注释符号：如果有此配置 会默认使用"functionSymbol": {"head": "/******* ", // 统一增加几个*号"middle": " * @","end": " */"},"functionParams": "typescript" // 函数注释使用ts语言的解析逻辑},// 一次匹配多种文件后缀文件 不用重复设置"h/hpp/cpp": {"head": "/*** ", // 统一增加几个*号"middle": " * @","end": " */"},// 针对有特殊要求的文件如：test.blade.php"blade.php":{"head": "<!--","middle": " * @","end": "-->",}},// 默认注释  没有匹配到注释符号的时候使用。"annotationStr": { "head": "/*","middle": " * @","end": " */","use": false},
}
``

http://chatgpt.dhexx.cn/article/faXAAF6I.shtml

相关文章

VSCode常用插件

VSCode常用插件

一、VSCode常用的插件 目录 1.Chinese (Simplified) 2.Auto Rename Tag 3.One Dark Pro 颜色主题 4.格式化代码&#xff08;vscode系统自带&#xff09; 5.open in browser 浏览器预览页面 ​6. Live Server 实时预览&#xff08;推荐&#xff09; 7. vsc…
阅读更多...
VsCode 插件推荐（个人常用）

VsCode 插件推荐（个人常用）

效率规划 Chinese (Simplified) Language Pack for Visual Studio Code 汉化 Open in Browser 打开外部浏览器 settings sync 同步所有设置和插件 wakatime 编程时间及行为跟踪统计 koroFileHeader 在vscode中用于生成文件头部注释和函数注释的插件 自动补全类 Auto Rename …
阅读更多...
VSCode常用插件整理

VSCode常用插件整理

文章目录 1.Auto Rename Tag2.GitLens3.vscode-icons4. Auto Close Tag5.ES7 React/Redux/React-Native snippets6.JavaScript Debugger (Nightly)7.Image preview8.Chinese (Simplified)9.Todo Tree10. Tabnine11.Live Server 1.Auto Rename Tag 该插件可以帮助开发者在重命名…
阅读更多...
vscode常用的9个插件，推荐给你们

vscode常用的9个插件，推荐给你们

1. Settings Sync 开发必备神器之一&#xff01;可以帮助你在不同的设备之间同步vscode所有的配置、插件&#xff01;&#xff01;! 虽然配置有好几个步骤&#xff0c;但是一旦配置好了之后使用非常的方便&#xff0c;只需要记住快速上传和快速下载的快捷键即可。甚至你可以选…
阅读更多...
数组的浅拷贝与深拷贝

数组的浅拷贝与深拷贝

文章目录 1 数据类型2 浅拷贝与深拷贝3 实现深拷贝方法3.1 JSON.string() 结合 JSON.parse()3.2 递归 4 JS 中的拷贝方法4.1 concat()4.2 slice()4.3 展开运算符&#xff08;...&#xff09;4.4 Object.assign() 5 参考文章 1 数据类型 在 JavaScript 中&#xff0c;数据被分为…
阅读更多...
浅谈一下js的浅拷贝和深拷贝

浅谈一下js的浅拷贝和深拷贝

目录 一、什么是拷贝 二、浅拷贝和深拷贝概念 2.1 浅拷贝 代码 2.2深拷贝 代码 2.3 jQuery中的拷贝 三、深拷贝应用场景 一、什么是拷贝 谈到拷贝的话&#xff0c;大家应该是不陌生的&#xff0c;拷贝简单来说就是复制。 复制的话&#xff0c;这里就得想到js的两种数据…
阅读更多...
前端面试：浅拷贝和深拷贝的区别？

前端面试：浅拷贝和深拷贝的区别？

前些天发现了一个巨牛的人工智能学习博客&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转 那么大家晚上好&#xff0c;我是今天晚上的主讲老师&#xff0c;我是兔哥。 我们在面试中经常会被问到浅拷贝和深拷贝的区别&#xff0c;正好群里…
阅读更多...
Java 中的浅拷贝和深拷贝

Java 中的浅拷贝和深拷贝

无论是浅拷贝还是深拷贝&#xff0c;都可以通过 Object 类的 clone() 方法来完成&#xff1a; /*** 拷贝** author qiaohaojie* date 2023/3/5 15:58*/ public class CloneTest {public static void main(String[] args) throws Exception {Person person1 new Person(23, &…
阅读更多...
Java浅拷贝和深拷贝的方式

Java浅拷贝和深拷贝的方式

文章目录 1. 前言2. 概念介绍2.1 拷贝 / 克隆的概念2.2 为什么需要拷贝方法&#xff1f;2.3 什么是浅拷贝&#xff1f;浅拷贝和深拷贝的区别是什么&#xff1f; 3. 深拷贝的实现方式3.1 手动深拷贝3.2 序列化方式3.2.1 自定义序列化工具函数3.2.2 commons-lang3 的序列化工具类…
阅读更多...
JS 浅拷贝和深拷贝详解(巨详细)

JS 浅拷贝和深拷贝详解(巨详细)

目录 一、前置知识详解 1.1.JavaScript数据类型 1.2.理解传值和传址 二、浅拷贝 2.1.浅拷贝的定义和原理 2.2.实现浅拷贝的方法 2.2.1.手写递归实现 2.2.2.利用展开语法实现浅拷贝 2.2.3.Object.assign进行对象的合并 2.2.4.利用Array.prototype.,slice() 2.2.5.利用…
阅读更多...
SV中的浅拷贝和深拷贝

SV中的浅拷贝和深拷贝

1.浅拷贝 浅拷贝&#xff1a; 只拷贝对象中的数据变量&#xff0c;而对于对象中的数据操作(一般为任务和函数)和其中定义的其他类的句柄&#xff0c;采用类似“引用”的方式&#xff0c;浅拷贝前后共用同一内存空间。 可以使用new操作符进行复制。如果一个类包含指向另一个类的…
阅读更多...
什么是浅拷贝和深拷贝？

什么是浅拷贝和深拷贝？

文章目录 1、什么是浅拷贝&#xff1f;2、什么是深拷贝&#xff1f;2.1、常见的深拷贝方式 在Java语言中&#xff0c;当我们需要拷贝一个Java对象的时候&#xff0c;常见的会有两种方式的拷贝:浅拷贝与深拷贝。 浅拷贝&#xff1a;只是拷贝了源对象的地址&#xff0c;所以源对象…
阅读更多...
基于java实现浅拷贝和深拷贝

基于java实现浅拷贝和深拷贝

目录 1、概念2、浅拷贝2.1、浅拷贝实战 3、深拷贝3.1、嵌套 clone 方法3.2、使用序列化流3.3、使用开源工具类 1、概念 浅拷贝&#xff1a;在拷贝一个对象时&#xff0c;复制基本数据类型的成员变量&#xff0c;但对引用数据类型的成员变量只进行引用的传递&#xff08;复制其…
阅读更多...
js实现浅拷贝和深拷贝

js实现浅拷贝和深拷贝

一.数据类型 数据分为基本数据类型和引用数据类型 基本数据类型(String, Number, Boolean, Null, Undefined&#xff0c;Symbol) 引用数据类型&#xff08;Object[Array属于Object]&#xff09; 基本数据类型的特点&#xff1a;直接存储在栈(stack)中的数据 引用数据类型的特点…
阅读更多...
浅拷贝和深拷贝

浅拷贝和深拷贝

最近学习string类的时候感觉这里概念有点混淆&#xff0c;浅拷贝与深拷贝的区别&#xff0c;上网查了一下&#xff0c;原来没我想 的难么复杂&#xff0c;以下是我的理解&#xff0c;如果有不对的地方求大佬留言交流交流。 浅拷贝&#xff1a; 顾名思义就是浅层的拷贝&#xff…
阅读更多...
理解浅拷贝和深拷贝以及实现方法

理解浅拷贝和深拷贝以及实现方法

一、数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined&#xff0c;Symbol)和引用数据类型Object&#xff0c;包含&#xff08;function&#xff0c;Array&#xff0c;Date&#xff09;。 1、基本数据类型的特点&#xff1a;直接存储在栈内存中的数据 …
阅读更多...
VUE浅拷贝和深拷贝

VUE浅拷贝和深拷贝

文章目录 前言一、数据类型1.1.基本数据类型1.2.引用数据类型1.3.区别 二、浅拷贝2.1.定义2.2.浅拷贝特点 三、深拷贝3.1.定义3.2.深拷贝特点 四、拷贝实现方案4.1.Object.assign()4.2.concat()4.3.slice()4.4.JSON.parse(JSON.stringify())4.5.cloneDeep() 五、结论 前言 在理…
阅读更多...
C# 中的浅拷贝和深拷贝

C# 中的浅拷贝和深拷贝

在本文中&#xff0c;将通过示例讨论C&#xff03;中的浅拷贝和深拷贝。这是上一篇文章的续篇。因此&#xff0c;在继续本文之前&#xff0c;请阅读以前的文章&#xff0c;其中之前使用示例讨论了C&#xff03;中的原型设计模式。 什么是深拷贝和浅拷贝&#xff1f; 浅复制和…
阅读更多...
JAVA 浅拷贝和深拷贝

JAVA 浅拷贝和深拷贝

拷贝 拷贝即对已有的数据创建一个副本&#xff0c;在 Java 中&#xff0c;拷贝可分为引用拷贝、浅拷贝、深拷贝。 引用拷贝 在 Java 中&#xff0c;实例化后的对象存储在堆区&#xff0c;而局部变量存放在局部变量表(栈)中&#xff0c;如&#xff1a; public void yinYongC…
阅读更多...
js浅拷贝和深拷贝

js浅拷贝和深拷贝

1、JS数据类型 基本数据类型&#xff1a;Boolean、String、Number、null、undefined 引用数据类型&#xff1a;Object、Array、Function、RegExp、Date等 2、深拷贝与浅拷贝 深拷贝和浅拷贝都只针对引用数据类型&#xff0c; 浅拷贝会对对象逐个成员依次拷贝&#xff0c;但…
阅读更多...
推荐文章

Copyright @ 2022~2023