1. chinese 汉化插件

在这里插入图片描述
安装以后直接重启vscode 即可.

2. 括号区分插件

在这里插入图片描述
可以更好的区分括号的层级,提高开发效率

3. html 标签重命名插件

在这里插入图片描述
修改开始标签的时候,结束标签也会跟着一起变.

4. less 转化 为 css

在这里插入图片描述
创建一个less 文件,保存的时候,会自动生成 css文件.

5. react 语法提示插件

在这里插入图片描述
和vue 语法提示一样,可以快速生成代码段.

6. live server 实时更新页面

在这里插入图片描述
在js 文件中 右键 open in live server ,js文件改变的时候,页面可以实时更新.

7. open in browser 在页面打开

在这里插入图片描述

8. 语法格式化

在这里插入图片描述
settings 搜索 format on save 勾选

  • 在这里插入图片描述

相关配置参考如下:

9. 单位转换

在这里插入图片描述

10. 实时输出 quokka

在这里插入图片描述
可以实时提示 自己哪个步骤出了错误
使用步骤:

  • ctrl + shift + p 按下快捷键
  • 输入指令 : quokka 然后选择文件.

11. 快捷请求 rest client

在这里插入图片描述
使用步骤:

  • 创建一个 .rest 或 .http 文件
  • 在文件内写上请求方法 GET + url
  • 注意: 两个请求中间需要 ### 区分开
    • 在这里插入图片描述

12. vue 语法提示

在这里插入图片描述

13. 个性化主题

在这里插入图片描述

14. css 跳转

在这里插入图片描述
点击 css 选择器 然后跳转到对应的css样式.

15. js 代码提示

在这里插入图片描述

16. vue 3 代码语法提示

在这里插入图片描述

17. vscode - icons 图标个性化

在这里插入图片描述

18. color highlight 颜色高亮

在这里插入图片描述
插件默认是 背景色提示.
颜色高亮方式设置:

  • 在这里插入图片描述

19. 个性化主体 (单个)

在这里插入图片描述
在这里插入图片描述

20. any-rule (正则表达式)

在这里插入图片描述

使用方式：

方式1: 按F1(mac下fn+F1)打开正则列表，输入关键词搜索, 比如"手机".
方式2: 右键选择"🦕正则大全".
方式3：在代码任意位置输入"@zz".

21. Yao-Translate

在这里插入图片描述

使用方式：

按 Ctrl+Shift+T 对选中的文本内容快速翻译
按 Ctrl+Shift+R 对选中的文本内容快速翻译并替换成翻译结果

22. vscode 打开括号对提示（bracket）

  1. 在 设置中 搜索 bracket 关键字.
  2. 勾选下面选项.
    在这里插入图片描述
    在这里插入图片描述

23. es6-string-html 插件使用

在这里插入图片描述

该插件是为了在模板字面量中写入 html标签并使模板字符串中的 html标签 高亮显示使用的.

使用方法:在反引号之前添加  /*html*/

export default {
  template: /*html*/ `
    <div>
      es6-string-html插件测试
      <span> 测试1 </span>
      <span> 测试2 </span>
    </div>
    `,
}

24. Project manager 项目管理工具

在这里插入图片描述

四个操做按钮。
在这里插入图片描述

  • 第一个按钮 保存项目：点击保存可以将当前项目保存在 project manager 中进行管理
  • 第二个按钮 编辑项目：点击可以在 projects.json 文件中 配置需要管理的文件。
  • 第三个按钮 作为标签查看：可以在 json 文件中给不同的项目打上 tag 标签，点击该按钮进行归类查看
  • 第四个按钮 按标签过滤：可以在 json 文件中给不同的项目打上 tag 标签，点击该按钮进行归类查看

快捷键：
ctrl + shift + p 搜索 Project Manager ，选择 编辑项目（edit manager），可以添加或删除 Project Manager 正在管理的项目。
alt + shift + p 可以快速切换 Project Manager 中管理的项目

25 Dyno File Utils（快速创建文件，文件夹）

在这里插入图片描述

配置方式

  • ctrl + shift + p 搜索 “file utils” 关键词
  • 在这里插入图片描述
  • 查看快捷键,同时也可以按照自己的使用习惯设置快捷键.

使用方式:

alt + n 在搜索框中 搜索自己想要新建文件的文件夹.然后回车
在这里插入图片描述

然后输入自己新建文件的名称,敲下回车.
在这里插入图片描述
在这里插入图片描述

注意: 新建文件夹时,只需要在 文件名称后面加上一个 "\"

在这里插入图片描述
在这里插入图片描述

26. vscode 字体更换

编程推荐字体下载

  1. 在晚上下载自己喜欢的字体（一般会有 wtf，ttf，等多种字体，windows 安装 ttf 类型的字体就好）
  2. 右键下载好的字体，点击安装。
  3. 在 vscode 设置中搜索 Editor: Font Family 并设置以下值.
// 有空格的一定要加上 空格,否则字体不生效.
"Cascadia Code","JetBrains Mono", "Fira Code", Menlo, Monaco, "Courier New", monospace;
  1. 在 vscode 设置中将连字打开(设置中搜索fontLigatures关键词) 并配置以下代码
// windows 会根据字体的先后顺序决定哪一款字体,如果系统中没有改字体,会顺次往下替换
"editor.fontFamily": "'Fira Code','JetBrains Mono'",
"editor.fontLigatures": true,

注意:

  1. 字体下载好之后可以在系统 字体设置 中查找下载好的字体
  2. editor.fontfamily 中添加的字体，一定要和系统中可以查到的字体名称一致
    在这里插入图片描述

vscode python 开发推荐插件

  1. Python

    VSCode 开发团队自己开发的，亲儿子的级别。虽然 VSCode 不安装任何插件也能高亮 Python 代码，但该插件提供的功能远不止如此，还有很多强大的功能

  2. Python Snippets

    插件可以让我们的 Python 编程更加高效。它包含了大量的内置方法，以及 string、list、sets、tuple、dictionary、class 代码片段，并且还为每个代码段提供至少一个示例。

  3. Python Docstring Generator

    可以自动创建 docstring，这真的为开发人员减少了的很大工作量。并且，生成的文档字符串遵循所有标准格式，包括 Google、docBlockr、Numpy、Sphinx 和 PEP0257。它的主要功能包括：

  4. Python Test Explorer for Visual Studio Code

    Test Explorer UI 运行 Python Unittest 或 Pytest 测试，对于功能测试非常方便。具体功能如下

  5. Python Preview

    可展现可视化调试的过程，并添加到我们的 Python 代码中。它将调试代码转换为带有动画和图形元素的交互式会话，以表示应用程序状态，对于代码调试非常直观。

  6. Python Type Hint
    • 提供针对 Python 的类型提示自动完成功能，以及针对内置类型、类和键入模块的完成项。
    • 提供内置类型、估计类型和键入模块的类型提示完成项
  7. Jupyter

    可以让我们在 VS Code 中完美使用 Jupyter Notebooks。

参考文章@用 VS Code 写 Python，这几个插件是必装的！

# vscode # 前端 # javascript
Logo
https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

cover

Codex 国内API配置完整指南-Windows系统

avatar AI编程社区
cover

2026年开发者必知：10大AIGC工具实战测评与提效指南

avatar AI编程社区
cover

从积木块到手写代码：一场关于开发自由的暗中博弈

avatar AI编程社区