VSCode常用插件

插件

1. 简体中文

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

2. git

• GitLens — Git supercharged

3. 项目文件夹管理

• Project Manager，帮助切换不同的项目文件目录

• 添加新的项目，搜索>project manager:save project

• 切换项目，选择你要打开的文件目录

4. 文件图标主题

• vscode-icons

5. markdown

• 需要下载3个插件，Markdown All in One,Markdown Preview Enhanced和粘贴图片的插件Paste Image

• Paste Image的插件说明里有关于粘贴图片的配置，包括文件名、文件存放路径等，粘贴快捷键Ctrl+Alt+V (Cmd+Alt+V on Mac).

• 首选项:打开用户设置(json)

{
    "pasteImage.path": "${projectRoot}/assets/${currentFileNameWithoutExt}",
    "pasteImage.basePath": "${projectRoot}",
    "pasteImage.forceUnixStyleSeparator": true,
    "pasteImage.prefix": "/",
    "pasteImage.defaultName": "Y-MM-DD_HH:mm:ss"
}

6. 主题

• One Dark Pro

• 搜索color theme

• 选择具体主题

7. Rest API 客户端

• Thunder Client，和postman类似

• 或者cyberpunk

8. 环境变量提示

• dotenv

9. 错误提示

• Error Lens，能够在代码后面直接显示错误，不需要鼠标放在错误上

10. 包导入提示

• Import Cost，可以看到导入包的大小，确定包成功导入进来

11. 代码提示

• JavaScript (ES6) code snippets，比如imp导入模块，nfn创建函数

• 使用tab键进行跳转

12. vue3相关插件

• Vue Language Features (Volar)官方推荐，支持vue2和vue3，还有ts
• Vue VSCode Snippets代码片段提示

13. 单词检查

• Code Spell Checker，错误单词提示及修改建议

配置

1. 自动补全

• 设置中搜索tab，选择on开启

2. 链接编辑

• linked edit，可以将html的前后标签同步修改，有了这个设置就不需要下载auto rename tag插件了

3. 设置代码片段

• 可以先使用https://snippet-generator.app/生成模板

• 添加代码片段

• 使用，输入设置好的名称

4. 排除文件

• 比如不需要加载某些文件夹，设置中搜索exclude，添加文件夹名称

5. 控制代码片段是否与其他建议一起显示及其排列的位置

• 设置中输入suggestions， Snippet Suggestions选择top

6. 取消预览模式

• 在预览模式下浏览的文件不会保持打开状态，当打开新的文件时，会覆盖前一个打开的文件，同时文件名是斜体的，如果是保持打开状态的文件，名字显示是正常的

• 在设置->工作台->编辑管理，Enable Preview取消勾选（如果不想这样设置，也可以在打开文件时双击文件即可）