首页 > 其他 > 详细

浅析:VSCode使用教程

时间:2020-03-06 10:03:24      阅读:75      评论:0      收藏:0      [点我收藏+]

浅析:VSCode使用教程

VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,是目前前端开发常用到的软件开发工具。

1.VSCode下载
VSCode下载链接:
https://code.visualstudio.com/

2.VSCode汉化

技术分享图片

3.VSCode常用插件(安装步骤参考汉化)
      3.1 Auto Close Tag (自动闭合HTML/XML标签)

技术分享图片

      3.2 Auto Rename Tag (自动完成另一侧标签的同步修改)

技术分享图片

       3.3 Beautify (格式化 html ,js,css)

技术分享图片

       3.4 Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)

技术分享图片

      3.5 Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)

技术分享图片

      3.6 ESLint(js语法纠错,可以自定义配置)

技术分享图片

      3.7 GitLens(方便查看git日志)

技术分享图片

      3.8 HTML CSS Support (智能提示CSS类名以及id)

技术分享图片

      3.9 HTML Snippets(智能提示HTML标签,以及标签含义)

技术分享图片

      3.10 JavaScript(ES6) code snippets(ES6语法智能提示,以及快速输入)

技术分享图片

       3.11 jQuery Code Snippets(jQuery代码智能提示)

技术分享图片

      3.12 Markdown Preview Enhanced(实时预览markdown)

技术分享图片

      3.13 markdownlint(markdown语法纠错)

技术分享图片

      3.14 Material Icon Theme(vscode图标主题)

技术分享图片

      3.15 Icon fonts(图标字体)

技术分享图片

      3.16 open in browser(右键快速在浏览器中打开html文件)

技术分享图片

       3.17 Path Intellisense(自动提示文件路径)

技术分享图片

       3.18 React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)

技术分享图片

      3.19 Vetur(Vue多功能集成插件,错误提示等)

技术分享图片

      3.20 Class autocomplete for HTML(智能提示HTML class =“”属性)

技术分享图片

       3.21 npm Intellisense(require 时的包提示)

技术分享图片

4.VSCode快捷键
       4.1 左侧是按键,右侧是功能(下同)

技术分享图片

       4.2 基础编辑

技术分享图片

       4.3 导航

技术分享图片

      4.4 搜索和替换

技术分享图片

      4.5 多光标和选择

技术分享图片

      4.6 语言编辑

技术分享图片

       4.7 编辑器管理

技术分享图片

       4.8 文件管理

技术分享图片

       4.9 显示

技术分享图片

       4.10 调试

技术分享图片

       4.11 集成终端

技术分享图片

参考链接:https://blog.csdn.net/weixin_45601379/article/details/100550421


浅析:VSCode使用教程

原文:https://www.cnblogs.com/meijifu/p/12424390.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!