热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

我的VSCode设置,高效编码!

代码编辑器很多,有些是免费的,有些是付费的。其中最喜欢的代码编辑器是VisualStudioCode。它是免费的,并具有强大的功能

代码编辑器很多,有些是免费的,有些是付费的。其中最喜欢的代码编辑器是 Visual Studio Code。它是免费的,并具有强大的功能,我陆续抛弃了Atom、Sublime Text以及也很强大的WebStorm。

今天,我将分享我最喜欢的代码编辑器设置,用于我的 Web 开发。我将从代码编辑器的外观开始。毕竟外观颜值很重要。

???? 主题

我最常用的 VS Code 主题是Snazzy Operator,目前正在使用。

此主题基于 hyper-snazzy 并针对与 Operator Mono 字体一起使用进行了优化。我喜欢 ???? 这个主题。

⭐ 我之前使用过的其他一些主题:

  • Oceanic Next - 我使用了 Oceanic Next (dimmed bg)

  • emedy - 我使用了 Remedy Dark (straight)

 字体

对我的代码编辑器来说,另一个重要的事情是,我用于代码编辑器的字体是 JetBrains Mono。这是带有连字支持的免费字体。

连字是一种新的字体格式&#xff0c;支持符号装饰&#xff0c;而不是&#61; >< &#61;

在使用 JetBrains Mono 之前&#xff0c;我使用了Operator Mono。这也是一个不错的字体。

⭐ 我以前使用过的其他一些字体&#xff1a;

  • Operator Mono - 支持连字。

  • Fira Code - 免费并支持连字。

  • Dank Mono - 付费并支持连字。

???????????? 您要使用我的设置&#xff0c;使用我的 VS Code 字体吗&#xff1f;在 VS Code 中&#xff0c;按 Ctrl &#43; P&#xff0c;输入 settings.json 并打开该文件。现在&#xff0c;用我的给定值替换下面的属性值。

{"workbench.colorTheme": "Snazzy Operator","editor.fontFamily": "&#39;JetBrains Mono&#39;, Consolas, &#39;Courier New&#39;, monospace","editor.fontLigatures": true,"editor.fontSize": 14,"editor.lineHeight": 22,"editor.letterSpacing": 0.5,"editor.fontWeight": "400","editor.cursorStyle": "line","editor.cursorWidth": 5,"editor.cursorBlinking": "solid"
}

???? 图标

文件图标增强了 VS Code 的外观&#xff0c;主要是它可以帮助我们通过给定的图标区分不同的文件和文件夹。对于我的 VS Code&#xff0c;我使用两个文件图标&#xff1a;

  • Material Icon Theme - VS Code 最受欢迎的图标主题之一。

  • Material Theme Icons - 目前正在使用。

我使用的扩展

Auto Rename Tag

自动重命名配对的 HTML / XML 标签&#xff0c;也可以在 JSX 中使用。

在 settings.json 文件中的 auto-rename-tag.activationOnLanguage 中添加一项以设置扩展名将被激活的语言。默认情况下&#xff0c;它是**[“ *”]**&#xff0c;将为所有语言激活。

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "Javascript"]

Bracket Pair Colorizer 2

此扩展名允许用颜色标识匹配的括号&#xff0c;用户可以定义要匹配的符号&#xff0c;以及要使用的颜色。

Color Highlight

此扩展程序设置在文档中找到的 css / web 颜色的样式。

CSS Peek

  • Peek&#xff1a;内联加载 css 文件并在那里进行快速编辑。&#xff08;Ctrl &#43; Shift &#43; F12&#xff09;

  • Go to&#xff1a;直接跳转到 CSS 文件或在新的编辑器&#xff08;F12&#xff09;中打开

  • Hover&#xff1a;在符号上悬停显示定义&#xff08;Ctrl &#43; hover&#xff09;

DotENV

在 .env 文件中高亮显示键值对。

ES7 React/Redux/GraphQL/React-Native snippets

该扩展为您提供 ES7 中的 Javascript 和 React / Redux 片段&#xff0c;以及 VS Code 的 Babel 插件功能。

Highlight Matching Tag

突出显示匹配的开始或结束标签。

我使用的扩展的样式&#xff1a;

"highlight-matching-tag.styles": {"opening": {"left": {"custom": {"borderWidth": "0 0 0 1.5px","borderStyle": "solid","borderColor": "yellow","borderRadius": "5px","overviewRulerColor": "white"}},"right": {"custom": {"borderWidth": "0 1.5px 0 0","borderStyle": "solid","borderColor": "yellow","borderRadius": "5px","overviewRulerColor": "white"}}}
}

