vs code常用插件

 vs code 常用开发插件 


 Auto Rename Tag

自动完善标签、标签快速替换 

Auto Rename Tag

 ChatGPT - 中文版

ChatGPT - 中文版

 Chinese (Simplified) (简体中文)

vs code 中文语言包 

Chinese (Simplified) (简体中文)

 CSS Tree

快速获取 css 类名树,配合less/sass使用;

使用:选择 html 代码后,按 ctrl+shift+p 选择 Generate CSS tree

CSS Tree

 Easy LESS

less转换css 

Easy LESS

 Element Plus Snippets

Element Plus Snippets

element-plus-doc 

element-plus-doc

element-ui-helper 

element-ui-helper

Highlight Matching Tag 

编写时标签提示 

Highlight Matching Tag

node-snippets 

node 开发提示 

node-snippets

Nuxt

开发 nuxt 时才装 

Nuxt

 open in browser

可以再 .html 文件上右键浏览器打开

open in browser

 Prettier - Code formatter

代码格式化 

Prettier - Code formatter

 vscode-icons

vs code 文件图标显示 

vscode-icons

Vue - Official 

Vue - Official

Vue & Nuxt Snippets 

Vue & Nuxt Snippets

Vue 3 Support - All In One 

Vue 3 Support - All In One

vue-helper 

vue-helper

XML Tools 

XML Tools

Vetur 

 vue2用,vue3不用

Vetur

附加:vscode开发配置

本人常用

{
  // 左侧目录不折叠
  "explorer.compactFolders": false,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": false,
  "editor.fontSize": 16,
  "editor.tabSize": 2,
  // 代码提示顺序
  "editor.snippetSuggestions": "top",

  // 选择格式化工具
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // vetur配置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto" // 设置为“force-aligned”,效果会不一样
    },
    "prettier": {
      "semi": false, // 不加分号
      "singleQuote": true, // 用单引号
      "tabWidth": 2, // tab缩进空格个数
      "trailingComma": "none", // 禁止在末尾加逗号
      "printWidth": 200 // 每行宽达到200才强制换行
    }
  },

  "workbench.iconTheme": "vscode-icons",
  "vsicons.dontShowNewVersionMessage": true,
  
  // 忽略vetur错误提示
  "vetur.ignoreProjectWarning": true,

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // prettier配置
  "prettier": {
    // 句尾添加分号
    "semi": false,
    // 缩进字节数
    "tabWidth": 2,
    // 超过最大值换行
    "printWidth": 200,
    // 使用单引号代替双引号
    "singleQuote": true,
    "trailingComma": "none" // 禁止在末尾加逗号
  },
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "workbench.startupEditor": "none",
  "extensions.ignoreRecommendations": true,
  "editor.codeActionsOnSave": {},
  "editor.stickyScroll.enabled": false,
  "workbench.settings.applyToAllProfiles": []
}

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

论文笔记:(Security 22) 关于“二进制函数相似性检测”的调研

