代码编辑器有很多,有免费的也有收费的。我最喜欢的代码编辑器之一是VisualStudioCode。它免费且功能强大,我已经放弃了Atom、SublimeText和WebStorm,它们也很强大。今天,我将分享我最喜欢的web开发代码编辑器设置。我将从代码编辑器的外观开始。毕竟颜值很重要。主题我最常用的VSCode主题是我目前使用的SnazzyOperator。这个主题是基于超时髦的,并针对与OperatorMono字体一起使用进行了优化。我喜欢这个主题。?我以前使用过的其他一些主题:OceanicNext-我使用OceanicNext(暗淡背景)emedy-我使用RemedyDark(直)?字体对我的代码编辑器来说另一个重要的事情是,我用于代码编辑器的字体是JetBrains单声道。这是一款支持连字的免费字体。Ligatures是一种新的字体格式,它支持符号装饰,而不是=>、<=。在使用JetBrainsMono之前,我使用了OperatorMono。这也是一个不错的字体。?我以前用过的其他一些字体:OperatorMono-支持连字。Fira代码-免费并支持连字。DankMono-付费并支持连字。你想使用我的设置,使用我的VSCode字体吗?在VSCode中,按Ctrl+P,输入settings.json并打开文件。现在,用我给定的值替换下面的属性值。{“workbench.colorTheme”:“SnazzyOperator”,“editor.fontFamily”:“'JetBrainsMono',Consolas,'CourierNew',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"}图标文件图标增强了VSCode的外观,主要是因为它可以帮助我们通过给定的图标来区分不同的文件和文件夹。对于我的VSCode,我使用了两个文件图标:MaterialIconTheme-VSCode最受欢迎的图标主题之一。MaterialThemeIcons-目前正在使用中。我使用扩展自动重命名标签来自动重命名成对的HTML/XML标签,这在JSX中也可用。在settings.json文件中向auto-rename-tag.activationOnLanguage添加一个条目,以设置扩展将被激活的语言。默认情况下它是**["*"]**并且将为所有语言激活。"auto-rename-tag.activationOnLanguage":["html","xml","php","javascript"]BracketPairColorizer2此扩展允许通过颜色识别匹配的括号,用户可以定义要匹配的符号,以及要使用的颜色。ColorHighlight此扩展为文档中的css/web颜色设置样式。CSSPeekPeek:内联加载css文件并在那里进行快速编辑。(Ctrl+Shift+F12)转到:直接跳转到CSS文件或在新编辑器中打开(F12)悬停:悬停在符号上以显示定义(Ctrl+悬停)DotENV突出显示.env文件值对中的键。ES7React/Redux/GraphQL/React-Native片段此扩展为您提供ES7中的JavaScript和React/Redux片段,以及VSCode的Babel插件功能。高亮匹配标签高亮显示匹配的开始或结束标签。我使用的扩展样式:"highlight-matching-tag.styles":{"opening":{"left":{"custom":{"borderWidth":"0001.5px","borderStyle":"solid","borderColor":"yellow","borderRadius":"5px","overviewRulerColor":"white"}},"right":{"custom":{"borderWidth":"01.5px00","borderStyle":"solid","borderColor":"yellow","borderRadius":"5px","overviewRulerColor":"white"}}}}图片预览悬停时显示图片预览。IndentRainbow此扩展为文本前面的缩进着色,在每个步骤上交替使用四种不同的颜色。RESTClientRESTClient允许您直接在VisualStudioCode中发送HTTP请求和查看响应。SettingsSync使用GitHubGist在多台机器上同步设置、代码片段、主题、文件图标、启动、键绑定、工作区和扩展。具体操作见我的文章《小技巧|同步你的 VSCode 设置及扩展插件,换机不用愁!》TODOHighlight在代码中高亮显示TODO、FIXME等注释。版本Lens在package.json文件中显示每个包的最新版本。终端设置我的操作系统是Windows,我通过命令行使用Git,所以我有一个Git终端用作我的集成终端。我的终端设置如下:"terminal.integrated.shell.windows":"C:\\ProgramFiles\\Git\\bin\\bash.exe","terminal.integrated.fontFamily":"FuraMonoNerdFont","terminal.integrated.fontSize":12,"terminal.integrated.rightClickCopyPaste":true?有用的VSCode快捷键我在日常生活中使用了一些重要的键盘快捷键,它们使VisualStudioCode对我来说更有效率。Ctrl+P:转到文件,您可以将任何文件移动到VisualStudioCode中打开的文件/文件夹。Ctrl+`:在VSCode中打开终端Alt+向下:向下移动一行Alt+向上:向上移动一行Ctrl+D:将所选字符移动到下一个匹配字符串Ctrl+空格:触发建议Shift+Alt+Down:向下复制一行Shift+Alt+Up:向上复制一行Ctrl+Shift+T:重新打开最近关闭的窗口
