首页 > 编程知识 正文

vscode怎么编写html,visual studio code快捷键

时间:2023-05-06 14:14:00 阅读:46105 作者:611

VS码基本使用入门本文档为西安交通大学电气类大学新生编写的VS码入门介绍,只有本人推荐同学、朋友使用VS码。 本文使用中二体编辑,越写越放飞自己。 如果有错误的话,请指出来

全文markdown源代码9124字、预期阅读时间 infin (谦虚) ) ) ) ) ) ) ) 652 )

文章目录VS Code的基本用法入门为什么在VS Code中安装开发环境基础并配置插件文件夹注: settings.json配置Python编程过程自动完成总结快捷键插件推荐外观onedarkprograph 语言套件forvisualstudiocodeindent-rainbow实用程序PylanceCode Runner摘要联系人

个人资料

3358 www.Sina.com/visual studio code (以下简称VS Code )是微软公司开发的面向广大程序员的强大跨平台VS:

33558 www.Sina.com/visual studio (vs )基本上是一套完整的开发工具,它占用了整个软件生命周期所需的大部分工具,包括UML工具、代码管理工具和集成开发环境(IDE ) 然而,对于初学者来说,vs很快就可以使用,但过于依赖这个强大的IDE,可能会缺乏基础和重要的知识。 另外,vs作为一个完整的开发环境,她也越来越臃肿,不太符合本人简洁至上的习惯() (手动滑稽) ) ) )。

因此,这里选择源代码编辑器进行使用。

为什么要使用vs代码,自从vs上市以来,她被命名为VS Code:。 这不仅是她的完整代码开发、调试和管理功能,而且是为了提高编程速度而专门进行的一系列协调优化。 其中,强大的自动补全功能和各种功能的人性化快捷键,对提高编程速度、改善编程体验起着重要的作用。

VS码是微软继承VSS优点推出的源代码编辑器。 除了VS的优点之外,她还做了以下事情。

支持Linux,在VSCode上迈出了一大步; 通过地表最强IDE独特的跨平台系统,VS Code的功能扩展可能无限; 无论是VS还是VS代码,Visual Studio官方网站都可以下载个人的免费版本。 对vs代码的安装进行说明。

下载vs代码最新版(2020-11-24 )并同意使用策略后,查看以下屏幕并选中所有复选框

然后可以快乐地在没有大脑的情况下进行下一步~~。 开发环境的基础结构如上所述,VS Code是一种源代码编辑器,说白了本质上就是看起来很NB高级的Notepad。 VS码要实现VSS的大部分功能,需要根据语言进行一系列的环境配置。

本节以python为例,从轻量化、文件夹设置和插件两个方面,简要介绍如何配置方便的python开发环境。

插件VS Code的功能扩展体现为插件,因此她的功能灵活多样。

通常,要配置python编程环境,您需要:

从官网下载python39,在要运行安装的VS Code左侧的插件(扩展)中,找到" python ",然后单击第一个选择。

通常,搜索python、c这样的语言时,第一个扩展是微软官方开发的插件

我们只要点击安装按钮进行安装,就可以在文件夹中设置我们的电气专家将来接触控制方向的软件设计。 你需要从刚接触编程就养成良好的文件管理习惯。

用VS Code内置终端进行文件夹的基本设定吧

