打造专属开发利器——vscode

Mohan7107
307 阅读5分钟

现在市场上的前端适用的代码编辑器主要有Atom、Sublime Text、WebStrom 和 VsCode，笔者最喜欢的代码编辑器是 VsCode，VsCode是一款轻量级的编辑器、安装包小，且启动速度快，可以提高用户体验，主要有轻量级、插件丰富和具有代码跟踪等功能，与相对臃肿的 WebStrom 相比，VsCode 的使用体验无疑更棒

VsCode 本身十分简洁，这就造成了内置的功能比较简单，需要通过丰富的插件系统来完善 VsCode 的功能，以此来达到 WebStrom 的使用效果

本篇文章旨在为了给各位开发者提供 VsCode 配置的样例方案，主要包括外观配置、插件和快捷键等，帮助大家打造最适合自己的开发利器。本篇文章的配置是笔者最喜欢用的，大家斟酌参考，选用适合自己的方式

外观配置

vscode编辑器的外观配置主要包括主题、字体、图标等，一个美观的编辑器可以给开发者极大的舒适感，提升在coding过程中的工作效率。所以，一套适合自己的外观配置对每个开发者是很有必要的，笔者这里举例自己使用过的一些主题和插件，仅供大家参考，大家还是需要多使用、多搭配，找到最适合自己的独特的外观配置。

笔者最常使用的搭配是 Snazzy Operator + JetBrains Mono + VSCode Great Icons

在此推荐一些开发者们高频使用的主题、字体和图标

主题：

字体：

字体的设置方法：在 settings.json 中修改 editor.fontFamily 属性，如：

{
    "workbench.colorTheme": "Snazzy Operator",
    "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', 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"
}

图标：

推荐插件

Auto Rename Tag

自动重命名配对的HTML/XML标签，也可以在JSX中使用

在 setting.json 文件中的 auto-rename-tag.activationOnLanguage 中添加一项以设置扩展名将被激活的语言。默认值为 ["\*"], 将为所有语言激活。例：

    "auto-rename-tag.activationOnLanguage": ["html"]

注：最新的vscode本身已经具备同步标签的改动的功能了，但是使用体验没有Auto Rename Tag这个插件好，所以是否安装看大家需要

Color Highlight

此扩展能显示文档中css/web颜色的样式

CSS Peek

此扩展能在html中定位css的位置

  • Peek：内联加载CSS文件并在那里进行快速编辑（Ctrl + Shift + F12）
  • Go to：直接跳转到CSS文件或在新的编辑器（F12）中打开
  • Hover：在符号上悬停显示定义（Ctrl + hover）

ES7+ React/Redux/React-Native snippets

此扩展可为开发者提供 ES7 中 JavaScript 和 React/ Redux 片段，以及 VsCode 的 Babel 插件功能

Highlight Matching Tag

突出显示匹配的开始或结束标签，可在 settings.json 中调整扩展的样式，例：

"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

此扩展能在鼠标悬停时显示图片预览，Ctrl + 点击可在浏览器中打开图片

Indent Rainbow

此扩展可使文本前面的的缩进着色，在没个步骤上交替使用四种不同的颜色

TODO Highlight

此扩展可在代码中高亮显示TODO、FIXME 和其他注释，支持添加新的高亮注释，配合Todo Tree 插件使用，可查看、筛选、快速定位高亮注释

TODO Hightlight 配置关键词

// 在setting.json中配置
"todohighlight.keywords": [
    {
        "text": "关键词名称",
        "color": "字体颜色",
        "backgroundColor": "背景颜色"
    }
]

Code Spell Checker

一个基本的拼写检查程序，可以很好地处理代码和文档。这个插件的目标是帮助捕捉常见的拼写错误并降低错误数量

Template String Converter

在字符串中输入$触发，将字符串转换为模板字符串

Project Manager

项目管理插件，当开发多个项目时，可以快速跳转

GitLens

增强了git功能，支持在VsCode查看作者、修改时间等

Draw.io Integration

可以在Vscode中画流程图，也可以查看 drawio 文件，支持多人协作编辑图表

Terminal 设置

可以通过在 settings.json 中设置 vscode 的 terminal，例：设置 Git Bash 为 vscode 的 terminal

"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

快捷键

通过 Ctrl + K + S 快捷键打开快捷方式页面，在该页面我们能快速搜索对应的快捷键及修改快捷方式，在这里笔者也整理一些高频使用的快捷方式：

功能Mac 快捷键Win 快捷键
合并为一行Ctrl + J设置 edtior.action.joinLines 键绑定
格式化代码Shift + Option + fShift + Option + f
收起光标处里边未折叠区域的代码Cmd + Option + \[Ctrl + Shift + \[
打开光标处折叠区域的代码Cmd + Option + ]Ctrl + Shift + ]
拆分编辑器Cmd + \ | 2 | 3 | 4Shift + Alt + \ | 2 | 3 | 4
选中单词Cmd + dCtrl + d
导航到一个特定的行Ctrl + gCtrl + g
导航到某个标志Cmd + Shift + o Ctrl + Shift + o
导航到工作区中的某个标志Cmd + tCtrl + t
删除前一个单词Cmd + deleteCtrl + backspace
向上或向下复制行Shift + Option + Up/DownShift +Alt + Up/Down
复制行Ctrl + Shift + dCmd + Shift + d
删除行Cmd + xCtrl + x
向上/向下添加光标Cmd + Alt + Up/DownCmd + Alt + Up/Down
重命名变量F2F2
列区域选中Shift + Option + 拖动鼠标Shift + Alt + 拖动鼠标
选中词Option + Shift + left/rightCtrl + Shift + left/right
在外部打开终端并定位到当前路径Cmd + Shift + pCtrl + Shift + p
显示隐藏终端面板Ctrl + `Ctrl + `
快速拆分文件编辑Cmd + \Ctrl + \
添加光标Alt + 左键Alt + 左键
同一列所有位置添加光标Alt + Shift + 左键Alt + Shift + 左键

更多的快捷方式也可以通过以下的PDF文件进行查询：

🧡🧡肝文不易，如果您觉得本文对您有所启发和帮助，希望能够一键三连（关注、转发、收藏），也可以留言讨论，这是对笔者最大的鼓励🧡🧡

avatar
文章
阅读
粉丝