个人博客链接 注:部分内容参考自GPT生成的内容 [Security 22] 关于”二进制函数相似性检测“的调研(个人阅读笔记) 论文:《How Machine Learning Is Solving the Binary Function Similarity Problem》(Usenix Securi…

C++多态特性详解

目录 概念: 定义及实现: 虚函数重写的两个例外: 1.协变: 2.析构函数的重写: final关键字: override关键字: 多态是如何实现的(底层): 面试题&#xff1…

图像识别及分类

⚠申明: 未经许可,禁止以任何形式转载,若要引用,请标注链接地址。 全文共计3077字,阅读大概需要3分钟 🌈更多学习内容, 欢迎👏关注👀【文末】我的个人微信公众号&#xf…

【网络编程下】五种网络IO模型

目录 前言 一.I/O基本概念 1.同步和异步 2.阻塞和非阻塞 二.五种网络I/O模型 1.阻塞I/O模型 2.非阻塞式I/O模型 ​编辑 3.多路复用 4.信号驱动式I/O模型 5. 异步I/O模型 三.五种I/O模型比较​编辑 六.I/O代码示例 1. 阻塞IO 2.非阻塞I/O 3.多路复用 (1)select …

Rust web简单实战

一、使用async搭建简单的web服务 1、修改cargo.toml文件添加依赖 [dependencies] futures "0.3" tokio { version "1", features ["full"] } [dependencies.async-std] version "1.6" features ["attributes"]2、搭…

【Leetcode每日一题】 综合练习 - 全排列 II(难度⭐⭐)(71)

1. 题目解析 题目链接:47. 全排列 II 这个问题的理解其实相当简单,只需看一下示例,基本就能明白其含义了。 2.算法原理 算法思路梳理 为了生成给定数组nums的全排列,同时避免由于重复元素导致的重复排列,我们可以遵…

刷代码随想录有感(56):二叉搜索树的最小绝对差

题干&#xff1a; 代码:中序遍历成有序数组逐一比较相邻两个数之间的差值&#xff0c;注意这里是取最小值所以定义的初始值应该是非常大的INT_MAX&#xff01;&#xff01;&#xff01; class Solution { public:void traversal(TreeNode* root, vector<int>&a){if(…

OpenCV 为轮廓创建边界框和圆(62)

返回:OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇:OpenCV检测凸包(61) 下一篇 :OpenCV如何为等值线创建边界旋转框和椭圆(62) ​ 目标 在本教程中&#xff0c;您将学习如何&#xff1a; 使用 OpenCV 函数 cv::boundingRect使用 OpenCV 函数 cv::mi…

c++多线程2小时速成

简介 c多线程基础需要掌握这三个标准库的使用&#xff1a;std::thread,std::mutex, andstd::async。 1. Hello, world #include <iostream> #include <thread>void hello() { std::cout << "Hello Concurrent World!\n"; }int main() {std::th…

轻松应对数据恢复挑战:雷神笔记本,不同情况不同策略

在数字化时代&#xff0c;数据无疑是我们生活中不可或缺的一部分。无论是重要的工作文件、珍贵的家庭照片&#xff0c;还是回忆满满的视频&#xff0c;一旦丢失&#xff0c;都可能给我们的生活带来诸多不便。雷神笔记本作为市场上备受欢迎的电脑品牌&#xff0c;用户在使用过程…

ubuntu使用Remmina远程连接Windows桌面

概况 目的&#xff1a; 远程连接公司电脑写一点代码 之前的方案&#xff1a; 安装Win10虚拟机&#xff0c;虚拟机里连接 VPN&#xff0c; 然后用 mstsc 命令连接。 新的方案&#xff1a;连接VPN后&#xff0c; 开启Remmina直接连接远程 Windows 桌面 新方案优点&#xff1a…

分布式锁之-mysql

使用mysql实现分布式锁的方式这里演示两种&#xff1a; 1:基于 MySQL 实现的乐观锁 2:基于 MySQL 实现的悲观锁 数据库脚本 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0;-- ---------------------------- -- Table structure for product_stock -- -----------------------…

【Python】机器学习之Sklearn基础教程大纲

机器学习之Sklearn基础教程大纲 1. 引言 机器学习简介Scikit-learn&#xff08;Sklearn&#xff09;库介绍安装和配置Sklearn 2. 数据预处理 2.1 数据加载与查看 - 加载CSV、Excel等格式的数据- 查看数据的基本信息&#xff08;如形状、数据类型等&#xff09;2.2 数据清洗…

Vue 组件间的数据绑定

在Vue组件中&#xff0c;v-model指令可以用来实现双向数据绑定。它用于将组件的属性和父组件中的数据进行双向绑定&#xff0c;使得当属性的值改变时&#xff0c;父组件中的数据也会相应地改变&#xff0c;并且当父组件中的数据改变时&#xff0c;属性的值也会相应地改变。 目…

【软考高项】三十一、成本管理4个过程

一、规划成本管理 1、定义、作用 定义&#xff1a;确定如何估算、预算、管理、监督和控制项目成本的过程作用&#xff1a;在整个项目期间为如何管理项目成本提供指南和方向 应该在项目规划阶段的早期就对成本管理工作进行规划&#xff0c;建立各成本管理过程的基本框架&…

使用docker-compose编排lnmp(dockerfile) 完成Wordpress

实验环境&#xff1a; 在已有docker环境和nginx镜像的基础上进行编排。 1、准备mysql容器目录及文件 2、dockerfile文件内容 3、my.cnf文件内容 4、准备php容器目录及文件 5、dockerfile文件内容 6、准备其他文件 7、编写docker-compose.yml文件 8、Docker Compose环境的实现…

Redisson 分布式锁和同步器

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 redisson 是基于redis的扩展库,使得redis除了应用于缓存以外,还能做队列…

AI学习指南-人工智能概述

欢迎来到人工智能的奇妙世界&#xff01;如果你是初学者&#xff0c;那么你来对地方了。今天&#xff0c;我们将一起探索人工智能&#xff08;AI&#xff09;的基本概念&#xff0c;看看它是如何分类的&#xff0c;它的应用有哪些&#xff0c;以及未来可能的发展方向。准备好了…

Django之单文件上传(以图片为例)

一&#xff0c;创建项目 初始化&#xff0c;数据迁移&#xff0c;创建superuser&#xff0c;创建app等 二&#xff0c;配置settings.py 1&#xff0c;配置数据库&#xff08;本作者使用的mysql&#xff09;&#xff0c;以前文章有提到 2&#xff0c;配置静态文件存放路径 STAT…

Spring Cloud:探索它的核心组件,揭秘微服务生态

Spring Cloud简介 在我们的编程旅程中&#xff0c;我们会遇到各种各样的工具和技术&#xff0c;它们如同繁星般点缀在编程的天空中&#xff0c;而Spring Cloud就是其中一颗明亮的星。那么&#xff0c;什么是Spring Cloud呢&#xff1f; Spring Cloud&#xff0c;是一个基于Spr…
最新文章