VSCode 开发必备插件

Chinese(Simplified)(简体中文)

VSCode 中文

Error Lens

代码基础报错提示, 必备

HTML CSS Support

html 和 css 支持,  提示

Auto Close Tag

自动补全 html 标签

Auto Rename Tag

修改 html 标签,自动帮你完成尾部闭合标签的同步修改

Auto Complete Tag

编写 HTML 或者 JSX 代码过程中 eg:

将 <div> 修改为 <section> ,与之匹配的标签名称也随之更改

Stylelint

简介 Stylelint 是一个强大、先进的 CSS 代码检查器(linter),可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。

可以通过扩展来解析css预处理器语言(例如 SCSS、Sass、Less等)以及HTMLMarkdownCSS-in-JSvue SFCs等模板文本中提取内嵌的样式代码

Auto Import

可以帮助我们自动删除无用的包Import (未被引用),以及自动Import填充尚未导入的包

Path Intellisense

在编辑器中输入路径时,自动补全。

Path Autocomplete

在vscode中使用 @ 提示路径

Todo Tree

标记。 左侧资源管理器 树状 , 可以看到进行中的标记

eg:  # TODO 进行中 ......

ENV 

对环境变量文件 的扩展插件,可以打开 .env 文件

Live Server

实现页面自动刷新, 假设本地服务器环境

右下角有个 Go Live 可以直接启动一个本地服务,用于打开 vue3 的打包后项目很不错 (vue3打包项目需要本地服务器启动)

open in browser

vscode 打开 html 文件,可以自由选择用哪个浏览器打开

eg: html 页面 alt + b  =  打开默认浏览器

Auto-Save on Window Change

自动保存文件 = ctrl + s

Material Icon Theme

文件icon图标 (偏圆润)

Prettier - Code Formatter 格式化文档

让代码更漂亮, Shift + Alt + F 格式化文档。 相当于鼠标右键, 格式化文档

结合 ESLint 使代码规范

ESLint 代码规范

crtl + s

eslint插件能够检测代码语法问题,与格式问题,对项目代码风格统一至关重要

eg: 

1.   alt+shit+f 可以格式化代码 => 但是代码不规范会爆红,

2.   装了eslint 后直接 ctrl+s 保存后就自动格式化代码

px to rem & rpx & vw

移动端或者大屏适配  rem 会用的到。具体设置里改基数

Vue2 使用 vetur 插件
Vue3 建议禁用 vetur 使用 volar


vetur (vue2)

vue 开发必备插件, .vue 文件支持:

语法错误检查,包括 CSS/SCSS/LESS/Javascript/TypeScript

语法高亮,包括 html/jade/pug css/sass/scss/less/stylus js/ts emmet 支持

代码自动补全(目前还是初级阶段),包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript 配合 ESLint 插件使用效果更佳

Vue Language Features (Volar)  (vue3)

相当于vetur , vue3支持更好

TypeScript Vue Plugin

是一个用于在Vue项目中提供对TypeScript支持的插件

Vue VSCode Snippets  (vue2 vue3 代码片段提示)

该插件支持:Volar、Vue2 和 Vue3。

React插件

Reactjs code snippets

代码提示插件

辅助插件 1,2,3

1.    React Redux ES6 Snippets

redux 库 , (可能是 mobx 库,那就不要装这个了)

2.   Typescript React code snippets

ts

3.   Error Lens

代码基础报错插件

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

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

相关文章

【功能测试】软件系统测试报告

1.引言 1.1.目的 本测试报告为 xxx 系统测试报告&#xff0c;本报告目的在于总结测试阶段的测试及测试结果分析&#xff0c;描述系统是否达到需求的目的。 本报告预期参考人员包括测试人员、测试部门经理、开发人员、项目管理人员等。 1.2.参考文档 《xxxx系统需求规格说明…

Java线程安全问题

