Visual Studio Code 使用介绍

今天跟大家分享Visual Studio Code 使用介绍的知识。

1 下载安装

官网下载:https://code.visualstudio.com/

汉化中文(官方下载默认为英文,英文好的小伙伴可直接跳过这步)

点击插件按钮搜索 Chinese, 在弹出的选项中选择第一个中文简体
Visual Studio Code 使用介绍_第1张图片
然后右边会弹出如下图安装界面,接着点击 Install 安装
Visual Studio Code 使用介绍_第2张图片
安装完毕后会有如下提示(主要提醒你安装完中文简体汉化包后一定要重启方可生效)
Visual Studio Code 使用介绍_第3张图片
Vscode界面介绍(主要分为5个区域,分别是活动栏,侧边栏,编辑栏,面板栏,状态栏)
Visual Studio Code 使用介绍_第4张图片
①:活动栏从上到下依次为,打开侧边栏,搜索,使用git,debug,使用插件

②:侧边栏,新建项目文件和文件夹

③:编辑栏,编写代码的区域

④:面板栏,从左到右依次为,问题,输出,调试栏,终端(terminal),最重要的是terminal,用来输入相关命令
在这里插入图片描述
⑤:状态栏,点击 [图片上传失败…(image-bcdf98-1559059441856)].png)[图片上传失败…(image-a50ab7-1559059441856)] 该区域可以调出面板栏

⑥:需要注意的为下图红框所示,分别表示鼠标光标所在位置和tab缩进字符,这里为缩进4个字符
在这里插入图片描述
新建文件和文件夹

新建文件:Ctrl+N新建文件并修改后缀即可(后缀根据所需文件来,比如.html,.css,.js等)

新建文件夹

①:首先根据需要指定一个路径(这里路径以桌面为例),然后新建一个文件夹(这里新建的文件夹为demo1)

②:鼠标点击侧边栏第二个选项,如下图
Visual Studio Code 使用介绍_第5张图片
③:此时会提示你没有可以打开的文件夹,点击Open Folder按钮导入桌面新建的文件夹demo1
Visual Studio Code 使用介绍_第6张图片
④:把文件夹导入后发现刚刚新建文件夹名字是小写的,现在变大写了,这个不影响,不用太在意
在这里插入图片描述
(右边图标从左到右为,新建文件 / 新建文件夹 / 刷新 / 折叠文件)

注:新建文件一定要修改后缀,否则默认都是text文本文件

自动保存设置

File(文件)- Preferences(首选项)- Setting (设置)然后弹出下面界面,选择User(一般会默认选中该选项),接着如下图选择afterdelay选项即可,下面有个数字1000表示1秒,这个可自行设置,表示多少秒以后自动保存
Visual Studio Code 使用介绍_第7张图片
自动格式化代码

File(文件)- Preferences(首选项)- Setting (设置)

User(用户)- Text-Editor(文本编辑)- Formatng(格式化)

然后勾选下图红色框中的选项后重启Vscode即可
Visual Studio Code 使用介绍_第8张图片
Vscode更换主题

File(文件)- Preferences(首选项)- Color-Theme (颜色主题)
Visual Studio Code 使用介绍_第9张图片
然后会出现下图红色框的界面,此时按键盘上的上下键即可实时查看主题颜色,直接回车可选中对应主题
Visual Studio Code 使用介绍_第10张图片
注:可以点击插件直接搜索 theme 下载其它非内置主题

快捷键(只列出了很小一部分常用快捷键)

Ctrl + / (单行注释)

Shift + Alt + A (多行注释)

若要取消单行或多行注释在按一次该快捷键即可

Ctrl + Shift + Enter (上方插入一行,鼠标光标在当前行的任意位置都可以直接换行到上一行)

Ctrl + Enter (下方插入一行,鼠标光标在当前行的任意位置都可以直接换行到下一行)

Alt + Shift + F (格式化代码,不需要全选中代码,直接格式化即可)

Ctrl + Shift + F (查找文件)

点击设置选择 keyboard shortcuts,右边会弹出所有快捷键目录
Visual Studio Code 使用介绍_第11张图片

2 插件安装

方法一:
按F1或Ctrl+Shift+p,输入extensions,点击第一个就可以
Visual Studio Code 使用介绍_第12张图片
方法二:
ctrl + P 然后输入 >ext install
Visual Studio Code 使用介绍_第13张图片
方法三:
点击图中位置
Visual Studio Code 使用介绍_第14张图片

3 插件合集

插件官网:https://marketplace.visualstudio.com/

每一个插件名都超链接到官网,注意查看

