VScode插件安装

一、常用插件

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和Component	import React, { Component } from ‘react’;
impt	导入PropTypes	import 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做了规整，如有不对欢迎指正。有好用的插件也欢迎补充！