1.visual studio code怎么用
在我的上一篇经验中介绍了如何下载windows版的visual studio code
下载后得到熟悉的exe 安装包
双击运行
会自动进行安装 设置 无需我们额外的操作 也没有任何其他的捆绑软件需要我们去注意 呵呵 /(^o^)/
安装完成后就会自动打开 Visual studio code
微软一贯的暗黑系风格
END
Visual Studio Code
顶部为菜单栏
File
Edit
View
Goto
Help
最左侧为快捷菜单 包括资源管理器 查询 Git 还有调试
中间部分就是我们的代码编辑区了
右侧是微软提供的一些操作技巧 便于我们快速上手
底部为输入统计信息 行数 字符数等
2.visual studio code怎么运行
Visual Studio Code,VS Code只能编辑代码,没有调试等命令,使用惯了编译器,会发现VS Code有点儿无从下手。
VS Code打开,
调试方式一般有两种:
第一种:可以直接编辑你要输入的代码,然后点击“文件”进行“保存”。在你所保存的地方可以看到,这个保存的是一个纯文本,直接打开(如用浏览器)可以看到自己所编译的代码语句。然后对此文件夹修改扩展名,例如html和js,一般生成html,则扩展名为html,就可以看到此文件自动变成了网页文件,用浏览器打开可以看到不再是之前的代码,而是运行的结果。在VS Code 中修改语句进行保存,再刷新网页则出来新的结果。
第二种:点击右下角的纯文本,顶部则会出现语言让你选择,选择之后进行编译你的代码,然后保存。再用浏览器打开你所保存的文件,则出现运行结果。修改代码,保存后对网页进行刷新,则出现修改后的结果。
3.visual studio code的代码怎么运行
第一种:可以直接编辑你要输入的代码,然后点击“文件”进行“保存”。在你所保存的地方可以看到下图,这个保存的是一个纯文本,直接打开(如用浏览器)可以看到自己所编译的代码语句。从上图的右下角可以看到纯文本三个字。然后对此文件夹修改扩展名,例如html和js,一般生成html,则扩展名为html,就可以看到此文件自动变成了网页文件,用浏览器打开可以看到不再是之前的代码,而是运行的结果。在VS Code 中修改语句进行保存,再刷新网页则出来新的结果。
第二种:点击右下角的纯文本,顶部则会出现语言让你选择,选择之后进行编译你的代码,然后保存。再用浏览器打开你所保存的文件,则出现运行结果。修改代码,保存后对网页进行刷新,则出现修改后的结果。
Visual Studio Code是一个运行于 OS X,Windows和 Linux 之上的,针对于编写现代 web 和云应用的跨平台编辑器。
Visual Studio Code 为开发者们提供了对多种编程语言的内置支持,并且正如 Microsoft 在Build 大会的 keynote 中所指出的,这款编辑器也会为这些语言都提供了丰富的代码补全和导航功能。
4.visual studio code主要用来写什么语言
它是一个编辑器,和vi/vim、nano是一个性质的东西。
它存在的意义就是独立于编译器,只留存基本的编辑功能,而将编译的工作交给专门的编译器去处理,降低其功能的重复性。
像Visual Studio本尊在安装的是否也是会要求下载推荐版本的编译器的,更新的时候通过Installer去更新。试想一下,如果你电脑里面已经带有了一个编译器,再下载一个编译器难道不是显得很多余的一件事吗?明明只需要配置一下就可以开始使用的东西,现在需要你把这个东西重新下载一遍,然后再开始配置,这种工作不是很烦吗?
Visual Studio Code本身是一个轻量级的编辑器,它本身虽然不带编译功能,但是它却可以调用系统已安装的各种编译器,只需要你简单配置一下就可以开始使用,你还可以根据环境自己去安装各种版本的编译器,这绝对是非常方便的事情。
5.怎么用visual studio code 调试
vscode使用task.json来配置项目的构建过程。
打开命令面板(Ctrl+Shift+P)选择Run Build Task(Ctrl+Shift+B)
如果当前工作空间没有task.json配置文件此时会出现提示
选择 Configure Task Runner 自动创建task.json。该配置文件在工作空间的.vscode目录下,这个目录也是存放vscode配置的文件夹。
vscode默认的task配置文件中给出了执行tsc 和 gulp模板配置。简单介绍一下task.json的写法
{
"version": "0.1.0",
// 要使用的命令或者可执行文件的路径
"command": "tsc",
// 对应command参数,是否是一个命令,否则为执行文件路径
"isShellCommand": true,
// 是否在执行task任务时显示控制台窗口
"showOutput": "always",
// 对应command参数指定程序的参数
"args": ["-p", "src", "--allowJs", "-w"],
// 不太明白这个,基本用不到
"problemMatcher": "$tsc",
}
6.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 怎么设置文件图标主题?END2.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)是【默认设置】里有的或者是扩展中支持的,不然不会有任何作用。
END3.插件推荐及使用配置 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运行结果。END4.VS code 用户代码片段4.1 用户代码片段 设置入口及示例 用户代码片段 是用来提示代码提示及快捷插入的,那么怎么做呢?1.文件——>首选项——>用户代码片段2.选择代码语言3.按固定格式写json代码 示例格式。
7.vscode怎么运行javascript
1、直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件)
在launch.json文件中的配置如下:
{
"version": "0.2.0",
"configurations": [{
"name": "谷歌浏览器", //运行html文件,用谷歌浏览器打开
"type": "chrome",
"request": "launch",
"url": "${file}",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "nodeLauch", //单独调试js,即可以直接运行js
"type": "node",
"request": "launch",
"program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"preLaunchTask": "",
"sourceMaps": false,
"outDir": null
}
]
}
2、第二种方法 Ctrl+Shift+B 快捷键运行html文件,在Tasks.json中配置如下:
{
"version": "0.1.0",
"command": "",
"isShellCommand": false,
"args": ["${file}"],
"showOutput": "always",
"windows": {
"command": "C:/Users/shannonliang/AppData/Local/Google/Chrome/Application/chrome.exe"
},
"tasks": [{
"taskName": "webserver",
"isBuildCommand": true,
"showOutput": "always"
}]
}
3、如果第二种方法,不想每次都按这个快捷键,请参考npm配置node服务方法:
-code-in-browser-with-visual-studio-code