什么是线程安全问题 用程序模拟线程安全问题 主线程 package com.itheima.d3;public class ThreadTest {public static void main(String[] args) {//1、创建一个账户对象&#xff0c;代表两个人的共享账户Accout acc new Accout("ICBC-110",100000);//2、创建两个…

Django回顾【二】

目录 一、Web框架 二、WSGI协议 三、 Django框架 1、MVC与MTV模型 2、Django的下载与使用 补充 3、启动django项目 补充 5、 Django请求生命周期 四、路由控制 1、路由是什么&#xff1f; 2、如何使用 3、path详细使用 4、re_path详细使用 5、反向解析 6、路由…

Linux 中的 ls 命令使用教程

目录 前言 如何运用 ls 命令 1、列出带有所有权的文件和目录 2、获取以人类可读的方式显示的信息 3、列出隐藏文件 4、递归列出文件 5、在使用 ls 时对文件和目录做区分 6、列出指定扩展名的文件 7、基于大小对输出内容排序 8、根据日期和时间排序文件 让我们来总结…

从零带你底层实现unordered_map (2)

&#x1f4af; 博客内容&#xff1a;从零带你实现unordered_map &#x1f600; 作  者&#xff1a;陈大大陈 &#x1f680; 个人简介&#xff1a;一个正在努力学技术的准C后端工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎私信&#xff01; &#x1f496; 欢迎大家…

figma 基础使用 —— 常用方法

一、 导入组件 分成两种方式 &#xff08;1&#xff09;离线的包导入&#xff08;iOS 常用组件.fig 直接拖拽到figma最近网页&#xff09; &#xff08;2&#xff09;在插件市场下载https://www.figma.com/community 二、figma中使用标尺 快捷键&#xff1a;shift R 三、插…

备案小技能:ICP备案(网站、app、小程序)经营性ICP备案(增值电信业务经营许可证)

文章目录 引言I ICP 备案1.1 小程序备案1.2 app备案1.3 网站备案1.4 公安备案II 经营性ICP备案2.1 增值电信业务经营许可证see also引言 一个阿里云账号,只能使用一个ICP备案主体,可以办理app和网站备案。 经营性ICP备案阿里云需要收取备案代理费用。福建需要产品价格¥414…

宿主Linux——KVM安装Windows7系统

KVM虚拟技术 KVM(Kernel-based Virtual Machine) 是基于Linux内核的开源虚拟化技术&#xff0c;在一台物理机上可同时运行多个虚拟系统。KVM使用硬件虚拟化扩展&#xff0c;例如Intel的VT和AMD的AMD-V&#xff0c;在性能方面更加高效&#xff0c;可提供更好的计算能力和响应速…

【从浅识到熟知Linux】基本指令之rmdir和rm

&#x1f388;归属专栏&#xff1a;从浅学到熟知Linux &#x1f697;个人主页&#xff1a;Jammingpro &#x1f41f;每日一句&#xff1a;加油努力&#xff0c;这次写完真的真的真的要去干饭了&#xff01; 文章前言&#xff1a;本文介绍rmdir和rm指令用法并给出示例和截图。 文…

存在即合理,低代码的探索之路

目录 一、前言 二、低代码迅速流行的原因 三、稳定性和生产率的最佳实践 四、程序员用低代码开发应用有哪些益处&#xff1f; 1、提升开发价值 2、利于团队升级 一、前言 低代码的热潮至今未消停&#xff0c;从阿里钉钉跨平台协作方式&#xff0c;再到飞书上的审批流程&#xf…

python getattr() setattr() hasattr() delattr()内置函数详解

python getattr() setattr() hasattr() delattr()内置函数详解 1.getattr(object, name[, default])&#xff1a; 功能&#xff1a;获取对象的属性值。 参数&#xff1a; object&#xff1a;要获取属性的对象。 name&#xff1a;属性的名称。 default&#xff08;可选&#x…

房屋租赁出售经纪人入驻小程序平台

一款专为房屋中介开发的小程序平台&#xff0c;支持独立部署&#xff0c;源码交付&#xff0c;数据安全无忧。 核心功能&#xff1a;房屋出租、经纪人独立后台、分佣后台、楼盘展示、房型展示、在线咨询、地址位置配套设施展示。 程序已被很多房屋交易中介体验使用过&#x…

hive两张表实现like模糊匹配关联

testa表(字段a)aaabbacccddddddaaatestb表(字段b)ab1. 使用likeconcat模糊配对 selecta.a from testa a ,testb b where a like concat(%,b.b,%) group by a.a2. 使用locate函数 selecta.a from testa a ,testb b where locate(b.b,a.a)>0 group by a.a3. 使用instr函数 sel…

uni-app 离线打包安卓Apk(小白上手)

场景&#xff1a; 在使用uni-app 开发apk时&#xff0c;使用云打包有次数限制。尤其对于测试阶段是无比难受的&#xff0c;通常是浪费打包次数进行打包或者通过usb 给测试机更新开发环境&#xff0c;但这都是无比漫长的过程 尤其有多个测试机真的是噩梦般的存在 下载离线打包示…

CMake中的变量: 与编程语言相关的变量

变量名称描述CMAKE_C_COMPILE_FEATURESC编译器已知的功能列表CMAKE_C_EXTENSIONSC_EXTENSIONS目标属性的默认值&#xff08;如果在创建目标时设置&#xff09;。CMAKE_C_STANDARDC_STANDARD目标属性的默认值&#xff08;如果在创建目标时设置&#xff09;。CMAKE_C_STANDARD_RE…

Android frameworks 开发总结之十一

1.查看android关机前的log 有时候我们在没有连接电脑的情况下,会在测试的时候突然机器关机. 这个时候如果查看 log信息就看不到了。测试前可以执行下面的命令,之后再进行测试. $ adb shell $ nohup logcat > /sdcard/xxx.log 2.android日期时间同步 关于android请求…

【数据库】聊聊一颗B+树 可以存储多少数据

我们知道数据库使用的数据结构是B树&#xff0c;但是B树可以存储多少数据呢&#xff0c;在面试中也是经常会问的问题&#xff0c;所以我们从根上理解这个问题。 操作系统层面 数据都是存储在磁盘中的&#xff0c;而磁盘中的数据都是以最新单位扇区进行分割。一个扇区的大小是…

Python基础语法之学习数据转换

Python基础语法之学习数据转换 一、代码二、效果 一、代码 #数字转换成字符串 num_str str(11) print(type(num_str))#字符串转整数 numint("11") print(type(num),num)#浮点数转整数 float_num int(11.1) print(type(float_num),float_num)#整数转浮点数 num_flo…

OpenSSL 使用AES对文件加解密

AES&#xff08;Advanced Encryption Standard&#xff09;是一种对称加密算法&#xff0c;它是目前广泛使用的加密算法之一。AES算法是由美国国家标准与技术研究院&#xff08;NIST&#xff09;于2001年发布的&#xff0c;它取代了原先的DES&#xff08;Data Encryption Stand…

webpack项目工程初始化

一、初始化项目 默认系统已经安装node //初始化 pnpm init//安装webpack pnpm i -D webpack webpack-cli 新建一个index.html的入口文件 新建一个src文件存放js代码&#xff0c;src里面新建一个index.js package.josn配置打包命令 {"name": "webpack-cs&q…