【vscode 常用扩展插件】

vscode 常用扩展插件

  • 常用插件
    • 部分插件
    • 使用技巧
      • 1、eslint 保存自动格式化
      • 2、代码片段的使用
      • 3、最后是关于引入文件路径提示的

常用插件

记录vscode方便开发的扩展插件,方便换电脑时,快速部署所需环境。

部分插件

1、Auto Close Tag
html自动闭合标签插件,具体不再详述,看插件介绍
2、Auto Rename Tag
html 自动重命名标签插件,谁用谁知道
3、Beautify
格式化插件
4、Chinese (Simplified) vscode 汉化插件—未使用
5、Code Runner
在编辑器里运行js代码,同时可在terminal里显示打印结果的工具,方便调试代码,支持多种语言比如 C++, Python, Java等等
6、ES7 React/Redux/React-Native/JS snippets
通过指定的前缀,快速生成react代码工具,写一个例子,详看插件介绍

imrcp + tab → 
import React, { Component } from 'react' 
import PropTypes from 'prop-types'

1、ESLint
代码检查工具,不再详述,使用技巧里会分享,eslint 保存格式化
2、Git History
git 工具,鼠标定位到代码行上,可以在代码后边显示代码最近修改时间及修改人等信息
3、Git Project Manager
git 项目管理工具
4、GitLens — Git supercharged
git 工具,作用和 Git History 类似
5、HTML Snippets
快速生成html代码工具
6、JS JSX Snippets
同上6,通过快捷键,快速生成react代码工具
7、LeetCode
力扣刷题神器,没有梯子的注意把账号体系切换到国内账号就可以登录,默认是连的国外账号
8、Live Server
快速启动一个本地服务,方便html文件预览调试等
9、npm
npm 依赖安装提示,未安装的依赖会在依赖下显示波浪线提示
10、npm Intellisense
快速引入依赖插件,详见插件介绍
11、Path Autocomplete
路径提示插件
12、Path Intellisense
同上,路径补全插件
13、Prettier - Code formatter
代码格式化插件
14、Vetur
vue 代码高亮插件,写vue必装神器
15、Visual Studio IntelliCode
代码智能补全插件,这个不错,大力推荐,用了就知道
16、Vue Theme
vue 代码主题插件
17、Vue VSCode Snippets
快速生成vue代码插件,在下边的使用技巧里会分享高级使用技巧
18、微信小程序扩展
用vscode 开发小程序插件,代码补全格式化等等
19、vscode wxml
提供 wxml 语法支持及代码片段,和上一个类似
以上大部分插件是笔者用过的,基本都是评价4.5和5星的插件,在使用时,有的插件功能重复,建议大家一个功能选一个自己喜欢的,安装太多的插件影响启动速度,同时增加内存占用,可能影响开发效率,最终适得其反。

使用技巧

1、eslint 保存自动格式化

打开 文件 -> 首选项 -> 设置 -> 点击任意一个 ‘在setting.json中编辑’, 打开配置文件,添加一下代码就OK!

"eslint.autoFixOnSave": true,"eslint.validate": ["javascript","javascriptreact","html",{"language": "vue","autoFix": true},"typescript","typescriptreact"]

2、代码片段的使用

通过代码片段,可以用预定义快捷键,快速生成自定的代码片段,对于开发效率的提高很有裨益。打开 文件 -> 首选项 -> 用户代码片段 弹出菜单有 ‘新建全局代码片段文件’和 ‘新建项目代码片段’,根据自己需要灵活选择 如下react代码片段,供参考:

{"React template": {"scope": "javascript,jsx","prefix": "irea","body": ["import React, {Component} from 'react'","","class $1 extends Component{","  render () {","    return (","      <>","         $2","      </>","   )","  }","}","","export default $1"],"description": "react template"}
}//其中的scope 是代码片段用于那些文件,本例的用于js和jsx 文件;prefix 是自定义的快捷键;body是自定义的内容,将会插到文件中,$1 $2 等是光标的位置;description 是代码片段的描述。

3、最后是关于引入文件路径提示的

