VSCode笔记之效率提升

1. 前言

本文记录笔者在使用VSCode时的心得，希望能对读者有所帮助，同时也为笔者后续使用vscode提供笔记内容。

2. 常见问题

2.1 我有多台电脑，保持一致的开发体验

当有多台设备时，如果无法同步配置，安装插件和修改设置将是非常繁琐且枯燥的事情。

1. 使用Settings Sync插件
2. 在Settings Sync中配置Gist
3. 配合Settings Sync，上传配置到Gist
4. 配置完毕后，就可以上传/下载配置，以实现多台设备，使用同一套配置的目的

2.2 配置代码片段

代码片段是编码利器，推荐读者使用此功能整理属于自己的代码片段，以提高编码的效率。

1. Click “Setting” button
2. Click “User Snippets”
3. Click “New Global Snippets File”

2.3 启用 Emmet

在 setting.json 中增加"emmet.triggerExpansionOnTab": true。

2.4 markdown snippet不生效

在 setting.json 中增加"editor.quickSuggestions": true。

示例:

{
  "[markdown]": {
    "editor.defaultFormatter": "numso.prettier-standard-vscode",
    "editor.quickSuggestions": true
  }
}

3. 插件和主题推荐

插件是 vscode 非常重要的功能的模块，合理使用插件可以大大提高工作效率，因此笔者整理如下插件列表，以供读者参考。

1. Auto Rename Tag

   自动重命名 html/xml 标签对

2. Bookmarks

   讲文件的某一行添加到书签

3. Code Runner

   右键直接运行代码，笔者常用于运行nodejs

4. Copy Relative Path

   复制文件的相对路径，以解决windows系统 vscode 自动的复制路径的 \ 问题。macOS 请忽略这个插件。

5. Document This

   在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释。

6. filesize

   在状态栏中显示当前文件大小。

7. Git Graph

   查看存储库的 Git 图表，并从图表执行 Git 操作。

8. Import Cost

   在编辑器中显示导入/要求包大小。

9. JSON to TS

   将 JSON 对象转换为 typescript 接口。

10. One Dark Pro

    One Dark 主题。

11. Path Intellisense

    自动补全文件名的 Visual Studio Code 插件。

12. Polacode

    为代码生成漂亮的图片。
    

13. PostCSS Sorting

    以指定的顺序对 CSS 规则内容进行排序。

14. Project Manager

    在项目之间轻松切换。

15. Settings Sync

    使用 GitHub Gist 在多台机器上同步设置、片段、主题、文件图标、启动、键绑定、工作区和扩展。

16. Todo Tree

    在树视图中显示 TODO、FIXME 等注释标签。

17. Vetur

    VS Code 的 Vue 工具。

18. i18n Ally

    国际化插件，详情请看文档。

19. vscode-icons

    Visual Studio Code 的图标。

20. Git Blame

    用于代码审查。

21. Jest

    愉快地使用 Facebook 的 Jest。

22. Manta’s Stylus Supremacy

    轻松格式化您的 Stylus 文件。

23. Prettier - Code formatter

    使用Prettier格式化程序。

24. Prettier-Standard - JavaScript formatter

    用于prettier + standard的 VS Code 插件（不支持.prettierignore）。

25. Search node_modules

    快速搜索 node_modules 文件夹。