VSCode 是微软出品的,基于 Electron 和 TypeScript 的,集成了 git 版本管理和命令行终端,而且开源稳定,插件丰富,再搭配一款 Chrome 浏览器,可以说是前端开发神器了。

安装指南

VSCode 需要用到 node.js 和 git,如果没有就到https://nodejs.org/en/download/下载 node.js,然后到https://git-scm.com/downloads下载并安装 git,注意自己的系统版本,最后到https://code.visualstudio.com下载 vscode 并安装好。

推荐插件

project manager // 项目管理

prettier // 自动格式化你的代码

gitlens // 查看 git 修改记录

bracket pair colorizer2 // 彩色括号匹配

code spell checker // 单词拼写检查

eslint // javascript 代码风格检查工具

git history // git 历史

npm intellisense // npm 自动补全

path intellisense // 自动补全文件路径

material icon theme // 好看的图标

highlight matching tag // 高亮匹配标签

better toml // toml 文件支持

auto rename tag // 自动重命名标签

auto close tag // 自动关闭标签

debugger for chrome // 在 chrome 里调试

visual studio intellicode // 智能补全

Markdown All in One // 写 markdown 神器

ES7 React/Redux/GraphQL/React-Native snippets // react 代码简写

react native tools // 写 react native

vetur // 写 vue

javascript(es6) code snippets // javascript 代码简写

推荐快捷键

F1 打开可以输入命令

F2 重命名变量,方便重构

F5 运行和调试代码

F12 去到定义的地方

shift+F12 查找所有引用

ctrl+g 会让你输入数字,快速定位到指定行

ctrl+enter 在下方另起一行

crtl+f 查找

ctrl+shift+n 多开一个 vscode 编辑器

ctrl+b 开关侧边栏

ctrl+h 替换

ctrl+r 打开最近文件

ctrl+` 终端

ctrl+tab 切换文件

ctrl+shift+e 切到资源管理器

ctrl+p 快速打开文件

ctrl+[ 左移代码

ctrl+] 右移代码

ctrl+/ 行注释

ctrl+t 匹配文本来打开文件

ctrl+shift+t 重新打开关闭的文件

ctrl+shift+home/end 选择光标左侧/右侧全部内容

ctrl+backspace 删除上一个词

ctrl+delete 删除光标右侧的词

ctrl+左/右 跳到上/下一个词

ctrl+shift+左/右 逐个选词

鼠标滚轮或者shift+alt+鼠标拖拽 批量选中,方块选择

ctrl+shift+pageup/pagedown 切换文件

ctrl+d 选中当前词语

ctrl+enter 下方插入一行

alt+左/右箭头 跳回来/过去

alt+shift+上/下箭头 向上/下复制行

前端开发神器 VSCode 使用总结的更多相关文章

  1. webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器

    #webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器 -- 工欲善其事 必先利其器 ##各工具介绍 `webstorm`是**JetBrains* ...

  2. Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

    WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗 ...

  3. 前端开发工具-VsCode插件【个人开发常用】

     前端开发工具-VsCode插件[个人开发常用] Atom One Dark Theme-主题 Chinese (Simplified) Language Pack for Visual Studio ...

  4. 前端开发神器Charles从入门到卸载

    前言 本文将带大家学习使用前端开发神器-charles,从基本的下载安装到常见配置使用,为大家一一讲解. 一.花式夸奖Charles 截取 Http 和 Https 网络封包. 支持重发网络请求,方便 ...

  5. Sublime Text 使用指南 - 前端开发神器

    Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的 ...

  6. 前端开发神器 - Brackets

    做了几年的 .Net 项目开发,后来公司转 Java 语言开发,Java 做了还没一年,公司准备前后端分离开发,而我被分到前端! Brackets是一款基于web(html+css+js)开发的web ...

  7. 前端开发利器VSCode

    最近找到一款非常好用的开发利器,VSCode.一直认为微软做的东西都很一般,这个软件让我刮目相看了. 之前使用webstorm卡的不行,换了这个非常好用. 用着还不错,这里记录下一些使用的心得. VS ...

  8. 前端开发IDE VSCode + live preview

    live preview 为方便web开发者,编写网页静态代码,不用频繁切换到浏览器去查看的贴心功能. 可以在编辑器中,就实现编辑预览功能, 边编写代码,边查看预览效果. 与vscode相对应的其他两 ...

  9. 前端开发神器Sublime Text2/3之安装使用(windows7/Mac)

    一,到官方网站下载神器 地址:http://www.sublimetext.com/3 Sublime Text 3 配置解释(默认){// 设置主题文件“color_scheme”: “Packag ...

随机推荐

  1. 白话 spring AOP

    ------------------------------------ 剩下的时间不多了,抓经做自己想做的吧 AOP: 专业术语叫做面向切面的编程 为什么要使用aop: 为了简化代码, 将相同代码抽 ...

  2. 解决git报错:error: RPC failed; curl 18 transfer closed with outstanding read data remaining 的方法

    报错信息: error: RPC failed; curl 18 transfer closed with outstanding read data remainingfatal: the remo ...

  3. GetWindowRect与GetClientRect 的区别

    GetWindowRect 函数功能:该函数返回指定窗口的边框矩形的尺寸.该尺寸以相对于屏幕坐标左上角的屏幕坐标给出. 函数原型:BOOL GetWindowRect(HWND hWnd,LPRECT ...

  4. 【WPF学习】第四十一章 变换

    通过使用变换(transform),许多绘图任务将更趋简单:变换是通过不加通告地切换形状或元素使用的坐标系统来改变形状或元素绘制方式的对象.在WPF中,变换由继承自System.Windows.Med ...

  5. ARTS Week 14

    Jan 27, 2020 ~ Feb 2, 2020 Algorithm Problem 160.Intersection of Two Linked Lists(相交链表) 题目链接 题目描述:给定 ...

  6. linux入门系列11--Centos7网络服务管理

    通过前面文章的学习已经掌握了Linux系统配置管理的知识,本文讲解Centos7网络配置知识. Linux要对外提供服务,需要保证网络通信正常,因此需要正确配置网络参数.本文将讲解如何使用Networ ...

  7. 使用 GitHub Actions 实现 Hexo 博客自动部署

    一.Hexo 相关知识点 静态博客简单,但是发布博文时稍显麻烦,一般需要下面两步: hexo clean hexo g -d // 相当于 hexo g + hexo d 如果考虑到同步源文件,还需要 ...

  8. 转:JSON与Map互转

    JSON字符串与Map互转   //一.map转为json字符串 public static String map2jsonstr(Map<String,?> map){ return J ...

  9. Window10和Ubuntu 18.04双系统安装的引导问题解决

    作为码农 首先,建议了解下grub2的启动顺序和逻辑.可以参考这篇文章,grub.cfg详解. 从执行顺序倒推,如下如果全部执行成功,则会进入grub的启动菜单:如果最后一步,没有找到grub.cfg ...

  10. Thread Based Parallelism - Thread in a Subclass

    Thread Based Parallelism - Thread in a Subclass 1 import threading import time exit_Flag = 0 class m ...