vscode 常用插件列表

插件

vscode对前端来说,这是一款性感无比的编辑器,我们团队有大部分人已经在用了,我相信已经有不少前端在使用它了,所以大家更有必要一起分享下日常神操作。至于为什么选择它(开源,免费,颜值高)。。

  • GitLens: 可以查看Git log, file, 和line 历史记录
  • Git History: 大名鼎鼎的git history
  • vscode-icons: 文件夹图标美化
  • ESLint: eslit检测
  • Bracket Pair Colorizer: 对括号对进行着色
  • Markdown PDF: 将markdown文档转换成pdf
  • vscode-fileheader: 添加头header comment
  • Path Intellisense: 路径提示器
  • Setting Sync: 同步你得设置和插件
  • output colorizer: 输出着色
  • filesize: 会在左下角显示文件大小
  • markdownlint: markdown 语法提示器
  • Auto Rename Tag: 修改标签名称的时候自动修改结束标签
  • HTML Snippets: 这款插件包含html标签
  • Auto Close Tag: 输入开始标签后,自动添加结束标签
  • Open-In-Browser: 在浏览器中打开文件
  • Quokka: 能够根据你正在编写的代码提供实时反馈
  • HTML Boilerplate: html 模板插件
  • Prettier: 代码格式化插件
  • SVG Viewer: SVG预览插件
  • TODO Highlight: 代码中标记出所有的 TODO 注释
  • Regex Previewer: 实时测试正则表达式的实用工具
  • Atom One Dark Theme: Atom皮肤
  • CodeMetrics: 检测代码复杂度工具
  • Docker: docker编写插件
  • Import Cost: 显示引入的npm包大小
  • Vetur: 编写vue提示插件
  • View In Browser: 打开浏览器预览html文件
  • Babel ES6/ES7: es6/7 babel检测
  • JavaScript (ES6) code snippets: es6/7代码片段
  • Code runner : 代码在编辑器中执行
  • Live Server: html文件编辑时时预览插件
  • REST Client: 发送http请求
  • code-spell-checker: 单词拼写检查
  • EditorConfig for VS Code: vscode配置插件

强大的快捷键

  • cmd+shift+P / F1: 万能键
  • cmd+shift+F: 全文搜索
  • cmd+P: 快速切换文件
  • cmd+点击指定文件: 将此文件在分屏栏打开
  • cmd+E: 打开命令行,其他指令其实都是基于命令行的,可直接在输入框输入
  • ctrl+G: 跳转到指定行
  • ctrl+tab: 快速切换到上一个文件
  • alt+↑/↓: 调整代码行整体上下移动
  • alt+点击多处: 可以多光标操作

参考文章