VScode插件安装

已于 2024-08-06 09:17:30 修改
阅读量974 收藏 30
点赞数 29
文章标签： vscode 编辑器
于 2024-08-05 17:50:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45323842/article/details/140800197
版权

一、常用插件

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

vscode 中文插件

Auto Rename Tag

闭合标签

Path Intellisense

一个非常实用的工具，它提供了文件路径的自动补全功能，可以极大地提高开发效率。路径自动补全、智能感知、支持自定义配置（settings.json）

Project Manager

专为提升项目管理效率而设计的工具，左侧项目可以搜索目录。

  1. 添加项目到管理器：
    • 打开需要管理的项目文件夹。
    • 按下快捷键（Windows/Linux上是Ctrl+Shift+P，macOS上是Command+Shift+P）打开命令面板。
    • 输入“Project Manager: Save Project”并选择该命令，将当前项目保存到Project Manager中。
    • 重复上述步骤，将更多项目添加到管理器中。
  2. 快速切换项目：
    • 点击VSCode左侧边栏中的“Project Manager”图标（如果未显示，可能需要通过点击侧边栏底部的“…”按钮找到并启用它）。
    • 在项目管理器中选择要切换的项目，点击即可打开该项目。
  3. 管理项目：
    • 在项目管理器中，用户可以查看所有已保存的项目，并为它们添加或删除标签。
    • 通过搜索功能，用户可以快速找到特定的项目。
      在这里插入图片描述
project-tree

Project-Tree是一个实用的工具，它可以帮助用户快速生成并查看项目的目录结构。
在这里插入图片描述

Prettier - Code formatter 格式化

一款非常受欢迎的代码格式化工具，它主要用于自动调整代码文件的编码风格，确保代码的统一性和可读性。

  // 根据需要配置，这里只放一点示例 setting.json
  "prettier.requireConfig": false,
  "prettier.bracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "prettier.endOfLine": "auto",
  //  #让prettier使用eslint的代码格式进行校验
  // "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用带引号替代双引号
  "prettier.singleQuote": true,
Prettier ESLint 格式化

用于使用更漂亮的eslint包格式化JavaScript和TypeScript代码。

"editor.wordWrap": "on",
  // yss-config-start
  "editor.tabCompletion": "on",
  "search.quickOpen.includeSymbols": true,
  "editor.suggest.localityBonus": true,
  "editor.suggest.shareSuggestSelections": true,
  "cSpell.language": "en,en-US,en-GB",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // "editor.formatOnSave": true,
  // yss-config-end
  // #每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
  
    "source.fixAll": false,
    "source.fixAll.eslint": true
  },
ESLint

它可以帮助开发者在编写代码时自动检查代码质量，并遵循一定的编码规范。
在设置搜索框中输入“eslint”，找到与ESLint相关的设置项。
根据你的需求配置这些设置项，例如启用ESLint（eslint.enable）、设置ESLint的运行模式（eslint.run）、指定要验证的文件类型（eslint.validate）等。
配置完成后，ESLint将自动在VS Code中工作。当你编写代码时，ESLint会检查你的代码是否符合配置的规则，并在代码编辑器中显示警告或错误。

Live Server

为前端开发提供一个实时的本地开发服务器，以便开发者能够实时预览和调试网页应用程序。

// live-server 配置代理  修改代理之后,记得重启VSCODE
  "liveServer.settings.proxy": {
    "enable": false,
    // 代号,代理地址,发请求拼接的地址
    "baseUri": "/api",
    // 真正后台服务器的基地址
    "proxyUri": "192.168.78.187"
  },
open in browser

允许开发者在VSCode中直接通过默认浏览器或其他指定浏览器打开HTML、CSS、JavaScript等文件，从而快速预览网页效果，无需手动在浏览器中打开文件。
使用方法：

  1. 右键点击文件：在VSCode中打开HTML文件，右键点击该文件。
  2. 选择打开方式：在上下文菜单中，选择“在浏览器中打开”（或具体浏览器的选项，如“在默认浏览器中打开”、“在Chrome中打开”等）。
  3. 预览网页：所选浏览器将自动打开并显示HTML文件的内容，开发者可以预览网页效果。
  4. 此外，也可以使用快捷键来打开浏览器，如Ctrl+Alt+B（Windows/Linux）或Cmd+Alt+B（Mac OS）。但请注意，使用快捷键时，必须已选中相应的HTML文件，否则可能会导致错误。
Simple icons

文件目录图标

Quokka.js

