vscode使用教程

人气:470 ℃/2023-01-30 11:43:27

vscode使用教程是什么呢?不知道的小伙伴来看看小编今天的分享吧!

一、什么是vscode?

VSCode是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

二、基本使用

1、直接拖入项目文件夹进入软件

方式一: 拖入工作区(这样的话,会保留当前以及打开的项目文件夹)

方式二: 拖入工作区右边的窗口,这样的话会让拖入的窗口覆盖掉原本以及打开的窗口

2、在vscode里面创建项目文件夹

3、格式化代码

在代码里面右键菜单,会弹出相应的格式化等功能选项,也有定义引用查找等菜单。

4、在浏览器中打开网页

1、以file文件协议形式打开文件

安装插件:Open HTML in Default Browser

特点:

用默认浏览器打开 HTML 文件

在资源管理器中,HTML 文件右键显示 在浏览器中打开 菜单

在编辑器中,HTML 文件右键显示

在浏览器中打开 菜单 可以同时打开多个页面

在工作区项目上右键菜单就能看到在资源管理器中打开文件的选项

2、以服务器形式打开文件

方式一:

安装live server 插件,点击重新加载或者重启vscode,然后鼠标右键就可以在服务器上打开,

这种模式打开会自动刷新页面。

方式二:

1.按下快捷键:Ctrl+` 打开命令行终端,执行cnpm install live-server -g

2.安装好后每次要运行只需要打开终端后执行一下live-server即可

3.使用live-server是把整个网站打开到服务器上的。不管你当前定位到哪一个目录,他打开的都是默认的首页文件,如:index.html

4.如果你根目录下全是文件夹,或者没有index.html等默认首页文件,那么服务器就会显示一些文件夹让你选择。

5.如果要关闭live-server那么只需要在控制台执行以下ctrl+c,然后输入y确认下即可关闭。

6.Live-server可以在任意项目根目录下,打开终端窗口,然后输入live-server即可让当前项目在服务器上打开执行

7.在以服务器打开的模式下,我们更改了文件内容后只要保存下,浏览器就会自动的刷新,而不需要我们显式的在浏览器里面刷新。

方式三:

也可以安装http server插件,安装完成后按下f1,然后输入http会看到下面两个选项,选择with current file那个能够创建一个服务器运行当前文件。另外一个会找当前目录下的index.html,然后打开它。

选择一个后,会再让你选择在浏览器里面打开还是vscode里面打开。

其他:

也可以全局安装此模块【cnpm install http-server -g 】

安装到全局后,在终端里面输入hs就可以使用。

以上就是小编今天的分享了,希望可以帮助到大家。

vscode使用教程?

太全面了!Python 编程的最好搭档—VSCode 实用指南

刚学Python的同学可能会觉得每次写python的时候都得打开CMD有点烦躁,直接上手Pycharm的同学可能会觉得这软件太笨重了,晦涩难用。那么有没有省去打开CMD的步骤,又能弥补Pycharm笨重的特点的软件呢?

当然有,答案是VSCode.

诞生于2015年的VSCode编辑器,现在可以说是目前最强的编辑器之一,在微软的背书下,比各位历史悠久的老大哥成长快得多,不到5年的时间里便坐到了市场占有率第一的位置。这么短的时间里,它是怎么成功的?答案是:简单,可扩展性强

编辑器,简单很重要。还记得我多年前第一次用Vim编辑器时搜索的第一个问题:怎么退出Vim?一个工具的学习曲线会直接影响该工具的受众数量,对于编辑器而言尤其如此。任何使用起来复杂的东西最终都会被更容易使用的东西替代掉,不过Vim有其在运维方面的独特优势,所以它暂时是不可替代的。

Vim的不可替代是在服务器层面,对于我们在桌面端编程而言,越简单好用的编辑器越好,不要搞骚操作,骚操作搞出事情了,最终烦的是自己。这就是为什么VSCode越来越火爆,它不仅简单易用,还能覆盖几乎所有语言的编写,如果我有一个小项目需要涉及到前后端所有代码,用VSCode一个编辑器就能解决了,而不是前端切Webstorm,后端切Pycharm.

话不多说,下面就来试试使用 VSCode 吧。

1.安装

毕竟是微软大爷的产品,安装VSCode你几乎不会遇到问题,打开:https://code.visualstudio.com/

选择适合自己系统的版本下载安装,一路默认即可:

2.使用

如果你看不惯英文版的编辑器,下面教你怎么装中文插件:

2.1 中文插件

1. 点击View - Command Palette(或输入 Ctrl shift P) 进入命令面板.

2. 输入 configure language, 选择Configure Display Language(配置显示语言)。

3. 检查有没有zh-cn的选项,如果有,直接选择zh-cn替换。然后按照提示重启vscode就能看到界面变回中文了。

如果没有zh-cn的选项,则选择install additional languages(添加其他语言选项),左边会弹出扩展窗口,扩展窗口找到中文简体,点击 install 安装,重复第 1, 2 步骤选择中文即可。

2.2 使用终端(Terminal)

这是用VSCode编写Python最核心的地方,你不用打开丑丑的CMD,直接在VSCode中就可以运行Python。

点击 【查看—终端】 或直接快捷键 【Ctrl `】 打开终端,会在下方产生一个CMD控制台:

