当前位置:懂科普 >

综合知识

> visual studio code怎么使用

visual studio code怎么使用

visual studio code怎么使用

演示机型:华为MateBook X

系统版本:win10

APP版本:visual studio codev1.61.0

visual studio code怎么使用共有4步。以下是华为MateBook X中使用visual studio code的具体操作步骤: 操作/步骤

1、点击Explorer

visual studio code怎么使用 第2张

打开visual studio code软件,第一个常用功能是Explorer,即浏览器功能。

2、点击File菜单

visual studio code怎么使用 第3张

第二个常用功能是File菜单,即文件菜单。

3、点击Debug菜单

visual studio code怎么使用 第4张

第三个常用功能是Debug菜单,即调试功能。

4、点击Terminal

visual studio code怎么使用 第5张

第四个常用的功能是Terminal菜单,即命令行功能。 END 总结:以上就是关于visual studio code怎么使用的具体操作步骤,希望对大家有帮助。

小编还为您整理了以下内容,可能对您也有帮助:

visual studio code怎么用

Microsoft 今天在其 Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 OS X,Windows 和 Linux 之上的,针对于编写现代 web 和云应用的跨平台编辑器。该应用仍然处于预览版阶段,但是你现在就可以在这里下载体验。

这标志着 Microsoft 第一次向开发者们提供了一款真正的跨平台编辑器。虽然完整版的 Visual Studio 仍然是只能运行在 Windows 之上,但是今天的声明向我们展示了这家公司对于支持其他计算机平台的承诺。

逗很多人都使用 Windows 作为他们的开发环境,但是我们也注意到了,还有很多人使用 Linux 和 Mac逗,Somasegar,Microsoft 公司的开发者事业部总裁在这周稍早时候对笔者如是说道。地我们想让他们能够在他们习惯的平台上使用我们公司的产品,而不是非要迁徙到 Windows 上逗。这些平台上的很多开发者们也更乐意于使用像 Sublime Text 这种轻量级的代码编辑器,而非像 Visual Studio 这种全特性的 IDE。

Visual Studio Code 为开发者们提供了对多种编程语言的内置支持,并且正如 Microsoft 在今天 Build 大会的 keynote 中所指出的,这款编辑器也会为这些语言都提供了丰富的代码补全和导航功能。JavaScript,TypeScript,Node.js 和 ASP.NET 5 开发者也将会获得额外的工具集。

该编辑器也集成了所有一款现代编辑器所应该具备的特性,包括语法高亮(syntax hight lighting),可定制的热键绑定(customizable keyboard bindings),括号匹配(bracket matching)以及代码片段收集(snippets)。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。

正如 Somasegar 所言,新款编辑器部分基于 Microsoft 为 Visual Studio Online 编写 Monaco 编辑器时的经验,但是该公司也正努力将一些 Visual Studio 的语言特性带到 Visual Studio Code 上,例如 Roslyn 项目,Microsoft 的 .NET 编译器平台。并且 Microsoft 声称这些为 VSC 打造的语言服务也会在其他编辑器包括 Sublime Text,Vi 以及 Atom 中可用。

上面提到的一些语言特性已经在其他编辑器中可用了。就在不久前,Microsoft 启动了针对 Sublime Text 的 TypeScript 插件项目,并且 Somasegar 告诉笔者该公司承诺会在未来启动更多类似于这样的项目(归根结底,是为了满足开发者们的需要)。

Visual Studio Code 的发布的确来的很突然。然后仔细想想这在一段时间之前就已经有了预兆,比如 .NET 内核的开源(以及使其能够跨平台运行)或者是社区版的 Visual Studio Community 的启动。

如果是在短短几年前,今天的宣布势必会引起轩然大波,但是今天,这对我们来说更多的是惊喜。

Mac 终端 Terminal 中使用 Visual Studio Code

一、如果是默认bash

command+shift+p 输入shell 第一项

