visual studio code新手入门

基于一段时间的使用体验有感而发;

第一步:安装软件

安装visual studio code软件(直接复制链接https://code.visualstudio.com/下载安装即可);

第二步:安装插件

1、必备插件:

(1)、Chinese (Simplified) Language Pack for Visual Studio Code(简体中文扩展包)

如果你的英文超级好请忽略;

(2)、live server(说简单点就是帮你打开浏览器的;下面有详解)

2、实用插件:

(1)、Debugger for Chrome(在Chrome浏览器或支持Chrome Debugger协议的任何其他目标中调试JavaScript代码)

(2)、JavaScript Snippet Pack(片段代码包)

(3)、Path Intellisense(路径智能感知;可自动填充文件名)

3、优化插件:

(1)、Beautify(代码格式化)

(2)、Bracket Pair Colorizer(多彩括号)

(3)、One Dark Pro(个人比较喜欢的颜色主题>推荐)

(4)、vscode-icons(很漂亮实用的文件图标)

第三步:简单设置

1、切换主题:

按如下操作执行选择你喜欢的主题就可以啦

2、控制字体大小:

3、控制折行方式:

live server详解:

(1)、在窗口的最底部有Go Live可以点击,点击之后,就会自动在浏览器中打开HTML文件

如果同样的位置你的显示的是这个

那就点击它切换回GO live再点击!!!

(2)、在HTML文件中右键,然后点击open live server

(3)、快捷键 :(alt+L, O) 打开服务;   (alt+L, C) 关闭服务

(4)、智能化浏览器(了解详情有链接:https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md)

按照上述步骤最后在工作区设置中添加代码:

{
"liveServer.settings.port":5500,
"liveServer.settings.root":"/src",
"liveServer.settings.CustomBrowser":"chrome",
"liveServer.settings.AdvanceCustomBrowserCmdLine":
"chrome--incognito--remote-debugging-port=9222",
"liveServer.settings.NoBrowser":false,
"liveServer.settings.ignoreFiles":[
".vscode/**",
"**/*.scss",
"**/*.sass",
"**/*.ts"
]
}

原文地址:https://www.cnblogs.com/qingtiao/p/10261249.html

时间: 2024-10-10 22:27:23

visual studio code新手入门的相关文章

Windows 10下 Visual Studio Code (VSCode) 入门

需要安装 Chrome VSCode这货调试客户端JavaScript代码需要通过Chrome进行 https://www.google.cn/chrome/ 安装 VSCode https://code.visualstudio.com/ 原文地址:https://www.cnblogs.com/nuets/p/10129807.html

AliOS-Things Visual studio code helloworld 入门

AliOS Things 完成第一个应用:Hello World 全局掌控 从Git上下载源码 用VSCode打开源码,查看源码的目录结构 打开HelloWorld 确认手中的硬件.零妖的硬件型号是 Developer Kit . 编译源码 确认硬件,烧录代码.打开串口查看程序输出的信息. 从Git上下载源码 新建一个文件夹,用来存放源码.比如我在电脑的F盘根目录下,新建一个 AliOS_Source 的文件夹. 打开这个文件夹,然后打开命令行.如果你是WIN7等系统,可以打开CMD命令行,进入

Visual Studio Code中文文档(一)-快速入门

Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行.Visual Studio Code内置了对JavaScript, TypeScript和Node.js语言的支持,并且为其他语言如C++, C#, Python, PHP等提供了丰富的扩展库和运行时. 一.Visual Studio Code实际应用(一)快速强大的编码功能:    能够快速捕捉程序中的问题并突出显示.支持多光标编辑,参数提示

visual studio code教程:基础使用和自定义设置

一.界面介绍 1.1 界面介绍 1.2 文件夹和文件的打开 文件-->打开文件夹/打开文件 1.3 新建文件/文件夹 新建文件: a. 文件-->新建文件: b. 按Ctrl+n; c. 点文件夹名后面的+号图标. 新建文件夹: 点文件夹名后面的+号图标 1.4 拆分编辑器(分列) 快加键:Ctrl+\ 点击拆分编辑器图标(右上角)进行拆分编辑器.拆分完毕之后,可以通过鼠标点击拖动文件到相应的列.多列同时浏览免去多文件来回切换 1.5 集成终端 终端对开发者来说不可或缺,Visual Stud

Visual Studio Code,完美的编辑器

今日凌晨,微软的文本(代码)编辑器 Visual Studio Code(简称 VS Code),发布了首个正式版,距离首个 beta 版上线时间刚好一年. 在十多年的编程经历中,我使用过非常多的的代码编辑器(包括 IDE),例如 FrontPage.Dreamweaver.EditPlus.EmEditor.Notepad++.Apatana.MyEclipse.TextMate.Coda.VIM.Intellij IDEA.Sublime Text.PhpStorm.Atom.Bracket

Visual Studio Code ,VScode,你没听过?

Visual Studio Code,是一款微软今年新出来的GUI编辑器.它其实就是一款简单的代码编辑工具,跟Visual Studio.WebStorm.Eclipse.myEclipse...这些集成的开发环境并不是一个概念. 目前市场上比较常见的一些GUI编辑器的产品:SublimeText.Notepad++.Atom.H5 Builder.Brackets等等,包括终端下的Vim.Emacs等等,都是这个vscode的竞品.但是我个人比较常用SublimeText,没有为什么,只是因为

Visual Studio Code——Angular2 Hello World 之 2.0

最近看到一篇用Visual Studio Code开发Angular2的文章,也是一篇入门教程,地址为:使用Visual Studio Code開發Angular 2專案.这里按部就班的做了一遍,感觉很方便,并且没有遇到楼主的一些问题,应该是安装环境有些不同.这里只为记录一下.再次感谢! 一.随便新建一个目录,这里为:F:\Visual Studio Code\angular2_1,并用Visual Studio Code 二.依次新建如下四个文件,参考https://angular.cn/do

EOS区块链开发IDE推荐使用Visual Studio Code和CLion

每一个开发人员都需要一个良好的IDE,EOS开发也是一样,为项目开发过程构建一个良好的IDE环境是第一步.这就是为什么我们要写这个如何使用VS Code或者CLion进行EOS开发的快速教程的原因. 我们还为VS Code创建了一些脚本,这些脚本将你在终端中使用的一些命令自动化. 设置Visual Studio Code 首先,如果你还没有这些VS Code扩展的话,安装一下.对于EOS Dapp开发,它们将非常有帮助: C/C++ - VS Code的智能感知.调试和代码浏览 CMake -

30个极大提高开发效率的Visual Studio Code插件

译者按: 看完这篇文章,我打算从 Sublime Text 转到 Visual Studio Code 了! 原文: Immensely upgrade your development environment with these Visual Studio Code extensions 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 我们的 VSC(VSCode)将会像一个长了五只可以发射激光的独角兽一样!接下来会介绍我每天使用