Image preview

悬停时显示图像预览。

Indent Rainbow

此扩展使文本前面的缩进着色&#xff0c;在每个步骤上交替使用四种不同的颜色。

REST Client

REST Client 允许您发送 HTTP 请求并直接在 Visual Studio Code 中查看响应。

Settings Sync

使用 GitHub Gist 在多台机器上同步设置&#xff0c;代码片段&#xff0c;主题&#xff0c;文件图标&#xff0c;启动&#xff0c;键绑定&#xff0c;工作区和扩展。具体操作可以看我的这篇文章《小技巧|同步你的 VSCode 设置及扩展插件&#xff0c;换机不用愁&#xff01;》

TODO Highlight

在代码中突出显示 TODO&#xff0c;FIXME 和其他注释。

Version Lens

显示 package.json 文件中每个软件包的最新版本。

???? Terminal 设置

我的操作系统是 Windows&#xff0c;我通过命令行使用 Git&#xff0c;所以我有一个 Git terminal&#xff0c;我用这个终端作为我的集成 terminal。我的 terminal 设置如下&#xff1a;

"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"terminal.integrated.fontFamily": "FuraMono Nerd Font",
"terminal.integrated.fontSize": 12,
"terminal.integrated.rightClickCopyPaste": true

✔ 有用的 VS Code 快捷键

我在日常生活中使用了一些重要的键盘快捷键&#xff0c;这些快捷方式使 Visual Studio Code 提高了我的工作效率。

  • Ctrl &#43; P &#xff1a;转到文件&#xff0c;您可以在 Visual Studio Code 中移动到打开的文件/文件夹的任何文件。

  • Ctrl &#43; &#96; &#xff1a;在 VS Code 中打开 terminal

  • Alt &#43; Down&#xff1a;下移一行

  • Alt &#43; Up&#xff1a;上移一行

  • Ctrl &#43; D&#xff1a;将选定的字符移动到下一个匹配字符串上

  • Ctrl &#43; Space&#xff1a;触发建议

  • Shift &#43; Alt &#43; Down&#xff1a;向下复制行

  • Shift &#43; Alt &#43; Up&#xff1a;向上复制行

  • Ctrl &#43; Shift &#43; T&#xff1a;重新打开最新关闭的窗口

好文章&#xff0c;我在看❤️


推荐阅读
  • andr ... [详细]
  • 本文详细分析了JSP(JavaServer Pages)技术的主要优点和缺点,帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术,广泛应用于Web开发中。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
  • MySQL索引详解与优化
    本文深入探讨了MySQL中的索引机制,包括索引的基本概念、优势与劣势、分类及其实现原理,并详细介绍了索引的使用场景和优化技巧。通过具体示例,帮助读者更好地理解和应用索引以提升数据库性能。 ... [详细]
  • 创建项目:Visual Studio Online 入门指南
    本文介绍如何使用微软的 Visual Studio Online(VSO)创建和管理开发项目。作为一款基于云计算的开发平台,VSO 提供了丰富的工具和服务,简化了项目的配置和部署流程。 ... [详细]
  • 本文介绍如何在 Visual Studio Code 中使用 Jupyter Notebook 插件,包括创建、编辑和运行笔记本的基本操作。 ... [详细]
  • TortoiseSVN与VisualSVN Server的安装及基本操作指南
    本文详细介绍了如何安装VisualSVN Server以及TortoiseSVN客户端,并提供了基本的操作步骤,包括配置仓库、用户管理及权限设置等关键环节。 ... [详细]
  • Ubuntu GamePack:专为游戏爱好者打造的Linux发行版
    随着Linux系统在游戏领域的应用越来越广泛,许多Linux用户开始寻求在自己的系统上畅玩游戏的方法。UALinux,一家致力于推广GNU/Linux使用的乌克兰公司,推出了基于Ubuntu 16.04的Ubuntu GamePack,旨在为Linux用户提供一个游戏友好型的操作环境。 ... [详细]
  • 端到端自动化测试框架设计 - 以京东商品搜索为例的Web应用测试
    本文将对前文介绍的京东商品搜索功能的端到端自动化测试进行总结,涵盖使用WebStorm、Node.js、Mocha、WebDriverIO及Selenium构建的测试环境,并特别讨论了如何通过会话保持用户登录状态。 ... [详细]
  • VMware 15.5.7 中文版激活方法
    本文提供了一种有效的方法来激活 VMware 15.5.7 的中文版本,同时介绍了如何利用最新的激活码进行操作,确保用户能够顺利使用。 ... [详细]
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
author-avatar
伟哥
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有