Quokka.js是一个JavaScript和TypeScript的开发工具，它可以在编辑器中以实时方式运行、评估和测试你的代码。
可以通过注释实时生成代码
使用文章
使用方法:

  1. 创建Quokka文件：安装后，你可以通过快捷键（如Ctrl+Shift+P或Command+Shift+P，然后输入Quokka并选择“New JavaScript File”或“New TypeScript File”）来创建新的Quokka文件。
  2. 编写代码：在Quokka文件中编写你的JavaScript或TypeScript代码，并使用console.log、标示表达式等来查看结果。
  3. 查看结果：代码将实时运行，并在编辑器中显示结果。你可以通过Value Explorer等功能来进一步查看和管理输出。
String Manipulation

它提供了丰富的字符串处理功能，如大小写转换、格式化、排序等，极大地提高了开发者在编写和编辑代码时的效率。

Sublime Text Keymap and Settings Importer

可以使用 sublime 编辑器语法

JavaScript (ES6) code snippets

提供ES6语法支持
快速插入代码片段
提升编码速度
使用统一的代码片段和模板，有助于保持代码风格的一致性，增强代码的可读性。

JavaScript Booster

JavaScript Booster提供了一系列优化功能，帮助开发人员优化代码，提高执行速度，减少资源消耗。
它能够识别并建议改进代码中的不合理部分，如变量声明（建议使用const或let代替var）、不必要的else语句等，从而提升代码质量。
实时反馈：在编写代码的过程中，JavaScript Booster会实时分析代码，并在发现潜在问题时给出反馈。

Jest

Jest的主要作用是为JavaScript开发者提供对Jest测试框架的集成和支持，从而提升测试编写的效率和体验。

Jest Runner

Jest Runner允许开发者在VSCode中直接对单个测试或测试套件进行运行或调试，无需通过命令行手动执行。
当测试失败时，Jest Runner能够即时显示测试结果，并帮助开发者快速定位到出错的测试代码，从而加快问题修复的速度。
Jest Runner支持多种交互方式，如通过上下文菜单、CodeLens（代码透视镜）和命令面板执行测试。这种灵活性使得开发者可以根据自己的习惯选择最适合的测试执行方式。

background

背景图案
需要在setting设置

//背景图片
  "background.enabled": true,
  // "background.useDefault": false,
  "background.customImages": [
  	// 替换成你的地址
    "file:///C:/Users/用户名/Pictures/vscode-img/03.jpg",
    "file:///C:/Users/用户名/Pictures/vscode-img/02.jpg",
  ],
  "background.style": {
    // "content": "‘‘",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "width": "100%",
    "height": "100%",
    "background-position": "center",
    "background-repeat": "no-repeat",
    "background-size": "cover",
    "opacity": 0.1
  },

在这里插入图片描述

Bookmarks

通过提供书签功能，帮助开发者在复杂的代码文件中快速定位和跳转。

REST Client

REST-Client是一个强大的HTTP客户端扩展，它允许开发者直接在VSCode编辑器中发送HTTP请求并查看响应。
使用方法：

  1. 创建请求文件：在VSCode中创建一个以.http或.rest为扩展名的文件，用于编写HTTP请求。
  2. 编写请求：在请求文件中按照REST-Client的语法编写HTTP请求。例如，一个GET请求可以写成GET https://httpbin.org/get。
  3. 发送请求：在请求文件中，点击“Send Request”按钮或使用快捷键（Win: Ctrl+Alt+R，macOS: Cmd+Alt+R）发送请求。
  4. 查看响应：发送请求后，在请求文件下方会展示响应结果。
  5. Browser Lite

Kenneth Auchenberg的浏览器预览版
⚡️ 更快的页面刷新
🌗 暗模式感知
🎨 主题感知UI
🐞 内置devtools支持
🔌 可扩展操作
🖥 在系统浏览器中重新打开
✅ 无遥测
🍃 更轻10.3MB➡️ 212KB

二、Git必备

Git Graph

可视化Git仓库状态，安装后在底部可以看到 Git Graph 直接点击

  • 分支和提交历史：Git Graph通过图形界面展示了Git仓库中所有分支的图形表示以及每个提交的节点，使得开发者可以直观地看到分支结构和提交历史。
  • 放大缩小与拖动：用户可以使用鼠标滚轮放大缩小图像，或使用鼠标拖动图像来查看不同的区域。
GitHub Repositories

通过GitHub Repositories插件，开发者可以直接在VSCode中浏览GitHub上的仓库列表，无需切换到浏览器。
插件能够展示仓库的提交历史，帮助开发者了解项目的变更情况。
支持创建、切换、合并分支等操作，方便开发者进行分支管理。

GitLens — Git supercharged

