搜索
首页web前端html教程VS Code 指南_html/css_WEB-ITnose

Visual Studio 终于把触角伸到了全平台,在加入了插件功能之后,VSC 事实上已经对各种老牌新生编辑器造成了强大的压力,为了紧跟时代脚步,还是要熟悉和了解一下 VSC 的。

这里基本上是官方教程的总结和翻译。

基础知识

归根到底 VSC 是一个代码编辑器,所以和其他的代码编辑器一样,基本的该有的甚至不该有的功能,都有。下面会简要介绍一下

文件、文件夹和项目

随意打开一个文件或者文件夹,就可以进行编辑,如果文件夹里包含 package.json , project.json , tsconfig.json 或者其他 ASP.NET 5 的 sln 文件,VSC 可以自动读取项目结构并且高亮显示出来

基础视图

Editor, Side Bar, Status Bar 和 View Bar 这里基本的标配都有

Tip: 可以用 command+B 来切换显示侧边栏

多栏编辑

只需要记住一些快捷键即可

  • command+\ 分成多栏
  • command+1/2/3 通过数字键选择当前激活的文件
  • 可以自由调整和重新排序

文件浏览器

文件浏览器中可以进行基本的文件操作,对着文件点击右键即可,甚至还可以直接在 terminal 中打开!

Tip: command+p 可以通过文件名快速查找并打开文件

默认来说,VSC 会排除显示一些文件夹(例如 .git ),当然也可以在 user setting 中配置 files.exclude 来自定义排除规则(是支持通配符的如 \*.meta )

已打开文件

已打开文件会在边栏的上方显示,如果需要自定义,可以设置下面一些属性:

  • explorer.workingFiles.maxVisible
  • explorer.workingFiles.dynamicHeight

跨文件搜索

快捷键 shift+command+f,支持全文搜索,中文英文都可以!简直爆炸!而且还支持正则表达式!

如果需要更高级的搜索,可以使用 shift+command+j

下面列出基本的正则表示:

  • * to match one or more characters in a path segment
  • ? to match on one character in a path segment
  • ** to match any number of path segments ,including none
  • {} to group conditions (e.g. {**/*.html,**/*.txt} matches all html and txt files)
  • [] to declare a range of characters to match (e.g., example.[0-9] to match on example.0, example.1, …

注意可以自定义搜索范围,在设置中设定

  • files.exclude
  • search.exclude

命令板

按 F1 就可以调出 Command Palette,这里可以快速输入各种命令,一些基本技巧

  • command+p: 通过文件名找文件
  • control+tab: 可以循环切换之前打开的文件
  • shift+command+o: 可以导航到文件中的指定符号
  • control+g: 导航到指定行

在 Command Palette 中输入 ? 可以显示当前可用的操作

文件编码支持

在 files.encoding 设置中设置具体的编码,可以在 右下角的状态栏中看到。点击状态栏中的编码可以用指定编码打开或者保存文件(还需要选择具体的编码格式)

编辑功能

理论上来说,基本上该有的功能都有,这里只列出一些超赞的功能

括号匹配

括号会自动高亮匹配,可以用 shift+command+] 来跳到匹配的括号位置

多行选择

利用 alt+click 来激活多行选择,每个光标都是独立的,另一个比较方便添加光标的方式是 option+command+↓ 和 option+command+↑ ,这会在正下方或上方添加光标

command+D 选择当前单词,或者是当前单词下一次出现的位置, command+K command+D 会选择单词最后一次出现的位置

其他一些添加光标的方式是

  • shift+command+l : 在单词下一次出现处添加光标
  • command+f2 : 在下一个单词前添加光标

缩进/扩展选择

选择缩进/扩展,快捷键 control+shift+command+← / control+shift+command+→

智能提示

对于 JavaScript, JSON, HTML, CSS, Less, Sass, C#, TypeScript 都有智能提示,也可以用 control+space 手动激活,用 . , tab , Enter 来选择

默认会在输入的时候进行智能提示,即所谓 24x7 IntelliSense,可以在 editor.quickSuggestions 和 editor.suggestOnTriggerCharacters 中进行设置

参数提示

在 JavaScript, TypeScript 和 C# 中,会自动提示函数的参数,可以用方向键进行导航

代码片段

可以在 User Snippets ( File | Preferences ) 中设定自己的 snippet

跳转到定义

如果语言支持的话,可以用 F12 来跳转到定义。如果按着 ctrl 并把指针放到一个符号上,会有一个简单的预览框。如果需要跳转到定义处可以使用 ctrl+click 。如果需要在另外一侧的窗口打开定义,使用 ctrol+alt+click

扩展

支持扩展是使编辑器更加强大的方法,这里简要介绍一些目前我觉得比较有用的扩展

安装

安装方法非常简单,用 F1 打开 命令行,然后输入 ext inst 来进行操作

MarketPlace

  • Markdown Theme Kit
  • Markdown 预览 command+k v
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

< datalist>的目的是什么。 元素?< datalist>的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

> gt;的目的是什么 元素?> gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

我如何使用html5< time> 元素以语义表示日期和时间?我如何使用html5< time> 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

< meter>的目的是什么。 元素?< meter>的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!