在vs代码内按Ctrl `打开vs代码内置终端; 在终端上键入cd d:进入d驱动器的根目录; 键入mkdir Workspace在当前目录下创建Workspace文件夹。 这将成为今后的工作空间。 cd .Workspace进入此文件夹; 请告诉我这里的一个小诀窍。 键入cd .wor后,直接按键盘上的选项卡可自动完成目录。 按照上述步骤,继续在Workspace下创建python文件夹,在python文件夹内创建helloworld文件夹,然后将其放入该文件夹。 在代码.vs代码中打开目录; 这样,基本文件夹的设定就完成了。 注:上述操作命令也适用于cmd。 每个命令的含义是cd somedir进入文件夹。 mkd

ir somedir 新建一个文件夹;. . 代表当前目录;相对应的,..代表上一级目录 上述建立文件夹的操作可以在我们熟悉的资源管理器内完成,但是熟悉终端操作可以大大节省时间,提高工作效率。我们按照 “工作空间->语言->项目” 的顺序构建了文件夹,但这只是我的个人习惯,你也可以根据你自己的习惯构建文件系统; settings.json设置

  vscode自定义化的程度很高,一般设置可以通过两种方式进行设置:设置界面、settings.json文件。本教程将简单介绍如何通过settings.json进行设置
  VS Code规定了settings.json文件的路径: ..vscodesettings.json ,即VS Code打开的文件目录下 .vscode 文件夹中。
  json的标准格式是:

{ "keyA": "valueA", "keyB": "valueB"}

  我们作为初学者,了解一些简单的配置参数即可。这里贴出一个简单的例子:

{ "files.defaultLanguage": "python", // 设置新建文件的默认语言为python "editor.formatOnSave": true, // 在保存时自动将文档格式化 "editor.tabSize": 4 // 按下Tab键时缩进空格数(此参数默认为4,python下可以不用设置}

如果想要了解更多,可以查看VS Code官方网站进行更深⚦入的学习。

Python编程流程

那么,我们如何使用VS Code进行python编程呢?我们通过一个简单的helloworld程序进行示例

按下Ctrl+N,新建一个文件;按下Ctrl+S,将文件命名为helloworld.py,并保存在helloworld目录下(如果你settings.json中已经配置过"files.defaultLanguage": "python",则输入文件名的时候可以省略扩展名(.py);在helloworld.py中键入: print('helloworld') Ctrl+S保存,在终端中输入: python helloworld.py 然后就可以在终端中看到程序的输出: helloworld 自动补全

  vscode自动补全是十分强大的,它包括了:

括号(包括() [] {}等)变量名补全关键字补全结构补全

  下面通过一个求阶乘的简单例程举例说明如何使用自动补全。

首先,你非常普通的定义了一个供用户输入的变量 number = int(input('please input the numberヾ(≧▽≦*)o: ')) 然后,我们在上面定义一个普通的函数,用来计算阶乘;这时,你

敲下了DEF

  然后,奇迹发生了!

3. 紧随你的def后面,出现了一个黑框框,不知是谁悄咪咪的告诉了你:

按下Tab吧,靓仔!

  你惊奇的发现,一个完整的函数结构出现了!

4. 你发现函数名称funcname已经被选中了,所以你

直接输入了变量名factoriol,按下Tab
跳转到parameter_list的同时选中了它,你顺手写上了参数num
你就这样通过Tab快速切换,敲好了一个函数的雏形

def factoriol(num): """ this is a smple function, and I'm a docstring. """ pass 之后,你

删掉了pass

  这个无用的家伙

写下了
sum = 1
for

  这时,奇迹又一次降临了!

6. 你敏锐的察觉到如下对应关系:

IconMeaning系统关键字结构函数类变量

  所以你

按下了↓,选择了第二个,然后按下了Tab

  不出所料,出现了跟def补全类似的结构

7. 有了上一次的经验,你

迅速的完成了for循环

for i in range(1, num + 1): ans *= i

  然后写下

ret

  这时你已经对自动补全见怪不怪,熟练地按下tab,完成了

reuturn sum 你已经对VS Code的自动补全基本熟悉了,优雅的敲完了整段程序: def factoriol(num): """ this is a smple function, and I'm a docstring. """ ans = 1 for i in range(1, num + 1): ans *= i return ansnumber = int(input('please input the numberヾ(≧▽≦*)o: '))print(f'the result is {factoriol(number)}') 总结

  回顾这个简单的小程序,你会发现:
  通过几个简单的Tab,你在这短短12行程序中至少少敲击了25次键盘!
  不难想象,将来在稍微复杂一点的程序中,VS Code的自动补全可以帮你简单的完成

重复的变量调用;重复的for循环等结构;重复的函数调用;

  甚至有的时候,它还能起到指导你的作用 (比如在刚刚的例程中你第一次知道了还有函数说明——docstring这种东西的存在)
  因此,熟练的掌握VS Code的使用,无疑会使得你编程速度和水平一点点稳步提高,甚至会让你爱上编程。(个人建议还是别爱上编程了,容易变成单身的技术死宅。当然,小姐姐除外(~ ̄▽ ̄)~)

快捷键

  快捷键是让人爱不释手的基本工具,有了它,你在编程是甚至不需要鼠标,就能随心所欲的操作代码。下面列出一些我常用的快捷键

快捷键功能F2重命名F11全屏Ctrl+C复制当前行/选中内容Ctrl+V黏贴当前行/选中内容Ctrl+F查找Ctrl+H替换Ctrl+Z撤销Ctrl+Y重做Ctrl+D选中当前半高亮内容(多次点击可选中下一个匹配的半高亮内容)Ctrl+N新建文件Ctrl+Shift+N打开新的VS Code编辑器窗口Ctrl+W关闭当前页面Ctrl+Shift+W关闭当前窗口Ctrl+[/]代码向左/右缩进Alt+↓/↑向上/下移动当前行Shift+Alt+↓/↑向上/下复制当前行Ctrl+Enter在当前行下方插入一行Ctrl+Shift+Enter在当前行上方插入一行Shift+Alt+鼠标左键
Ctrl+Shift+↓/↑多行编辑

  这些只是一小部分VS Code的快捷键,仅代表我个人经常使用的快捷键。若想了解更多快捷键,请按下Ctrl+K,Ctrl+R下载官方pdf查看。
  另外,不是所有的快捷键都必须掌握,快捷键只是为了提升我们的编码效率,提升编码体验的,用多少快捷键,用什么快捷键,完全取决于个人喜好。

插件推荐

  上文提到,vscode的插件功能是及其强大的,它可以实现许多提升编程体验的功能。下面是我认为比较舒服的插件。
  安装方法参考上文python插件的安装方法。
  我要是说我懒得配图了会不会挨打QAQ

外观 One Dark Pro

  vscode的外观是由主题插件自定义的,这个插件就可以让你的VS Code外观变得与众不同

Bracket Pair Colorize 2

  这是嵌套括号彩色插件,它使得不同层级的嵌套括号以不同的颜色显示,能轻易地让你分清括号间的层级关系。

Chinese (Simplified) Language Pack for Visual Studio Code

  这个就不用多说了吧,懂得都懂(づ ̄ 3 ̄)づ。

indent-rainbow

  该插件能将不同层级的缩进 (敲一下Tab就有啦) 用彩色标示出来,这对于python这种用缩进确定代码层级关系的语言尤为有用。

实用 Pylance

  这是微软出品的python语言服务器,能增强python的自动补全功能,还有许多我们用不到的高级功能 (笑

Code Runner

  这是一款允许你运行部分代码的插件,选中你想运行的代码之后右键单击,第一个选项 Run Code 就是啦。你也可以通过快捷键Ctrl+Alt+N快速执行。

总结

  本文档看起来像是一片巨细无遗的指导文档,然而实际上却是我自己用来复习和学习的一个笔记。我的技术性文档才刚刚起步,不足之处还请多包含。
  VS Code这款编辑器足够强大,扩展性足够高,这一特性使得她成为了我的唯一编辑器。不论是python、C、C++、HTML/CSS/JS,还是Arduino、markdown、LaTex,我都会用这款编辑器来进行编写。因此,我只需要学习这一款编辑器的用法,就可以处理大部分的编程任务,这无疑大大减少了我的多语言学习成本。甚至本文档都是在VS Code内用markdown编写的。
  另外,对于编程能力的提升,我认为最好的方法就是————实践。无论是什么语言,能够快速提升代码能力的唯一方式就是实践。在实践中,才会发现一系列实际问题,才会四处搜寻资料或者询问他人,才能一步步成长。
  本文档介绍的VS Code使用方法只是冰山一角,许多目前我们暂时用不到、而十分重要的功能我都没有进行介绍。(例如调试相关操作)
  这款强大的开发工具还有更多实用的功能等待你的探索。

联系方式

答疑专用QQ号:
 Day_Dreamer: ( 3578974183 )
个人Blog:
 https://blog.ccandle.top/

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。