VS Code常用前端开发插件和基础配置

news2024/11/25 14:32:15

VS Code插件安装

在这里插入图片描述

VS Code提供了非常丰富的插件功能,根据你的需要,安装对应的插件可以大大提高开发效率。

完成前端开发,常见插件介绍:

1、Chinese (Simplified) Language Pack

适用于 VS Code 的中文(简体)语言包

在这里插入图片描述

2、Code Spell Checker

拼写检查器。比如 banana 单词写错成 banane ,会提示你是否修改成 banana ,也可以将 banane 添加至检查器的字典中。

在这里插入图片描述

3、HTML CSS Support

在编写样式表的时候,自动补全功能大大缩减了编写时间。

在这里插入图片描述

4、JavaScript (ES6) code snippets

支持ES6语法提示

在这里插入图片描述

5、Mithril Emmet

一个能大幅度提高前端开发效率的一个工具,用于补全代码

在这里插入图片描述

6、Path Intellisense

路径提示插件

在这里插入图片描述

7、Vue 3 Snippets

在 Vue 2 或者 Vue 3 开发中提供代码片段,语法高亮和格式化的 VS Code 插件,能极大提高你的开发效率。

在这里插入图片描述

8、VueHelper

vscode最好的vue代码提示插件,不仅包括了vue2所有api,还含有vue-router2和vuex2的代码

在这里插入图片描述

9、Auto Close Tag

自动闭合HTML/XML标签

在这里插入图片描述

10、Auto Rename Tag

自动完成另一侧标签的同步修改
在这里插入图片描述

11、Beautify

格式化 html ,js,css

在这里插入图片描述

安装过程中, 如果提示是否需要继续安装, 选择 “仍要安装”。

12、Bracket Pair Colorizer

给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

在这里插入图片描述

安装过程中, 如果提示是否需要继续安装, 选择 “仍要安装”。

13、open in browser

vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari

在这里插入图片描述

14、Vetur

Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。

在这里插入图片描述

15、File Utils

File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。

在这里插入图片描述

16、IntelliJ IDEA Keybindings

安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。

在这里插入图片描述

VS Code 配置

打开配置面板,根据自己的喜好,可以修改字体、背景样式等偏好设置
在这里插入图片描述

VS Code 快捷键

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1559166.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kubernetes(K8S)学习(二):K8S常用组件

K8S常用组件 一、 Controllers1、ReplicationController(RC)2、ReplicaSet(RS)3、Deployment 二、Labels and Selectors三、Namespace(命名空间)1、简介2、测试2.1、创建namespace2.2、创建pod 四、Network1、集群内:同一个Pod中的容器通信2、…

【C++入门】输入输出、命名空间、缺省参数、函数重载、引用、内联函数、auto、基于范围的for循环

目录 命名空间 命名空间的定义 命名空间的使用 输入输出 缺省参数 函数重载 引用 常引用 引用的使用场景 内联函数 auto 基于范围的for循环 命名空间 请看一段C语言的代码&#xff1a; #include <stdio.h> #include <stdlib.h>int rand 10;int main…

StringBuffer与StringBuilder

1.区别 (1). String : 不可变字符序列. (2). StringBuffer : 可变字符序列.线程安全&#xff0c;但效率低. (3). StringBuilder : 可变字符序列.线程不安全&#xff0c;但效率高. 既然StringBuffer与StringBuilder都是可变字符序列&#xff0c;但二者咋区分开呢&#xff1f…

【git】git使用手册

目录 一 初始化 1.1 账号配置 1.2 ssh生成 1.2.1 配置ssh 1.2.2 测试SSH 1.3 初始化本地仓库并关联远程仓库 二 使用 2.1 上传 2.2 拉取 三 问题 3.1 关联失败 一 初始化 git的安装很简单,下载后大部分进行下一步完成即可----->地址: git工具下载 1.1 账号配置…

(1)半导体设备之sorter机(上)

01、什么是sorter 其实sorter 就是分选机&#xff0c;大家日常生活买的土豆&#xff0c;苹果&#xff0c;会用到这个&#xff0c; 大家日常用的硬币&#xff0c;游戏币&#xff0c;都是用sorter来进行挑选的&#xff0c;否则人工数硬币又累又苦逼&#xff0c;钱再对不上号&…

【Entity Framework】创建并配置模型

【Entity Framework】创建并配置模型 文章目录 【Entity Framework】创建并配置模型一、概述二、使用fluent API配置模型三、分组配置四、对实体类型使用EntityTypeConfigurationAttribute四、使用数据注释来配置模型五、实体类型5.1 在模型中包含类型5.2 从模型中排除类型5.3 …

手写简易操作系统(十七)--编写键盘驱动

前情提要 上一节我们实现了锁与信号量&#xff0c;这一节我们就可以实现键盘驱动了&#xff0c;访问键盘输入的数据也属于临界区资源&#xff0c;所以需要锁的存在。 一、键盘简介 之前的 ps/2 键盘使用的是中断驱动的&#xff0c;在当时&#xff0c;按下键盘就会触发中断&a…

