室内设计软件推荐,厦门seo关键词优化代运营,html好看的首页,软件下载网站开发目录
编辑
介绍
我应该切换到 VS Code 吗#xff1f;为什么#xff1f;
入门
Explorer
搜索
源代码控制
调试器
扩展
终点站
命令面板
主题
定制化
不错的配置选项
最适合编码的字体
工作空间
编辑
智能感知
代码格式化
错误和警告
键盘快捷键
键位图…
目录
编辑
介绍
我应该切换到 VS Code 吗为什么
入门
Explorer
搜索
源代码控制
调试器
扩展
终点站
命令面板
主题
定制化
不错的配置选项
最适合编码的字体
工作空间
编辑
智能感知
代码格式化
错误和警告
键盘快捷键
键位图
代码片段
扩展展示
VS Code CLI 命令
解决CPU使用率高的问题 介绍
在过去的几年里我使用了大量的编辑器和 IDE。我记得 TextMate、TextWrangler、Espresso、BBEdit、XCode、Coda、Brackets、Sublime Text、Atom、vim、PHPStorm。IDE 和编辑器之间的区别主要在于功能集和复杂性。
与 IDE 相比我更喜欢编辑器因为它速度更快而且干扰更少。
在过去 12 个月中我一直在使用 VS CodeMicrosoft 的开源编辑器它很快就成为我最喜欢的编辑器。
我应该切换到 VS Code 吗为什么
如果您正在寻找是否使用它的建议让我说是您应该从您现在使用的任何其他编辑器切换到它。
该编辑器建立在 Microsoft 数十年的编辑器经验之上。
编辑器的代码完全开源使用无需付费。
它速度很快是我在 Sublime Text 之后使用过的最快的编辑器。
它赢得了社区的热情有数千个扩展有些是官方的有些是社区制作的并且它赢得了调查。
微软每个月都会发布一个更新。频繁的更新促进创新微软正在倾听用户的意见同时尽可能保持平台稳定我应该说在几乎每天使用 VS Code 的一年里我从未遇到过任何问题。
入门
VS Code 的主页是Visual Studio Code - Code Editing. Redefined。
转到该网站下载编辑器的最新稳定版本。 安装过程取决于平台您应该习惯它。
当您第一次启动编辑器时您将看到欢迎屏幕 左侧有一个工具栏有 5 个图标。这可以访问
文件浏览器搜索源代码控制调试器扩展
Explorer
让我们从explorer开始探索 按侧栏中的“打开文件夹”按钮或Open folder...欢迎页面中的链接。两者都会触发文件选择器视图。
选择一个包含源代码甚至文本文件的文件夹然后将其打开。
VS Code 将在您的视图中显示该文件夹内容 右侧的空白视图显示了一些用于执行一些快速操作的命令及其键盘快捷键。
如果您选择左侧的文件该文件将在主面板上打开 如果您开始编辑它请注意选项卡中的文件名旁边会出现一个点侧边栏中也会出现一个点 按CMDP将显示一个快速文件选择器可轻松移动大型项目中的文件 您可以使用快捷方式隐藏承载文件的侧边栏CMDB。 注意我使用的是 Mac 键盘快捷键。大多数时候在 Windows 和 Linux 上您只需将 CMT 更改为 CTRL 即可但并非总是如此。打印您的键盘快捷键参考。 搜索
工具栏中的第二个图标是“搜索”。点击后出现搜索界面 您可以单击图标使搜索区分大小写、匹配整个单词而不是子字符串以及对搜索字符串使用正则表达式。
要执行搜索请按enter。
单击左侧的 ▷ 符号启用搜索和替换工具。
单击 3 个点会显示一个面板可让您仅包含某些特定类型的文件并排除其他文件 源代码控制
单击工具栏中的第三个图标即可启用“源代码管理”选项卡。 VS Code 提供开箱即用的 Git 支持。在这种情况下我们打开的文件夹没有初始化源代码管理。
单击顶部第一个带有 Git 徽标的图标我们可以初始化 Git 存储库 每个文件旁边U的 表示自上次提交以来它已更新因为我们从未进行过提交所以所有文件都已更新。
通过编写文本消息并按Cmd-Enter或单击顶部的 ✔︎ 图标来创建第一个提交。 我通常将其设置为在提交更改时自动暂存更改。
单击 3 点图标后会提供许多与 Git 交互的选项 调试器
工具栏中的第四个图标打开 JavaScript 调试器。这值得单独写一篇文章。同时查看官方文档。
扩展
第五个图标将我们带入扩展。 扩展是 VS Code 的一项杀手级功能。
它们可以提供如此多的价值您最终肯定会使用大量它们。
我安装了很多扩展。
要记住的一件事是您安装的每个扩展都会或多或少影响编辑器的性能。
您可以禁用您安装的扩展并仅在需要时启用它。
您还可以禁用特定工作区的扩展我们稍后将讨论工作工作区。例如您不想在 Go 项目中启用 JavaScript 扩展。
有一个推荐的扩展列表其中包括所有最流行的工具。 由于我为博客编辑了大量 Markdown 文件因此 VS Code 建议我使用该markdownlint扩展它为 Markdown 文件提供 linting 和语法检查。
作为示例我们来安装它。
首先我检查观看次数。1.2M这么多啊评论也很积极4.5/5。单击扩展名将在右侧打开详细信息。 按绿色的安装按钮开始安装过程这很简单。它会为您完成所有操作您只需单击“重新加载”按钮即可激活它这基本上会重新启动编辑器窗口。
完毕让我们通过创建一个带有错误的 Markdown 文件来测试它例如alt图像上缺少属性。它成功地告诉我们 下面我将介绍一些您不想错过的流行扩展以及我最常使用的扩展。
终点站
VS Code 有一个集成终端。
您可以从菜单激活它View ➤ Integrated Terminal或使用“CMD”它将使用您的默认 shell 打开。 这非常方便因为在现代 Web 开发中您几乎总是有一些npm进程yarn在后台运行。
您可以创建多个终端选项卡并将它们一个挨着地显示也可以将它们堆叠到右侧而不是窗口底部 命令面板
命令面板是一个非常强大的工具。View ➤ Command Palette您可以通过单击或使用来启用它CMDSHIFTP
顶部将出现一个模式窗口为您提供各种选项具体取决于您安装的插件以及您上次使用的命令。
我执行的常见操作有
扩展安装扩展PreferencesColor Theme改变颜色主题我有时从晚上换到白天Format Document自动格式化代码Run Code由 Code Runner 提供执行 JavaScript 中突出显示的行
您可以通过开始输入来激活其中任何一个自动完成功能将显示您想要的一个。
还记得您之前通过键入CMDP来查看文件列表的情况吗这是命令面板特定功能的快捷方式。还有其他的
Ctrl-Shift-Tab显示活动文件Ctrl-G打开命令选项板让您输入要转到的行号CMDSHIFTO显示当前文件中找到的符号列表
什么符号取决于文件类型。在 JavaScript 中这些可能是类或函数。在 Markdown 中章节标题。
主题
CMD-k您可以通过单击CMD-t或调用“首选项颜色主题”命令来切换使用的颜色主题。
这将显示已安装的主题列表 您可以单击其中一个或者使用键盘移动VS Code 会向您显示预览。点击进入应用主题 主题只是扩展。您可以通过转到扩展管理器来安装新主题。
对于可发现性来说最好的办法可能是使用市场网站。
我最喜欢的主题是Ayu它为白天、晚上、早上/晚上和下午的任何时间提供了很棒的风格。
定制化
主题只是您可以进行的一种自定义。
分配给文件的侧边栏图标也是良好用户体验的重要组成部分。
您可以通过转至 来更改这些内容Preferences ➤ File Icon Theme。Ayu 带有自己的图标主题与主题颜色完美匹配 到目前为止我们所做的所有自定义主题和图标主题都保存到用户首选项中。
前往Preferences ➤ Settings也可通过 访问CMD-,查看它们 该视图在左侧显示默认设置以方便参考在右侧显示覆盖的设置。workbench.colorTheme您可以在和中看到我们设置的主题名称和图标主题workbench.iconTheme。
我使用 进行放大CMD-并且此设置也保存到window.zoomLevel因此下次 VS Code 启动时它会记住我的缩放选择。
您可以决定在用户设置中全局应用某些设置或在 工作区设置中应用相对于工作区的某些设置。
大多数情况下这些设置是由扩展或 VS Code 本身自动添加的但在某些情况下您将直接在此处编辑它们。
不错的配置选项
VS Code 有很多选项。一切都是高度可配置的有时很难理解这一切。
您可以使用命令面板打开配置 JSON 文件然后选择Open Settings (JSON)。
我在代码中设置了一些不错的配置选项
选项描述editor.minimap.enabled: false删除小地图显示在编辑器右侧explorer.confirmDelete: false当我想删除文件时不要再要求我确认我有源代码控制explorer.confirmDragAndDrop: false禁用拖放确认editor.formatOnSave: true保存时自动格式化代码editor.formatOnPaste: true当我将代码粘贴到代码中时自动格式化代码javascript.format.enable: true启用 JavaScript 代码格式设置files.trimTrailingWhitespace: true修剪文件中的空格editor.multiCursorModifier: alt单击 Alt 键并用鼠标单击时我可以选择多行editor.detectIndentation: true适应文件缩进在编辑其他人代码时很有用editor.quickSuggestionsDelay: 0立即显示代码建议而不是几秒钟后
最适合编码的字体
我喜欢《费拉密码》。它是免费的并且有一些非常好的编程连字可以将常见的结构如!和 转换为更好的符号 通过安装字体并将其添加到您的配置中来启用它
span stylecolor:#e1e4e8span stylebackground-color:#24292ecodespan stylecolor:#9ecbffeditor.fontFamily/spanspan stylecolor:#e1e4e8: /spanspan stylecolor:#9ecbffFira Code/spanspan stylecolor:#e1e4e8,/span
span stylecolor:#9ecbffeditor.fontLigatures/spanspan stylecolor:#e1e4e8: /spanspan stylecolor:#79b8fftrue/spanspan stylecolor:#e1e4e8/span/code/span/span
工作空间
所有用户设置都可以在工作区设置中覆盖。他们优先。例如当您使用的项目的 linting 规则与您使用的所有其他项目不同并且您不想仅为其编辑您喜欢的设置时它们非常有用。
您可以通过单击菜单从现有项目创建工作区File ➤ Save Workspace as...。
当前打开的文件夹将被启用为工作区主文件夹。
下次打开 VS Code 或切换项目时您将打开一个工作区而不是打开文件夹这将自动打开包含代码的文件夹并且它将记住您针对该工作区设置的所有设置。
除了具有工作区级别设置之外您还可以禁用特定工作区的扩展。
您可以只使用文件夹直到您有特定原因需要工作区为止。
一个很好的理由是能够拥有多个单独的根文件夹。您可以使用File ➤ Add Folder to Workspace添加一个新的根文件夹该文件夹可以位于文件系统中的任何位置但将与您拥有的其他现有文件夹一起显示。
编辑
智能感知
当您使用受支持的语言之一JavaScript、JSON、HTML、CSS、Less、Sass、C# 和TypeScript进行编辑时VS Code 具有 IntelliSense这是一种在您键入函数和参数时提示自动完成功能和参数的技术。
代码格式化
命令选项板上提供了两个方便的命令Format Document和来自动设置代码格式。Format SelectionVS Code 默认支持 HTML、JavaScript、TypeScript 和 JSON 的自动格式化。
错误和警告
当您打开文件时您将在右侧看到一个带有一些颜色的栏。这些颜色表明代码中存在一些问题。例如这是我现在看到的 这些都是警告或错误。您可以尝试在代码中找到它们您会看到带有红色下划线的部分或者您也可以按CMD-Shift-M或选择View ➤ Problems 键盘快捷键
到目前为止我已经向您展示了很多键盘快捷键。
记住它们开始变得很复杂但它们是一个很好的生产力辅助工具。我建议打印官方快捷方式备忘单适用于Mac、Linux和Windows。
键位图
如果您习惯了其他编辑器的键盘快捷键也许是因为您长期使用一个编辑器则可以使用键盘映射。
VS Code 团队为最流行的编辑器提供开箱即用的键盘映射vim、Sublime Text、Atom、IntelliJ、Eclipse 等。它们可以作为插件使用。通过打开Preferences ➤ Keymaps Extensions菜单。
代码片段
片段非常酷。
对于您可能使用的每种开发语言都有一些扩展可以提供现成的代码片段供您使用。
对于 JavaScript/React一种流行的方法是VS Code ES7 React/Redux/React-Native/JS 片段
您只需输入rfe按 TAB 键编辑器中就会出现以下内容
span stylecolor:#e1e4e8span stylebackground-color:#24292ecodespan stylecolor:#f97583import/spanspan stylecolor:#e1e4e8 React /spanspan stylecolor:#f97583from/spanspan stylecolor:#9ecbff react/spanspan stylecolor:#f97583const/spanspan stylecolor:#b392f0 $1/spanspan stylecolor:#f97583 /spanspan stylecolor:#ffab70 props/spanspan stylecolor:#f97583 /spanspan stylecolor:#e1e4e8 {/span
span stylecolor:#f97583 return/spanspan stylecolor:#e1e4e8 /spanspan stylecolor:#85e89ddiv/spanspan stylecolor:#e1e4e8$0//spanspan stylecolor:#85e89ddiv/spanspan stylecolor:#e1e4e8/span
span stylecolor:#e1e4e8}/spanspan stylecolor:#f97583export/spanspan stylecolor:#f97583 default/spanspan stylecolor:#e1e4e8 $1/span/code/span/span
这些快捷方式有很多并且可以节省大量时间。不仅来自打字还来自查找正确的语法。
您还可以定义自己的片段。单击Preferences ➤ User Snippets并按照说明创建您自己的片段文件。
扩展展示
GitLens可视化谁对代码行进行了最后一次更改以及何时发生Git History可视化和搜索 Git 历史记录CSS Peek允许您通过检查 HTML 元素的类来查看和编辑 CSS 定义。非常便利。Code Runner允许您运行在编辑器中选择的代码片段等等。支持多种语言。Chrome 调试器允许您使用 VS Code 调试器调试在浏览器中运行的 JavaScript 代码。括号对着色器可以方便地可视化代码中的括号结尾。Indent-Rainbow为代码的缩进级别着色。更漂亮检查我的更漂亮指南ESLint查看我的ESLint 指南IntelliSense for CSS改进了基于工作区定义的 CSS 自动完成功能npm从命令面板启用npm实用程序功能Auto Close Tag自动关闭 HTML/JSX/* 标签自动重命名标签当您更改开始标签时会自动重命名结束标签反之亦然
VS Code CLI 命令
打开命令选项板并搜索命令install code command in PATH。
按 Enter 键该code命令将在命令行中全局可用。
这对于启动编辑器并打开一个包含当前文件夹内容的新窗口非常有用扩展名为code ..
code -n将创建一个新窗口。
一个不总是为人所知的有用的事情是 VS Code 可以快速显示两个文件之间的差异扩展名为code --diff file1.js file2.js.
解决CPU使用率高的问题
我遇到了 CPU 使用率高和风扇旋转的问题项目的node_modules. 我添加了这个配置一切看起来又正常了 files.exclude: {/.git: true,/.DS_Store: true,/node_modules: true,/node_modules/: true},search.exclude: {/node_modules: true},files.watcherExclude: {/node_modules/: true},