在这里你做的最新修改都可以直接 python xx.py 运行:

不过要注意一下当前的文件夹是否和Python脚本文件处于同一个目录,如果不在同一个目录则要cd进去。

2.3 一键运行

很多同学都想一键运行Python,而非以命令的形式运行,这时候就需要Python扩展了,打开扩展页,输入Python,选择第一个进行安装 install 即可:

重新加载VSCode生效,在这后编辑完代码按F5即可运行(如果你不需要输入参数的话),初次运行可能会让你选环境,选择Python即可。

默认按F5后进入DEBUG模式,需要再按一次F5程序才会运行,如果要按F5马上运行需要将launch.json文件的 "stopOnEntry": true,改为 "stopOnEntry": false。launch.json文件在设置中可以找到,如下图所示:

3.其他扩展

3.1 语法提示,配置flake8

写代码没有语法提示,其实是很难受的一件事情,IDE直接帮你做了这件事,不过VSCode需要你稍微配置一下:

1.打开终端,输入 pip install flake8 安装flake8,我已经装过了,你的提示应该跟我的不一样:

2. 在settings.json文件中输入"python.linting.flake8Enabled": true

3.2 自动格式化代码

Yapf是谷歌开源的一个用于格式化Python代码的工具,可以一键美化代码。支持两种规范:PEP8和Google Style,下面的步骤和3.1类似的就不再补图啦:

1. 打开终端

2. 输入 "pip install yapf" 安装yapf

3. 在 settings.json 文件中输入"python.formatting.provider": "yapf"

4.用一个看看, 按下快捷键Alt Shift F即可自动格式化代码。

3.3 文件及文件夹图标

默认的VSCode图标没有那么详细,只有几个重要文件类型的图标提示,可以安装vscode-icons解决,Mac的有vscode-icons-mac版本。如图所示:

之后的文件显示就详细多了:

3.4 生成注释格式

这个是我强烈推荐的插件,搜索docstring,目前排在第四位,由Nils Werner开发的autoDocstring,优秀的代表:

之后,你只需要在函数名后面输入三个双引号然后回车,即可生成docstring注释:

按Tab可以直接切换需要输入的位置,而不用鼠标去点击,加快了注释效率。不过,我有点不喜欢它comment出现的位置直接在三个双引号的后面,有点不太雅观,可能这就是东西方美感的差异?不过即便如此,它还是一个非常方便的插件。

如果你喜欢今天的Python 教程

,有任何问题都可以在下方留言!

推荐

首页/电脑版/网名
© 2025 NiBaKu.Com All Rights Reserved.