vscode 好用的插件

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 勾选

• 

相关配置参考如下:

• prettier settings 文件配置

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 并设置以下值.

// 有空格的一定要加上 空格,否则字体不生效.
"JetBrains Mono", "Fira Code", Menlo, Monaco, "Courier New", monospace;

4. 在 vscode 设置中将连字打开(设置中搜索fontLigatures关键词) 并配置以下代码

// windows 会根据字体的先后顺序决定哪一款字体,如果系统中没有改字体,会顺次往下替换
"editor.fontFamily": "'Fira Code','JetBrains Mono'",
"editor.fontLigatures": true,

注意:

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