【STM32嵌入式系统设计与开发】——12IWDG(独立看门狗应用)

这里写目录标题 一、任务描述二、任务实施1、ActiveBeep工程文件夹创建2、函数编辑&#xff08;1&#xff09;主函数编辑&#xff08;2&#xff09;USART1初始化函数(usart1_init())&#xff08;3&#xff09;USART数据发送函数&#xff08; USART1_Send_Data&#xff08;&…

【C++】递归快速幂

class Solution { public:double myPow(double x, int n) {if(n<0){long long a -(long long)n;double temp dfs(x,a);return 1.0/temp;}else{double temp dfs(x,n);return temp;}}double dfs(double x,int n)//给一个数&#xff0c;给一个n&#xff0c;求出x的n次幂{//递…

npm软件包管理器

npm软件包管理器 一.npm 使用步骤二.npm安装所有依赖三.npm全局软件包-nodemon pm 简介链接&#xff1a; 软件包管理器&#xff0c;用于下载和管理 Node.js 环境中的软件包 一.npm 使用步骤 1.初始化清单文件&#xff1a; npm init -y &#xff08;得到 package.json 文件&am…

【C++庖丁解牛】自平衡二叉搜索树--AVL树

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1 AVL树的概念2. AVL…

2024最新版Android studio安装入门教程(非常详细)

目录 JDK安装与配置 一、下载JDK 二、JDK安装 三、JDK的环境配置 四、JDK的配置验证 Android studio安装 Android studio连接手机真机调试&#xff08;以华为鸿蒙为例&#xff09; 一、新建一个android项目 二、进入项目面板 三、配置Android Studio 四、安装手机驱…

最大限度地提高生产力:ChatGPT 如何改变您的日常生活

智能生活新潮流&#xff1a;如何用ChatGPT提升你的工作效率 拥抱人工智能革命 在当今快节奏的世界中&#xff0c;寻找提高生产力的方法就像找到一张成功的金票。 但不要害怕&#xff0c;因为我有一些令人兴奋的消息要告诉你&#xff01; 进入 GPT 工具的世界&#xff0c;这是一…

vue3+ts项目 | axios 的测试 | 测试接口

在 App.vue 中&#xff0c;测试接口 // 测试接口import request from /utils/request;import { onMounted } from vue;onMounted(() > {request.get(/hosp/hospital/1/10).then((res) > {console.log("APP组件展示获取的数据",res);})}) 在request.ts中&…

深入探索位图技术:原理及应用

文章目录 一、引言二、位图&#xff08;Bitset&#xff09;基础知识1、位图的概念2、位图的表示3、位图操作 三、位图的应用场景1、数据查找与存储2、数据去重与排序 四、位图的实现 一、引言 位图&#xff0c;以其高效、简洁的特性在数据处理、存储和检索等多个领域发挥着举足…

JJJ:linux系统中第一个进程

以linux4.19内核linux系统中第一个进程。 执行shell指令 ps -ef 结果如下&#xff1a; xxxxxx-virtual-machine:~$ ps -ef UID PID PPID C STIME TTY TIME CMD root 1 0 0 20:55 ? 00:00:02 /sbin/init splash root …

Postgresql导出数据和结构后再去另外一个Postgresql数据库中导入失败

参考教程&#xff1a; postgresql 在导入建表sql时 遇到错误 &#xff1a;https://blog.csdn.net/weixin_37706944/article/details/132321731 是因为原表定义了自增字段&#xff0c;解决办法&#xff1a; 解决方法&#xff1a; 执行如下sql后再新建表&#xff0c;就可以了 DR…

【docker】nexus 本地 maven配置

1、这篇文章中说明了如何搭建私服 【docker】搭建Nexus私服-CSDN博客文章浏览阅读2次。4、点击登陆&#xff08;账号&#xff1a;admin 秘密&#xff1a;在容器内 /nexus-data/admin.password 文件中)注意我的端口号是 10002&#xff0c;注意你的端口号。7、设置maven-central…

【数据分析面试】1. 计算年度收入百分比(SQL)

题目 你需要为公司的营收来源生成一份年度报告。计算截止目前为止&#xff0c;在表格中记录的第一年和最后一年所创造的总收入百分比。将百分比四舍五入到两位小数。 示例&#xff1a; 输入&#xff1a; annual_payments 表 列名类型amountINTEGERcreated_atDATETIMEstatusV…

COSMIC 方法 - 需求评估 映射阶段

通用软件模型 原则 - COSMIC 通用软件模型 a) 软件块跨越边界与功能用户交互、并与边界内的持久存储介质进行交互。 b) 被度量软件块的 FUR 能够被映射到唯一的一组功能处理。 c) 每个功能处理由一系列子处理组成 d) 一个子处理可以是一个数据移动或者是一个数据运算。 e) 有四…