之后就可以使用code快捷命令了

code . // 使用 vscode 打开当前目录

code filename // 使用 vscode 打开文件

二、如果shell使用的是zsh

echo"alias vscode='/Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron'">> ~/.zshrc

visual studio code怎么运行

你可以下载VS然后使用VS中的cl编译器,百度一下“在控制台使用cl编译器”,大概就是这个意思。主要是环境变量,include的包含文件夹这些设置。

完成这些,win+R,cmd 输入cl测试一下。VSC自带在编写代码的时候,右键打开当前文件目录的控制台。

比如C++,在VSC中写完代码后,保存为 name. cc,然后打开控制台(进入当前目录),输入 cl name. cc 编译,成功以后,输入 name 就可以运行了。

用编辑器(比如VSC)配合编译器(比如cl)写小程序比IDE(比如VS)效率高得多,毕竟IDE太大太慢了

目前VSC不支持中文编码

visual studio code 怎么运行代码的

调试方式一般有两种:

第一种:可以直接编辑你要输入的代码,然后点击“文件”进行“保存”。在你所保存的地方可以看到下图,这个保存的是一个纯文本,直接打开(如用浏览器)可以看到自己所编译的代码语句。从上图的右下角可以看到纯文本三个字。然后对此文件夹修改扩展名,例如html和js,一般生成html,则扩展名为html,就可以看到此文件自动变成了网页文件,用浏览器打开可以看到不再是之前的代码,而是运行的结果。在VS Code 中修改语句进行保存,再刷新网页则出来新的结果。

第二种:点击右下角的纯文本,顶部则会出现语言让你选择,选择之后进行编译你的代码,然后保存。再用浏览器打开你所保存的文件,则出现运行结果。修改代码,保存后对网页进行刷新,则出现修改后的结果。

visual studio code怎么设置

1.1 认识视图界面

和大多编辑器一样,该有的基本都有。

1.2 文件夹和文件的打开

文件——>打开文件夹/打开文件

1.3 新建文件/文件夹

新建文件:

a. 文件——>新建文件;

b. 按Ctrl+n;

c. 点文件夹名后面的+号图标。

新建文件夹:

点文件夹名后面的+号图标。

1.4 拆分编辑器(分列)

快加键:Ctrl+\

点击拆分编辑器图标(右上角)进行拆分编辑器。拆分完毕之后,可以通过鼠标点击拖动文件到相应的列。多列同时浏览免去多文件来回切换。

1.5 集成终端

终端对开发者来说不可或缺,Visual Studio code 自然也自带终端视窗。