在开发时,我们可能会通过webpack定义一些路径别名,但是路径补全插件不认识这些路径别名,所以在别名引入时就不能用了,别着急,我们可以通过配置插件的路径别名来达到目的。如下是我的Path Intellisense 插件配置供参考,还是打开vscode配置 “setting.json” 文件,添加如下配置:

"path-intellisense.mappings": {"@": "${workspaceRoot}/src","components": "${workspaceRoot}/src/components","assets": "${workspaceRoot}/src/assets","util": "${workspaceRoot}/src/util","plugin": "${workspaceRoot}/src/plugin"},

PS: 需要注意的是这里配置的别名路径要和项目里配置的一一对应,可以把配置文件修改放在项目配置里而不是全局配置。

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

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

相关文章

React——class组件中setState修改state

class组件中通过state去存储当前组件的数据&#xff0c;那怎么对其进行修改呢&#xff1f;就是方法this.setState({ 要修改的部分数据 }) setState() 作用&#xff1a;1 、修改 state 内容&#xff1b;2 、更新 UI 特别注意&#xff1a;react的核心其实是虚拟dom&#xff08;数…

WebSocket 和SSE的区别以及优缺点

WebSocket 和 Server-Sent Events&#xff08;SSE&#xff09;都是用于实现服务器向客户端推送消息的技术&#xff0c;但它们有一些重要的区别&#xff1a; 1.双向 vs 单向&#xff1a;WebSocket 是全双工的&#xff0c;这意味着服务器和客户端可以同时发送和接收消息。而 SSE …

【项目实践Day06】异步请求与同步请求+Ajax+微信小程序上实现发送异步请求

什么是同步和异步 同步 在主线程上排队执行的任务&#xff0c;只有前一个任务执行完毕&#xff0c;才能继续执行下一个任务。也就是一旦调用开始&#xff0c;就必须等待其返回结果&#xff0c;程序的执行顺序和任务排列顺序一致。客户端必须等待服务器端的响应。在等待的期间客…

HTML静态网页成品作业(HTML+CSS)——宠物狗店网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

el-date-picker时间禁用问题

// 选择今天以及今天以后的日期 export const disabledDate (time) > {return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的 }设置开始时间小于结束时间&#xff08;不能等于&#xff09; export const disabledDate (date) …

NVIDIA NIM 提供优化的推理微服务以大规模部署 AI 模型

NVIDIA NIM 提供优化的推理微服务以大规模部署 AI 模型 生成式人工智能的采用率显着上升。 在 2022 年 OpenAI ChatGPT 推出的推动下&#xff0c;这项新技术在几个月内就积累了超过 1 亿用户&#xff0c;并推动了几乎所有行业的开发活动激增。 到 2023 年&#xff0c;开发人员…

Covalent Network(CQT)借助最大规模的历史与实时 Web3 数据集,推动人工智能的发展

人工智能在众多领域中增强了区块链的实用性&#xff0c;反之亦然&#xff0c;区块链确保了 AI 模型所使用的数据的来源和质量。人工智能带来的生产力提升&#xff0c;将与区块链系统固有的安全性和透明度融合。 Covalent Network&#xff08;CQT&#xff09;正位于这两项互补技…

设计模式(结构型设计模式——代理模式)

设计模式&#xff08;结构型设计模式——代理模式&#xff09; 代理模式 基本定义 代理模式就是给一个对象提供一个代理&#xff0c;并由代理对象控制对原对象的引用。在代理模式中&#xff0c;“第三者”代理主要是起到一个中介的作用&#xff0c;它连接客户端和目标对象。 …

HarmonyOS NEXT应用开发之Navigation实现多设备适配案例

介绍 在应用开发时&#xff0c;一个应用需要适配多终端的设备&#xff0c;使用Navigation的mode属性来实现一套代码&#xff0c;多终端适配。 效果图预览 使用说明 将程序运行在折叠屏手机或者平板上观看适配效果。 实现思路 本例涉及的关键特性和实现方案如下&#xff1a…

backtrader回测股票:突破20日均线买入,跌破20日均线卖出

