visual studio code编辑器 前端插件及常用快捷键

给大家推荐编写前端代码非常舒服的编辑器

visual stdio code

它是15年微软发布的, 用起来感觉超棒

传送门https://code.visualstudio.com/Download

以前用过sublime后来用的vs code

原因是非常喜欢它的UI(其实是还念以前用vs遍C++的时光)

它功能非常强大,谁用谁知道

vs code 插件

点击vscode左侧扩展就可以搜索插件了

首先给大家推荐几个我常用的插件

  • HTML Snippets 包含html标签,很全
  • HTML CSS Support 缩短样式表编写时间
  • Path Intellisense 可以查找文件路径
  • Auto Rename Tag 改变开始标签自动修改结尾标签
  • Emoji 可以添加特殊字符等 娱乐插件
  • View In Browser 可以使用快捷键ctrl+F1用浏览器打开文件
  • vscode-icons 资源管理器中改变文件图标(其实新版本也增加图标了,但是感觉好low)
  • background 改变背景图片,也是娱乐插件

vs code 常用快捷键#

  • 列选择:ALT+左键
  • 命令面板:F1
  • 切出新编辑器:Ctrl + 左键文件
  • 代码行缩进:Ctrl + [ 、Ctrl + ]
  • 文件切换:Ctrl + Tab
  • 转到行首/行尾:Home / End
  • 转到文件头/文件尾:Ctrl + Home / Ctrl + End
  • 重命名:F2
  • 转定义:F12 or Ctrl + click
  • 转定义(切出新编辑器): Ctrl + Alt + click
  • 查看定义:Alt + F12
  • 查看引用:Shift + F12
  • 上下移动一行:Alt + Up / Alt + Down
  • 代码格式化:Shift+Alt + F

Emmet

vscode内置Emmet插件确实是web前端开发利器

简单地说, 就是用缩写语法生成HTML标签

比方我在空白html文档中输入一个 '' ! "

再按下tab

它会自动把整个html的基本结构标签给你写好

emmet缩写语法比较多

可以看看http://www.w3cplus.com/tools/emmet-cheat-sheet.html

你可能感兴趣的:(visual studio code编辑器 前端插件及常用快捷键)