GitLens可以在编辑器中显示当前代码行的作者、最后修改时间、修改次数等信息，帮助开发者更好地了解代码的编写历史和质量。还能提供当前代码行与其他代码行的关联性，方便复查某个函数或对象的调用情况。

Remote Repositories

Remote Repositories扩展与GitHub Repositories和Azure Repos扩展集成，允许您直接从Visual Studio Code中快速浏览、搜索、编辑和提交到远程git存储库。
此扩展以前是GitHub Repositories扩展的一部分。

三、智能GPT

ChatGPT GPT-4 - Bito AI Code Assistant

一款基于GPT-4和GPT Turbo 3.5模型的顶级AI代码助手和开发者辅助工具。该插件提供了智能、快速的AI代码生成、测试创建、代码编辑、代码解释等功能，旨在提升开发者的编码效率和体验。

CodeGeeX: AI Code AutoComplete, Chat, Auto Comment

CodeGeeX是一款基于大模型的智能编程助手，它可以实现代码的生成与补全，自动为代码添加注释，不同编程语言的代码间实现互译，针对技术和代码问题的智能问答，当然还包括代码解释，生成单元测试，实现代码审查，修复代码bug等非常丰富的功能。

TONGYI Lingma（通义灵码）

一款基于通义大模型的智能编码辅助工具，旨在为开发者提供高效、流畅的编码体验。 实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查。

四、VUE相关

Vue 3 Snippets

一款专为Vue 3开发者设计的扩展插件，旨在提高Vue 3代码的编写效率和质量。
智能代码提示、语法高亮与智能感知、支持Composition API

vue3-snippets-for-vscode（可能不完全适用于 vue2）

这是一个适配 Vue3 Api 的 snippets 插件

新增特性: 支持快速 console.log，方便调试

Vue Language Features (Volar)

Volar是一个基于TypeScript的Vue语言服务，它提供了Vue 3的官方支持，包括语法高亮、智能感知、类型检查等功能。
虽然Volar主要侧重于语言服务和类型检查，但它也可能包含一些Vue 3的代码片段或与其他代码片段插件兼容。
语法高亮、智能感知、代码格式化、错误检查
类型检查（Volar支持Vue 3的TypeScript类型检查，能够确保代码的类型正确性，提高代码质量）

Vue Extension Box

vue项目扩展包
Vue Official
Auto Close
Auto Rename
ESLint
Sass
SCSS Formatter
Prettier

Vue Peek

Vue Peek是一个专为Vue.js开发者设计的VSCode插件。实时预览、快速编辑、提高开发效率、支持多种组件格式、便捷导航。

  • 使用Vue Peek命令：按下快捷键（默认为Ctrl+Shift+P或Cmd+Shift+P）打开命令面板，输入“Vue Peek”并选择相应的命令。例如，选择“Vue Peek: Peek Current Vue Component”来预览当前Vue组件。
  • 预览和编辑组件：Vue Peek将在VSCode中打开一个新的面板，显示组件的实时预览。开发者可以直接在这个面板中编辑组件，并看到更改效果。
Vue VSCode Snippets

提供了Vue.js的代码片段，帮助开发者快速编写Vue组件和模板。这些代码片段覆盖了Vue的常见用法，如组件定义、生命周期钩子、指令等。

Vite

打开项目后立即启动开发服务器
🚀 无需离开编辑器即可预览/调试您的应用程序
⬢ 打开新项目时提示快速安装节点模块（npm i yarn pnpm i）
📦 一键构建和服务
🔄 一键重启服务器
📚 支持VitePress
🔋 由Browse Lite提供技术支持

Vetur（虽然主要面向Vue 2，但也可能包含Vue 3的支持）

Vetur是一个全面的Vue.js开发工具集，包括语法高亮、智能提示、Emmet、Linting、格式化、Sass/Less支持等功能。它极大地提高了Vue.js开发的效率和质量。

五、React相关

ES7+ React/Redux/React-Native snippets

提供React、Redux和React Native相关的代码片段，包括组件声明、状态管理、路由配置等常用模板。支持ES7语法

Simple React Snippets

专为React开发者设计的插件，它能够通过简单的快捷键或缩写快速生成React相关的代码片段，从而大幅提高开发效率。

快捷键描述示例代码
imrc导入React和Componentimport React, { Component } from ‘react’;
impt导入PropTypesimport PropTypes from ‘prop-types’;
cdm快速生成componentDidMount生命周期方法componentDidMount() {}
cdu快速生成componentDidUpdate生命周期方法componentDidUpdate(prevProps, prevState) {}
ss快速生成setState调用（使用对象语法）this.setState({ key: value });
ssf快速生成setState调用（使用函数语法）this.setState(prevState => ({ key: prevState.key + 1 }));
ren快速生成render方法框架（需要在Class Component内部使用）render() { return (/* 渲染内容 */); }

