Vscode常用插件及设置(前端版,实时更新ing

article/2025/10/5 11:02:48

1.open in borwser:

写完代码后鼠标右击将代码在浏览器中运行


在这里插入图片描述

2.Chinese

汉化Vscode
在这里插入图片描述

3.vscode-icons

html、css、js、less图标显示
在这里插入图片描述

在这里插入图片描述

4.Live Server

代码块写完后使用Live Server,每次修改代码Ctrl+S后浏览器无需再刷新即可跟着变化,
在这里插入图片描述
在这里插入图片描述
与win+左键或win+右键搭配爽歪歪,直接效率起飞!!!
在这里插入图片描述

5.HTML to CSS autocompletion

外联样式提示插件
在这里插入图片描述

6.Error Lens

错误提示信息
在这里插入图片描述

7.Easy LESS

将.less文件生成一个.css文件,在px单位转换到rem单位过程中使用最为方便
在这里插入图片描述

8.Auto Rename Tag

自动重命名HTML/XML标签
在这里插入图片描述

9.Auto Close Tag

自动闭合标签插件,成对标签输入时只需输出前面一个标签即可补全后面标签

在这里插入图片描述

10.代码换行实现自动对齐

  • 左下角齿轮选“设置”
  • 搜索框搜‘Editor: Word Wrap’,将off改成on
    在这里插入图片描述

11.Ctrl + S自动对齐

  • 左下角齿轮选“设置”
  • 搜索框搜‘Format On Save’,勾选即可!
    在这里插入图片描述

12.行内标签自动换行

在敲代码时候,我们使用a*5时,想获得到的代码形式时这样的
在这里插入图片描述
但很多情况下,呈现出来的效果是这样的
在这里插入图片描述
我们只需在设置 ——> 上方搜索“Syntax Profiles” ——> 在settings.json中编辑中添加 "inline_break": 2 即可
在这里插入图片描述

13.JavaScript (ES6) code snippets

ES6中语法代码智能提示
在这里插入图片描述

14.自动保存代码

设置——>Auto Save
在这里插入图片描述

15.Vue 3 Snippets

针对Vue的代码的插件
在这里插入图片描述

16.VueHelper

1)可以自动提示 Vue.js 组件选项的语法
2)为 Vue.js 标签提供语法高亮
3)增强代码智能提示的功能
4)为 Vue.js 组件提供快速跳转功能
在这里插入图片描述

17.ESLint

代码检查工具。规范我们写代码的格式, 保证团队内成员风格统一该插件与 11.Ctrl + S自动对齐 设置有冲突,使用该插件时应把保存时自动格式化设置关掉
在这里插入图片描述
在该插件扩展设置中添加以下代码:(在VSCode中启用ESLint插件,并在保存文件时自动运行ESLint检测并修复代码问题。)

"eslint.run": "onType",
"editor.codeActionsOnSave": {"source.fixAll.eslint": true
}

http://chatgpt.dhexx.cn/article/4HyFClt3.shtml

相关文章

VSCode常用插件汇总

这篇博客主要是我使用vscode过程中的插件汇总,使用了这么长时间,总想有个总结,也方便日后查看,这里我将我使用的插件分为基础、框架、工具三个类型。 官网地址 VSCode插件官网地址,里面有很多的插件可以使用。 基础插…

【整理总结】VSCode常用插件和好用配置(小白必看)

本篇文章给大家总结分享一些VSCode常用插件和好用配置(超详细),希望可以给刚入坑前端的小伙伴一些帮助。本文很长,如果能认真看完,你一定会有所收获。 一、VSCode常用插件推荐 工欲善其事,必先利其器。本文介绍一些前端…

VScode 常用必备插件

Visual Studio Code(简称“VS Code”)在前端开发的过程中必不可少,vscode作为代码编辑器,开源、免费、颜值高。更关键的是,丰富的插件,能够提高开发效率,你值得拥有。我们团队中大部分人都在用&…

【vscode】vscode常用插件介绍

1、Angular Snippets(angular片段) 这个扩展为 TypeScript 和 HTML 添加了 Angular 的代码片段。 2、Auto Close Tag(自动闭合标签) 自动添加 HTML/XML 关闭标记。 3、Auto Rename Tag(自动重命名标签) 自…

VSCode常用插件

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

VsCode 插件推荐(个人常用)

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

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个插件,推荐给你们

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

数组的浅拷贝与深拷贝

文章目录 1 数据类型2 浅拷贝与深拷贝3 实现深拷贝方法3.1 JSON.string() 结合 JSON.parse()3.2 递归 4 JS 中的拷贝方法4.1 concat()4.2 slice()4.3 展开运算符(...)4.4 Object.assign() 5 参考文章 1 数据类型 在 JavaScript 中,数据被分为…

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

目录 一、什么是拷贝 二、浅拷贝和深拷贝概念 2.1 浅拷贝 代码 2.2深拷贝 代码 2.3 jQuery中的拷贝 三、深拷贝应用场景 一、什么是拷贝 谈到拷贝的话,大家应该是不陌生的,拷贝简单来说就是复制。 复制的话,这里就得想到js的两种数据…

前端面试:浅拷贝和深拷贝的区别?

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

Java 中的浅拷贝和深拷贝

无论是浅拷贝还是深拷贝,都可以通过 Object 类的 clone() 方法来完成: /*** 拷贝** 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浅拷贝和深拷贝的方式

文章目录 1. 前言2. 概念介绍2.1 拷贝 / 克隆的概念2.2 为什么需要拷贝方法?2.3 什么是浅拷贝?浅拷贝和深拷贝的区别是什么? 3. 深拷贝的实现方式3.1 手动深拷贝3.2 序列化方式3.2.1 自定义序列化工具函数3.2.2 commons-lang3 的序列化工具类…

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中的浅拷贝和深拷贝

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

什么是浅拷贝和深拷贝?

文章目录 1、什么是浅拷贝?2、什么是深拷贝?2.1、常见的深拷贝方式 在Java语言中,当我们需要拷贝一个Java对象的时候,常见的会有两种方式的拷贝:浅拷贝与深拷贝。 浅拷贝:只是拷贝了源对象的地址,所以源对象…

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

目录 1、概念2、浅拷贝2.1、浅拷贝实战 3、深拷贝3.1、嵌套 clone 方法3.2、使用序列化流3.3、使用开源工具类 1、概念 浅拷贝:在拷贝一个对象时,复制基本数据类型的成员变量,但对引用数据类型的成员变量只进行引用的传递(复制其…

js实现浅拷贝和深拷贝

一.数据类型 数据分为基本数据类型和引用数据类型 基本数据类型(String, Number, Boolean, Null, Undefined,Symbol) 引用数据类型(Object[Array属于Object]) 基本数据类型的特点:直接存储在栈(stack)中的数据 引用数据类型的特点…

浅拷贝和深拷贝

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

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

一、数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和引用数据类型Object,包含(function,Array,Date)。 1、基本数据类型的特点:直接存储在栈内存中的数据 …