1. 前言
本文记录笔者在使用VSCode
时的心得,希望能对读者有所帮助,同时也为笔者后续使用vscode提供笔记内容。
2. 常见问题
2.1 我有多台电脑,保持一致的开发体验
当有多台设备时,如果无法同步配置,安装插件和修改设置将是非常繁琐且枯燥的事情。
- 使用
Settings Sync
插件- 在
Settings Sync
中配置Gist
- 配合
Settings Sync
,上传配置到Gist
- 配置完毕后,就可以上传/下载配置,以实现多台设备,使用同一套配置的目的
2.2 配置代码片段
代码片段是编码利器,推荐读者使用此功能整理属于自己的代码片段,以提高编码的效率。
- Click “Setting” button
- Click “User Snippets”
- 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 非常重要的功能的模块,合理使用插件可以大大提高工作效率,因此笔者整理如下插件列表,以供读者参考。
- Auto Rename Tag
自动重命名 html/xml 标签对
- Bookmarks
讲文件的某一行添加到书签
- Code Runner
右键直接运行代码,笔者常用于运行nodejs
- Copy Relative Path
复制文件的相对路径,以解决windows系统 vscode 自动的复制路径的 \ 问题。macOS 请忽略这个插件。
- Document This
在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释。
- filesize
在状态栏中显示当前文件大小。
- Git Graph
查看存储库的 Git 图表,并从图表执行 Git 操作。
- Import Cost
在编辑器中显示导入/要求包大小。
- JSON to TS
将 JSON 对象转换为 typescript 接口。
- One Dark Pro
One Dark 主题。
- Path Intellisense
自动补全文件名的 Visual Studio Code 插件。
- Polacode
为代码生成漂亮的图片。
- PostCSS Sorting
以指定的顺序对 CSS 规则内容进行排序。
- Project Manager
在项目之间轻松切换。
- Settings Sync
使用 GitHub Gist 在多台机器上同步设置、片段、主题、文件图标、启动、键绑定、工作区和扩展。
- Todo Tree
在树视图中显示 TODO、FIXME 等注释标签。
- Vetur
VS Code 的 Vue 工具。
- i18n Ally
国际化插件,详情请看文档。
- vscode-icons
Visual Studio Code 的图标。
- Git Blame
用于代码审查。
- Jest
愉快地使用 Facebook 的 Jest。
- Manta’s Stylus Supremacy
轻松格式化您的 Stylus 文件。
- Prettier - Code formatter
使用Prettier格式化程序。
- Prettier-Standard - JavaScript formatter
用于prettier + standard的 VS Code 插件(不支持
.prettierignore
)。 - Search node_modules
快速搜索 node_modules 文件夹。