六、Angular相关

Angular Files

右键快速构建组件文件

Angular Language Service

由Angular团队官方开发。提供了丰富的语法提示、代码补全、错误检查等功能，旨在帮助开发人员更快地编写Angular代码。在编写Angular模板时，Angular Language Service能够快速提供可能的属性、指令和事件的补全建议，显著提升编码效率。

Angular Snippets (Version 18)
允许开发者在VSCode中输入这些缩写并按Tab键时，自动展开为完整的Angular代码结构。
支持快速创建组件（如输入ngc并按Tab键）、指令（如ngd）和服务（如ngsvc）等。

七、移动端

px to rem & rpx & vw (cssrem)

它可以帮助开发者在编写CSS时，将像素单位（px）自动转换为相对单位（rem、rpx、vw等），这对于实现响应式布局和适配不同屏幕尺寸的设备尤为重要。

  // VSCODE  px转rem工具    搜索cssrem
  // css2rem
  // 默认大小
  "cssrem.rootFontSize": 20,
  // 小数点后位数
  "cssrem.fixedDigits": 6,
  // 除0开头的前缀
  "cssrem.autoRemovePrefixZero": true,
WXML - Language Service

用于小程序开发。提供一键创建小程序组件；标签名与属性自动补全；根据组件已有的属性，自动筛选出对应支持的属性集合
；属性值自动补全…

八、UI框架

Element UI Snippets

饿了么UI使用语法标签提示

vscode-element-helper

它主要针对 Element-UI 框架提供了一系列便捷的开发辅助功能。

九、其他

FreeMarker

帮助开发者在编写FreeMarker模板（.ftl文件）时获得更好的编辑体验，包括语法高亮、代码片段、错误检查等功能。

NGINX Configuration Language Support

它通过提供语法高亮、自动补全、提示和错误检查等功能，极大地提升了开发者在处理nginx配置文件时的效率和体验。

十、CSS （less、scss）

Sass (.sass only)

缩进Sass语法高亮显示、自动补全和VSCode格式化工具

SCSS Formatter

主要用于格式化SCSS（Sassy CSS）代码，使其更加整洁、规范，提高代码的可读性和可维护性。
使用方法：

  1. 打开一个SCSS文件。
  2. 使用快捷键Shift+Alt+F（Windows/Linux）或Shift+Option+F（macOS）来格式化整个文档。
  3. 或者，你可以右键点击编辑器中的空白处，选择“格式化文档”（Format Document）来格式化当前文件。
  4. 如果你只想格式化文件中的一部分代码，可以先选中这部分代码，然后使用上述快捷键或右键菜单中的“格式化选定内容”（Format Selection）选项。
Easy LESS

每次保存.less文件时，都会生成一个.css文件。
例如styles.less–>styles.css

上面对照自己使用vscode做了规整，如有不对欢迎指正。有好用的插件也欢迎补充！