数据源&#xff1a;akshare 回测工具&#xff1a;backtrader 策略&#xff1a;突破20日均线买入&#xff0c;跌破20日均线卖出 代码&#xff1a; from datetime import datetime import backtrader as bt #1.9.78.123 import matplotlib.pyplot as plt #3.8.3 import aks…

单片机-点亮LED灯

[2-1] 点亮一个LED_哔哩哔哩_bilibili main()程序执行结束后&#xff0c;单片机会再次执行main()。 不断执行P20xFE;&#xff08;点亮LED灯1&#xff09; #include "reg52.h"void main() {P20xFE; //1111 1110 } 只执行一次P20xFE&#xff1b; #include "r…

数据库只追求性能是不够的!

那些成功的数据库公司没有一家是通过性能比竞争对手更快而成功的。 作者&#xff1a;JORDAN TIGANI&#xff0c;DuckDB 公司 MotherDuck 联合创始人&CEO 本文和封面来源&#xff1a;https://motherduck.com/&#xff0c;爱可生开源社区翻译。 本文约 4500 字&#xff0c;预…

论文阅读之AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE

文章目录 原文链接主要内容模型图技术细节实验结果 原文链接 AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE 主要内容 这篇文章的主要内容是介绍了一种新的计算机视觉模型——Vision Transformer&#xff08;ViT&#xff09;&#xff0c;这是…

【iOS ARKit】触发器与触发域

触发器 在上节的示例中&#xff0c;所有可见的物体都参与了物理模拟&#xff0c;但在一些应用中&#xff0c;我们物理模拟&#xff0c;同时又需要了解是否有物体与它们发生了碰撞。如在 AR场景中&#xff0c;当角色靠近一散门时&#xff0c;我们并不希望因为角色与门发生碰撞而…

自然语言处理学习总结

目录 1、词表示 2、语言模型&#xff08;LM&#xff09; 3、常用学习网址 自然语言处理 1、词表示 词表示&#xff1a;自然语言中最基本的语言单位表示成机器理解的方式 方式一&#xff1a;词与词之间的相似度 方式二&#xff1a;词与词之间的关系 词义的表示方法&…

云手机在海外电商中的应用优势

随着海外市场的不断拓展&#xff0c;电商行业对于高效、安全的工具需求日益增长。在这一背景下&#xff0c;云手机作为一种新型服务&#xff0c;为海外电商提供了强大的支持和便利。云手机对传统物理手机起到了非常好的延展和补充作用&#xff0c;拓展了更广泛的应用场景&#…

Kafka整理-Kafka与传统消息队列系统(如RabbitMQ, ActiveMQ)的区别是什么?

Apache Kafka与传统消息队列系统(如RabbitMQ, ActiveMQ)虽然都是处理消息和数据流的中间件,但它们在设计理念、架构、功能和使用场景方面有显著的区别。下面是Kafka与传统消息队列系统的主要区别: 1. 设计目的和使用场景 Kafka: 设计初衷是为处理大量的实时数据流。强调高…

埃隆·马斯克与OpenAI诉讼案剖析

解析马斯克与OpenAI的法律纠纷 摘要 在人工智能迅速发展的背景下&#xff0c;一场法律纠纷引起了广泛关注&#xff0c;它涉及到了理想主义与商业现实的交汇点。特斯拉创始人埃隆马斯克起诉了他共同创立的人工智能研究组织OpenAI。马斯克认为OpenAI背离了其最初的宗旨&#xf…

RabbitMQ问题

如何实现顺序消费&#xff1f; 消息放入到同一个队列中消费 如何解决消息不丢失&#xff1f; 方案&#xff1a; 如上图&#xff1a;消息丢失有三种情况&#xff0c;解决了以上三种情况就解决了丢失的问题 1、丢失1--->消息在到达交换机的时候&#xff1b;解决&#xff1…

原生html vue3使用element plus 的树tree上移下移案例源码

上效果 html源码 <!DOCTYPE html> <html lang"en"> <!-- * Name: mallSalesReports.html * Description: * Author Lani * date 2024-02-28 18:32:36 --> <head><meta charset"UTF-8"><meta name"viewport" …