a.配置类插件:
1.Settings Sync
最好用的插件,没有之一,一台电脑配置好之后,其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了,使用GitHub Gist同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。
Visual Studio Code 使用介绍_第15张图片
2.Debugger for Chrome
从VS Code调试在Google Chrome中运行的JavaScript代码。
用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。
Visual Studio Code 使用介绍_第16张图片
3.beautify
格式化代码工具
美化javascript,JSON,CSS,Sass,和HTML在Visual Studio代码。
Visual Studio Code 使用介绍_第17张图片
4.Atuo Rename Tag
修改 html 标签,自动帮你完成头部和尾部闭合标签的同步修改
Visual Studio Code 使用介绍_第18张图片
5.中文(简体)语言包
Chinese (Simplified) Language Pack for Visual Studio Code
将界面转换为中文,对英语不好的人,非常友好。例如我。。。
Visual Studio Code 使用介绍_第19张图片
6.Code Spell Checker
代码拼写检查器
一个与camelCase代码配合良好的基本拼写检查程序。
此拼写检查程序的目标是帮助捕获常见的拼写错误,同时保持误报数量较低。
Visual Studio Code 使用介绍_第20张图片
7.vscode-icons
显示Visual Studio代码的图标,目前该插件已被vscode内部支持:“文件” -> “首选项” -> “文件图标主题”
Visual Studio Code 使用介绍_第21张图片
8.guides
显示代码对齐辅助线,很好用
Visual Studio Code 使用介绍_第22张图片
9.Rainbow Brackets
为圆括号,方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员,当然还有JavaScript和其他程序员特别有用。
效果如下:
Visual Studio Code 使用介绍_第23张图片
10.Bracket Pair Colorizer
用于着色匹配括号
Visual Studio Code 使用介绍_第24张图片
11.Indent-Rainbow
用四种不同颜色交替着色文本前面的缩进
Visual Studio Code 使用介绍_第25张图片
12.filesize
在状态栏中显示当前文件大小,点击后还可以看到详细创建、修改时间
Visual Studio Code 使用介绍_第26张图片
13.Import Cost
对引入的计算大小
Visual Studio Code 使用介绍_第27张图片
14.Path Intellisense
可自动填充文件名
Visual Studio Code 使用介绍_第28张图片
15.WakaTime
从您的编程活动自动生成的度量标准,见解和时间跟踪
Visual Studio Code 使用介绍_第29张图片
16.GitLens
git日志查看插件
GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索,历史记录和和查看代码作者身份,还能通过强大的比较命令获得有价值的见解等等
Visual Studio Code 使用介绍_第30张图片
17.REST Client
REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应
Visual Studio Code 使用介绍_第31张图片
18.Npm Intellisense
用于在 import 语句中自动填充 npm 模块
require 时的包提示(最新版的vscode已经集成此功能)
Visual Studio Code 使用介绍_第32张图片
19.Azure Storage
VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器,文件共享,表和队列。按照本教程从VS Code部署Web应用程序到Azure存储
Visual Studio Code 使用介绍_第33张图片
20.Project Manager
它可以帮助您轻松访问项目,无论它们位于何处。不要再错过那些重要的项目了。您可以定义自己的收藏项目,或选择自动检测VSCode项目,Git,Mercurial和SVN存储库或任何文件夹。
从版本8开始,您就有了专门的项目活动栏!
以下是Project Manager提供的一些功能:
将任何项目保存为收藏夹
自动检测VSCode,GIT中,水银或SVN存放区
在相同或新窗口中打开项目
识别已删除/重命名的项目
一个状态栏标识当前项目
专门的活动栏
Visual Studio Code 使用介绍_第34张图片
21.Language Support for Java™ by Red Hatredhat.java
这个插件,这个下载次数,安装就对了
Visual Studio Code 使用介绍_第35张图片
22.Todo Tree
此扩展可以快速搜索(使用ripgrep)您的工作区以获取TODO和FIXME等注释标记,并在资源管理器窗格的树视图中显示它们。单击树中的TODO将打开文件并将光标放在包含TODO的行上。
找到的TODO也可以在打开的文件中突出显示。
Visual Studio Code 使用介绍_第36张图片
b.VS code 主题集合
1.Night Owl
一个非常适合夜猫子的 VS Code 主题。像是为喜欢深夜编码的人精心设计的。
Visual Studio Code 使用介绍_第37张图片
2.Atom One Dark Theme
一个基于Atom的黑暗主题
Visual Studio Code 使用介绍_第38张图片
3.Dracula Official
官方吸血鬼主题,博主用的就是这款,很漂亮
Visual Studio Code 使用介绍_第39张图片
4.One Dark Pro
Atom标志性的One Dark主题,也是VS Code下载次数最多的主题之一!
Visual Studio Code 使用介绍_第40张图片
5.Bimbo
简约而现代的神奇海洋主题
Visual Studio Code 使用介绍_第41张图片
c.代码提示提示类
1.HTML Snippets
完整的HTML代码提示,包括HTML5
Visual Studio Code 使用介绍_第42张图片
2.HTML CSS Support
在 html 标签上写class 智能提示css样式
Visual Studio Code 使用介绍_第43张图片
3.jQuery Code Snippets
jQuery代码提示
超过130个用于JavaScript代码的jQuery代码片段。
只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。
Visual Studio Code 使用介绍_第44张图片
4.HTMLHint
html代码检测,支持html5
Visual Studio Code 使用介绍_第45张图片
d.语言相关
1.C#
适用于.NET Core的轻量级开发工具。
伟大的C#编辑支持,包括语法突出显示,智能感知,转到定义,查找所有引用等。
调试支持.NET Core(CoreCLR)。注意:不支持单声道调试。桌面CLR调试支持有限。
支持Windows,macOS和Linux上的project.json和csproj项目。

2.CodeMetrics
计算TypeScript / JavaScript文件的复杂性。

3.VUE插件
vetur 语法高亮、智能感知、Emmet、vue提示等
Visual Studio Code 使用介绍_第46张图片
VueHelper snippet代码片段
ESLint 将ESLint JavaScript集成到VS代码中。代码规范提示
Visual Studio Code 使用介绍_第47张图片
prettier 代码规范性插件

4. Java Extension Pack
它是一组流行的扩展,可以帮助在Visual Studio Code中编写,测试和调试Java应用程序。查看VS Code中的Java以开始使用。
Visual Studio Code 使用介绍_第48张图片
关于Visual Studio Code 使用介绍,你学会了多少?欢迎在留言区评论!

你可能感兴趣的:(DevTools)