学渣y
关注
VS Code 插件安装(待续...)
渔家杂记
02-13 2348
python 配置 下载安装 anaconda: https://www.anaconda.com/download/ 将anaconda的路径添加到”环境变量” -> “系统变量” -> “path”: C:\Program Files\Anaconda2;C:\Program Files\Anaconda2\Scripts;C:\Program Files\Anacon...
【Golang】VScode插件安装配置
IDoWhatIDo_92761的博客
11-17 3128
前提 已安装Go并配置系统环境变量PATH以及用户环境变量GOPATH； 可以在终端输入go env GOROOT 和 go env GOPATH 查看是否配置成功 需要注意，在GOPATH中，列出的每个目录必须有一个规定的结构: src目录保存着源代码：src下面的路径确定导入路径或可执行文件名称。 pkg目录保存已安装的包对象：在Go中，每个目标操作系统和体系结构都有自己的PKG子目录(包裹/ GOOS_GOARCH)。 如果DIR是GOPATH中列出的目录，则包含在DIR/src/foo/
VsCode插件安装及推荐
热门推荐
GossipHHH的博客
09-29 4万+
1、快捷键Ctrl + P，打开插件，输入 ext install （我习惯的输入方式）；2、或者点击图片中的圈红的按钮，也可以进入插件安装商城；3、下面开始说下我目前安装的插件（我目前是vue开发，less编译css文件，项目管理是svn，所以用到的是这么多）HTML Snippets （提示初级的H5代码片段）HTML CSS Support （让 html 标签上写class 智能提示当前项...
Vscode——插件安装
Williamcsj的博客
05-15 1140
vscode好用的插件 VScode中的神仙插件（写代码必备）
vscode 插件安装
weixin_43756060的博客
04-29 221
在应用插件商城中搜索 vue相关的插件包 Vue Extension Pack react相关的插件包 搜索react extension pack 选择Es7/react/Redux/GraphQL/React-Native node 相关 nodejs extension pack vscode常规设置 1.打开设置面板 文件》首选项》设置 2.打开命令面板来打开设置面...
VSCode插件安装
qq_43430343的博客
03-25 215
1.点击拓展工具 2.搜索你要安装的插件名称，并选择安装。 3.关闭重新打开VSCode或者点重新加载。
VSCode插件安装完成后的配置详解
10-14
本文将详细讲解VSCode插件安装完成后如何进行配置，以充分利用这些插件并优化开发体验。 首先，VSCode的个性化配置主要是在`settings.json`文件中进行的。这个文件位于用户的用户目录下的`.vscode`文件夹里，或者...
VSCode插件安装完成后的配置(常用配置)
10-14
本文将详细讲解VSCode插件安装后如何进行配置，以实现更高效、个性化的开发环境。 1. **设置JSON配置文件** 在VSCode中，用户自定义配置主要通过修改`settings.json`文件来完成，该文件通常位于`~/.config/Code/...
vscode插件离线安装包
08-30
离线安装包是为了解决在网络不稳定或速度较慢的情况下，方便用户安装VSCode插件的一种方式。下面将详细介绍压缩包中的几个插件及其作用。 1. **octref.vetur-0.37.3.vsix**: Vetur 是一个用于 Vue.js 开发的强大...
vscode c插件安装包
04-25
vscode c插件安装包，C语言的扩展插件，支持vscode进行C调试
vscode推荐插件的安装
03-06
一直以来，大家对开发的代码编辑器都没有一个最好的选择，而vscode是我发现速度相对快，对于新版的html css js元素及属性过滤、提示最准确的代码编辑器，因为插件太多，有的人不知道选择哪些插件最好，本文档教你安装哪些，那些可选
vsCode插件
10-23
vsCode常用插件整合，主要是针对vue的环境，包括vscode-icon，vetur ，VueHelper 等
vscode插件
03-14
本项目是vscode的插件，从vscode官网上下载的官方插件。
解决vscode远程安装插件不了、安装太慢问题
m0_62171658的博客
11-27 1万+
一直显示正在安装，几个小时也没动静，特别是那个c/c++插件的安装。
关于VSCode的插件安装
lyl_internet的专栏
06-16 2339
    近期做Vue的项目，使用了VSCode编译器，里面的插件很强大，但是也比较多容易搞混，为了以后方便使用今天把它们都挤下来以免以后用到忘记。    首先献上VSCode的下载链接，下载后直接就是一个exe的执行文件，安装也不需要任何的注册码或激活什么东西，很方便，支持windows，Mac，Ubuntu等系统，安装是我这边是一路默认的。https://code.visualstudio.co...
VSCode安装插件
文字的博客
03-22 2130
在VSCode界面按下F1，在出现的搜索框输入ext install 点击Intall Extensions,出现下面的搜索框，输入想安装的插件就行了
vscode 安装 插件
zb0002011的博客
10-31 482
自动补全： Snippets 格式化：vetur vscode离线安装插件 1.去官网下载extension。https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets 打开官网-》点击extension-》输入要查找的插件，如“vetur”、“zh”等。然后点击“download extension” 2.打开vscode，选择从vsix安装，就可以了。 注：插件和vscode有版本限制。最好下载最新的
vscode插件安装介绍
weixin_42375707的博客
07-08 2958
vscode常用插件
VSCode 插件安装
最新发布
09-02
对于安装 VSCode 插件，你可以按照以下骤进行操作： 1. 打开 VSCode，点击左侧的扩展图标（或使用快捷键 `Ctrl+Shift+X`）。 2. 在搜索栏中输入你想要安装的插件名称，例如 "Python" 或 "Git"。 3. 在搜索结果中找到你想要的插件，并点击其右侧的 "安装" 按钮。 4. 安装完成后，你将看到插件被添加到你的扩展列表中。 5. 如果需要配置插件，可以点击插件右侧的齿轮图标进行设置。 6. 之后，你就可以使用该插件了。 请注意，有些插件可能需要重新启动 VSCode 才能生效。另外，如果你有特定的需求或问题，也可以在 VSCode 的扩展页面中查找插件的文档和支持信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值