文档章节

vscode使用

B
 BaronChen
发布于 2017/01/03 23:25
字数 750
阅读 643
收藏 1

#主要分为以下部分:

  1. 常用快捷键
  2. 软件设置
  3. 语言支持
  4. git支持
  5. 拓展安装(主题和图标设置 )

小提示:

  1. 熟练使用方向键,将提高编辑文件操作速度
  2. 官方帮助文档

1、常用快捷键

完全快捷键请查看文件vscode快捷键

选中一个单词  
    Ctrl + D 
选中一行  
    Ctrl + I 
放大缩小页面
    Ctrl + +,Ctrl + -
已打开文件之间的切换  
    Ctrl + PageDown,Ctrl + PageUp  
打开文件
    Ctrl + P(输入?,可以给出帮助)
自动删除行尾空白符  
    Ctrl + K,Ctrl + X  
自动代码格式化
    Ctrl + Shift + F
打开控制台
    Ctrl + `
打开命令面板
    Ctrl + Shift + P 
打开日志输出面板
    Ctrl + Shift + U
打开调试面板
    Ctrl + Shift + Y
关闭当前标签页
    Ctrl + W
开关侧边栏  
    Ctrl + B  
侧边栏快捷键  
   Ctrl + Shift + E,F,G,D,X打开资源管理器(Explorer),全局搜索(Find),Git,调试(Debug),拓展(External)  
常用的简单的
    Ctrl + F
    Ctrl + H
    Ctrl + O
    Ctrl + S
    Ctrl + Shift + S

##2、软件设置 点击菜单栏 文件-首选项-工作区设置(用户设置,所有的设置选项一样,只不过用户区设置是对当前用户生效,工作区设置只对当前文件夹生效
里面可以设置字体,操作方式等等
以下是我的常用设置

{
        "editor.fontSize": 20, // 字体设置
        "editor.rulers": [80, 120], // 标尺,用于提示自己一行尽量不超过80字符,最多不超过120字符
        "editor.detectIndentation": true, // 自动检测tab占几个空格
        "editor.wrappingColumn": 120, // 超过120个字符强制换行
        "editor.quickSuggestionsDelay": 0, // 0ms后显示智能提示
        "editor.mouseWheelZoom": true, // 鼠标滚轮放大缩小主界面
        "editor.renderWhitespace": "all", // 显示所有空白字符
        "editor.renderControlCharacters": true, // 显示所有控制字符
        "editor.renderIndentGuides": true, // 显示大括号的自动对齐线
        "files.trimTrailingWhitespace": true, // 保存文件时,自动删除删除行尾空格
        "files.autoSave": "on", // 自动保存
        "files.autoSaveDelay": 1000 // 1000ms后自动保存
}

##3、语言支持 完全调试请看js语言支持 此部分主要简单讲解一下使用vscode进行调试nodejs)
test.js

let test = "this is just a test";
console.log(test);

按下F5,选择Nodejs,会出现以下文件
lauch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceRoot}\\test.js", // test.js 代表需要调试时将要执行的文件
            "cwd": "${workspaceRoot}",
            "outFiles": [],
            "sourceMaps": true
        },
        {
            "type": "node",
            "request": "attach",
            "name": "附加到进程",
            "port": 5858,
            "outFiles": [],
            "sourceMaps": true
        }
    ]
}

##4、git支持 git的支持也很简单的,主要就是对于文件的diff,以及将文件的修改暂存起来
Ctrl + Enter会直接将暂存的修改Commit到本地仓库,然后push到git服务器 输入图片说明

##5、拓展安装(主题和图标设置 ) Ctrl + Shift + X打开插件商店,输入react,可以看到如下图界面,点击安装即可 输入图片说明 查找主题或者图标则输入tag:theme或者tag:icon-theme 输入图片说明

#总结: vscode是一款相当出色的编辑器,是开发前端的得力助手,其插件拓展十分的有用。

© 著作权归作者所有

B
粉丝 0
博文 11
码字总数 6676
作品 0
南京
私信 提问
Dive Into Code: VSCode 源码阅读(一)

作者简介 zqlu 蚂蚁金服·数据体验技术团队 VS Code 是一款新的工具,它将代码编辑器的简洁和程序开发人员在开发-构建-调试流程中所需要的工具结合在一起。Code 提供了全面的编辑和调试功能支...

蚂蚁金服数据体验技术
2018/10/30
0
0
vscode 调试node之npm与nodemon

更多相关内容见博客 github.com/zhuanyongxi… 调试nodejs有很多方式,可以看这一篇How to Debug Node.js with the Best Tools Available,其中我最喜欢使用的还是V8 Inspector和vscode的方式...

砖用冰西瓜
2018/06/18
0
0
使用VS Code 开发.NET CORE 程序指南

1. 前言 近两年来,很多前端的同学都开始将 VSCode 作为前端主力开发工具,其丰富的扩展给程序开发尤其是前端开发带来了很多便利,但是作为微软主力语言的 .NET,却由于有宇宙第一编辑器 Vi...

xboo
08/29
0
0
Python+VSCode+Git 学习总结

稍等,先写个脑图... 继续,读完本文,你会学会: 1.如何在VSCode中写Python代码; 2.如何在VSCode中使用Git; 为什么写这篇总结 首先,我假设你是一名Python语言初学者,你下载了Python3.5...

秦无邪
2017/11/22
0
0
放弃 VSCode,再次选择使用十年之久的 Emacs

几个月前,我决定从 DevOps 转投使用 JavaScript 进行 Web 开发。起初我打算继续使用 Emacs 编辑器,但是相比于 Python,它对 JavaScript 的支持很差劲。我浪费了至少一天的时间配置 Emacs,...

CSDN资讯
2018/09/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

采坑指南——k8s域名解析coredns问题排查过程

正文 前几天,在ucloud上搭建的k8s集群(搭建教程后续会发出)。今天发现域名解析不了。 组件版本:k8s 1.15.0,coredns:1.3.1 过程是这样的: 首先用以下yaml文件创建了一个nginx服务 apiV...

码农实战
14分钟前
1
0
【2019年8月版本】OCP 071认证考试最新版本的考试原题-第6题

choose three Which three statements are true about indexes and their administration in an Orade database? A) An INVISIBLE index is not maintained when Data Manipulation Language......

oschina_5359
17分钟前
1
0
阿里巴巴开源 Dragonwell JDK 最新版本 8.1.1-GA 发布

导读:新版本主要有三大变化:同步了 OpenJDK 上游社区 jdk8u222-ga 的最新更新;带来了正式的 feature:G1ElasticHeap;发布了用户期待的 Windows 实验版本 Experimental Windows version。...

阿里巴巴云原生
22分钟前
1
0
教你玩转Linux—磁盘管理

Linux磁盘管理好坏直接关系到整个系统的性能问题,Linux磁盘管理常用三个命令为df、du和fdisk。 df df命令参数功能:检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少...

xiangyunyan
25分钟前
3
0
js 让textarea的高度自适应父元素的高度

textarea按照普通元素设置height是没有作用的,可以这么来设置, 下面给上一段项目代码 JS代码: $.fn.extend({ txtaAutoHeight: function () { return this.each(function () {...

文文1
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部