可按快捷键Ctrl+`快速调出终端,也可以 查看——>集成终端 调出。

需要注意的是:如果当前的文件夹的路径名称包含中文,会出现终端打开失败(待验证)。

1.6 安装/卸载扩展(插件)

a. 进入扩展视图界面安装/卸载

a1.快捷键:Ctrl+shift+x;

a2.查看——>扩展;

a3.点左侧边框的扩展图标按钮进入。

在顶部搜索框输入你需要的扩展插件,找到之后在扩展插件后面的选项中点击【安装】即可,需要卸载扩展只需要点【卸载】即可。

扩展下载安装完毕之后需要点击【启用】才生效,有些扩展需要重启编辑器才生效。

b. 如何选择扩展(插件)呢?

其实也不难,扩展的名称一般都暴露了它的功能,基本如下:

1.带snippets 一般是代码提示类扩展;

2.带viewer 一般是代码运行预览类扩展;

3.带support 一般是代码语言支持;

4.带document 一般是参考文档类扩展;

5.带Formatt 一般是代码格式化整理扩展;

当然有的snippets 也自带support功能,并不是以上面的关键词作为唯一标准。

1.7 文件图标主题设置

之前写的有一篇经验,链接附上。

0Visual Studio Code 怎么设置文件图标主题?

END

2.VS code用户设置

2.1 用户设置入口

VS code支持用户自定义设置编辑器,包括快加键修改、代码高亮、以及扩展插件配置等,点击文件——>首选项——>用户设置。

编辑器会拆分为两列,一个文件是【默认设置】,一个是【settings.json】,用户设置是空的【settings.json】这个文件(之前没有设置的话),需要自定义的设置项就在settings.json文件里写入json代码即可。

2.2 自定义的设置方法为:

1、在【默认设置】里找到相关的设置json代码段,复制该设置完整的json块,例如:【"editor.fontSize": 14,】。

2、到【settings.json】粘贴。不过记得加上外层(前后)“{}”符号,不然不是完整的json,会出错或者设置无效。

例如:

{ "editor.fontSize": 20}

完后按Ctrl+s保存关掉窗口,编辑器的文字的大小就变成20了。

需要注意的是,【settings.json】的代码必须符合json格式,且名称(如上面的editor.fontSize)和值对(如上面的20)是【默认设置】里有的或者是扩展中支持的,不然不会有任何作用。

END

3.插件推荐及使用配置

VS code的扩展还是比较丰富的,具体选择方法在前面的步骤1.6已经教大家了,下面介绍几个对基本web前端编辑比较实用的扩展插件(我个人认为)。

3.1 HTNL Snippets

为HTML文档提供代码提示功能,包含HTML5。

3.2 easyless为less文档提供提示,错误警告,以及把less文档编译为css文件。可自定义设置。开发者给出的配置例子:

"less.compile": {"compress": true,"sourceMap": true,"out":false}

可以粘贴到用户设置的【默认设置】里,也可以粘贴到用户设置settings.json里。后面的懂json的同学自动忽略:如果settings.json是空的,应该写成:

{"less.compile": {"compress": true,"sourceMap": true,"out":false}}

如果之前已有写入json代码,你应该在前面的名称/值对块后面加上“,”(新手容易多加或者少加","符号,个人觉得是这样的)。

****提示:****

在写的时候,代码内最好不要加注释。"sourceMap": true, 这个地方最好设置成false ,因为当你实际使用的时候浏览器找不到sourceMap 可能会报错或者浏览器一直去找,还没遇到过(我碰到jQuery.js因为这个报错的),入门的同学还是设置成false 比较好。

3.3 VS color Picker

为css文档和HTML文档提供颜色选择,当输入“#”后会出现颜色选择器浮窗,点击相应颜色之后会插入文档中,默认用16进制表示。若想用其他格式的颜色,如RGB等则推荐扩展:Color Picker (Color Picker缺点是需要配置,安装nodejs,并且添加node到全局环境变量中。而且在插入时需要使用命令调出提色板,有点麻烦)

3.4 live HTML Previewer

为html文档提供预览功能,需要用命令或者快捷键调出,会在编辑器中新增一列,用于运行html文件。

a. 按F1在命令框中输入:Show side preview 新增一列显示html,能边写边看到效果,实时预览。

b. 可以在html文档中右键选择:Open in browser 在系统默认浏览器中打开,该模式下不能提供实时预览,保存时不自动刷新浏览器。

3.5 SVG Viewer

为SVG 文档在编辑器中提供预览。

a. 按F1在命令框中输入:SVG

b. 选择SVG Viewer,新增一列显示SVG运行结果。

END

4.VS code 用户代码片段

4.1 用户代码片段 设置入口及示例

用户代码片段 是用来提示代码提示及快捷插入的,那么怎么做呢?

1.文件——>首选项——>用户代码片段

2.选择代码语言

3.按固定格式写json代码

示例格式:

"Print to console":

{"prefix": "log",

"body": ["console.log('$1');","$2"],"description": "Log output to console"}

4.2 片段json示例写法详解

可变区域(这里用XXXX表示)如下:A. "Print to XXXX": {

//仅作为标识和目的用途,区别于其他代码块(有多个相同值时会报错),不会插入。

B."prefix": "XXXX",

//触发提示的关键字符,也就是输入什么时弹出提示窗。例如:当希望输入a的时候就弹出,这里就写a。在提示窗显示。

C. "body": ["XXXX $1 XXXX"],

//在编辑器中插入的代码块,例如当在提示窗中选择a的时候就插入【<a>a</a>】那么这里就写:<a>a</a>

D. "description": "XXXX"

// 这里是相关描述,比如说明插入的代码块内容、用途、代码结构、参数等,仅在提示窗显示不会插入}

E. 上面示例中的$1和$2是初始定位光标位置,用于插入后需要修改的值、参数等。还是上面的例子:

"body":["<a>$1</a>"]

那么在插入<a></a>之后,光标的位置将处于<a>和</a>的中间。再如:

"body":["<a>$1</a>",

"<span>$2GBK</span>"]

那么在插入

<a></a>

<span>GBK</span>

之后,光标首先在a标签内,输入完内容之后,光标跳到<span>和GBK中间。输入或者移动光标之后光标恢复正常

4.3 怎么使插入的代码块符合格式化标准?

代码格式化主要就是缩进和换行了。

1.要缩进的地方按下TAB键即可,例如:[" <a>$1</a>"]

2.怎么在"body":[]中插入带双引号的内容?因为注释带有特殊符号尤其是带有双引号("")的内容会导致json报错,解决方法是用反斜杠“\”对特殊符号进行转义。

例如:

那么"body":[]那里应该这样写:

这里在"description": "XXXX"那里同样适用。

总的来说,碰到json报错的字符或者符号就用反斜杠“\”进行转义。当然你要考虑插入之后会不会影响程序文档报错或者出现异常,也就是要先确定插入的代码块是正确的完整的,这是自定义代码块存在的意义

4.4 下面是我写的一段完整的示例(XXXX都匿了):自定义的json{

"Print to authorInfo": {

"prefix": "au",

"body": [

"-----By Ray-----",

"mail:XXXXXXX",

"description:$1",

" Step 1:",

" Step 2:",

"<a href=\"XXXX/\">凯玩网</a>"],

"description": "author info"

软件技巧(8)---- Ubuntu 开发环境搭建/Visual studio code 使用技巧

Ubuntu 18.04安装完后,还需要做一些配置才能愉快的使用,包括更新软件源、安装搜狗输入法、安装eclipse、Chrome浏览器、配置快捷键、安装git、安装Visual studio code 等等,下面就来介绍这些软件的配置方法.

sudo apt-get update 等待源更新完成即可

直接在Ubuntu 的软件中心找到 Chromium 输入法安装即可

直接在Ubuntu 的软件中心找到Visual Studio Code安装即可

直接在Ubuntu 的软件中心找到Eclipse安装即可

回到“语言支持”窗口,在键盘输入法系统中,选择“fcitx”

如果在键盘输入法系统中,没有“fcitx”选项时,建议先打开终端手动安装fcitx:sudo apt-get install fcitx 等安装成功之后再执行上述步骤点击“应用到整个系统”,关闭窗口,重启电脑

重启后使用 shift 键就可以切换输入法

设置 -- Device -- Keyboard 选项

配置 shift + windows + S 键为我们截图的快捷键

文件-- 打开文件夹 就可以打开一个工作区

文件 -- 首选项 -- 设置 在设置里更改字体,注意的字体是需要自己手动输入的

在需要查找的变量或者函数上右击 -- 查找定义

工作区分为文件预览区,函数预览区(大纲),编辑区

编辑器右侧 -- 显示打开的编辑器,可以查找文件名或者函数名

格式为 / .a 表示排除所有文件夹下的 .a 文件

Visual Studio Code 怎么安装插件

1、首先打开vscode软件,点击左边按钮中的插件按钮,进去后这里有个搜索框,软件默认也会推荐一些插件,可以根据需要安装。如果是精确的安装一个插件,可以点击上方的搜索按钮搜素:

2、比如搜素一款能够同步vscode设置的名叫Settings Sync的插件,输入搜索词后,下方会展示搜索结果,点击进入插件说明,在右边的界面上点击安装按钮:

3、等待数秒安装完毕后,点击重新加载才能使它生效:

4、重启vscode后,插件就安装成功了,此时很多插件会在右下角弹出提示框。以上就是Visual Studio Code 安装插件的方法:

如何使用 visual studio code 编译和调试 java 代码

介绍

Visual Studio Code的宣传语是:

一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。

按说的,Visual Studio Code特别适合来作为前端开发编辑器。

内置html开发神器emmet(zencoding),对css及其相关编译型语言Less和Sass都有很好的支持。

当然,最nice的还是写js代码了,这也是接下来要着重介绍的功能。

智能提示

因为之前微软推出了typescript语言,结合tsd文件,用visual studio写typescript代码是相当爽的,智能提示的功能非常nb。

这个功能理所应当也被vsc继承了。

目前主流的前端类库/框架,包括node.js及其模块/框架都有相应的tsd文件,可以去DefinitelyTyped上找一下。

在项目中引入对应文件,就可以有智能提示了。

这里以angular为例,使用步骤如下:

全局安装tsd,通过tsd安装.d.ts文件。这样会在项目下面生成.typings目录,目录下面就是下载的.d.ts文件,再写代码的时候就会有智能提示了。具体用法参考tsd用法。

npm install -g tsd

tsd query angular --action install

如果不想自己手工引入,也可以在angular变量后面按ctrl+k,会有个灯泡图片,点击灯泡图片就会有对应提示,选择下载xx.d.ts文件就可以了,编辑器会下载对应文件放在.typings目录。

过程如下图:

说完智能提示,再说代码调试。

调试Node

之前写过文章介绍过node.js的调试方案(Node.js调试)。从vsc发布后,就一直用写代码,也是用来调试node.js代码。

使用方法也很简单,步骤如下:

打开要调试的文件,按f5,编辑器会生成一个launch.json

修改launch.json相关内容,主要是name和program字段,改成和项目对应的

点击编辑器左侧长得像蜘蛛的那个按钮

点击左上角DEBUG后面的按钮,启动调试

打断点,尽情调试

过程如下图:

最后,再赠送彩蛋一个。

Node API 查看

在写node.js代码的时候,有时会忘记某个模块中有哪些方法及其用法,经常要去官网翻一下api文档。

这里介绍下怎么使用vsc来搞定这一问题。

打开vsc控制台(Help > Toggle Developer Tools > Console)

在控制台写代码,查询模块方法。

过程如下图:

vsc是用atom-shell(现在叫electron)写的,这和node-webkit(现在叫nw.js)一样,都是把node.js和chrome结合起来的工具,所以可以这么使用。

不过vsc使用到的node.js模块并不多,比如引用util和vm等会报错,用node-webkit就不会这样。

如何使用 visual studio code 编译和调试 java 代码

如何使用 visual studio code 编译和调试 java 代码

算法可表示如下:

S1: sigh=1

S2: sum=1

S3: deno=2

S4: sigh=(-1)×sigh

S5: term= sigh×(1/deno )

S6: term=sum+term

S7: deno= deno +1

S8:若deno≤100,返回S4;否则,结束。

visual studio code怎么运行python怎么

1.安装 Python 插件 进入主界面之后按Ctrl + p,输入:ext install python,下载第一个即可。 下载Python 插件后即可在编写 Python 脚本时使用代码自动补全功能。

2.设置 Python 运行 要在Visual Studio Code 中运行 Python 代码需要修改 tasks.json 配置代码,而修改 tasks.json 配置代码则必须先创建工作文件夹。

标签: studio code visual
  • 文章版权属于文章作者所有,转载请注明 https://dongkepu.com/zonghezhishi/r54w08.html