优化VSCode：让你的VSCode变得好用又美观

编程语言 2021-02-13 10:30:53 阅读次数: 0

万字长文！打造最顺手的vscode！

不多废话，开整！

文章目录

基本设置

以下是setting.json的基本内容，可以优化vscode写代码体验，设置项的意义已经注释：

{
    
    
    "editor.cursorBlinking": "smooth", //使编辑器光标的闪烁平滑，有呼吸感
    "editor.formatOnPaste": true, //在粘贴时格式化代码
    "editor.formatOnType": true, //敲完一行代码自动格式化
    "editor.smoothScrolling": true, //使编辑器滚动变平滑
    "editor.tabCompletion": "on", //启用Tab补全
    "files.autoGuessEncoding": true, //让VScode自动猜源代码文件的编码格式
    "workbench.list.smoothScrolling": true, //使文件列表滚动变平滑
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", //将终端设为cmd，个人比较喜欢cmd作为终端
    "files.autoSave": "onFocusChange", //在编辑器失去焦点时自动保存，这使自动保存近乎达到“无感知”的体验
    "explorer.confirmDelete": false, //删除文件时不弹出确认弹窗（因为很烦）
    "editor.fontFamily": "'Jetbrains Mono', '微软雅黑', monospace", //字体设置，个人喜欢Jetbrains Mono作英文字体，微软雅黑作中文字体
    "editor.fontLigatures": true,//启用字体连字
    "terminal.integrated.cursorBlinking": true, //终端光标闪烁
    "editor.detectIndentation": false, //不基于文件内容选择缩进用制表符还是空格
    "debug.onTaskErrors": "showErrors", //预启动任务出错后显示错误，并不启动调试
    "explorer.confirmDragAndDrop": false, //往左边文件资源管理器拖动东西来移动/复制时不显示确认窗口（因为很烦）
    "editor.insertSpaces": true, //敲下Tab键时插入空格而不是制表符
    "search.followSymlinks": false, //据说可以减少vscode的CPU和内存占用
    "files.exclude": {
    
     //隐藏一些碍眼的文件夹
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/tmp": true,
        "**/node_modules": true,
        "**/bower_components": true
    },
    "files.watcherExclude": {
    
     //不索引一些不必要索引的大文件夹以减少内存和CPU消耗
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/**": true,
        "**/tmp/**": true,
        "**/bower_components/**": true,
        "**/dist/**": true
    },
    "editor.copyWithSyntaxHighlighting": false, //复制时复制纯文本而不是连语法高亮都复制了
    /********/
    "editor.renderWhitespace": "boundary", //除了两个单词之间用于分隔单词的一个空格，以一个小灰点的样子使空格可见
    "editor.suggestSelection": "first", //代码自动补全时选中第一个，方便记忆位置而且不会导致某些建议消失
    "editor.suggest.snippetsPreventQuickSuggestions": false, //这个开不开效果好像都一样，据说是因为一个bug，建议关掉
    "terminal.integrated.rightClickBehavior": "default", //在终端中右键时显示菜单而不是粘贴（个人喜好）
    "editor.cursorSmoothCaretAnimation": true, //让光标移动、插入变得平滑
    "editor.renderControlCharacters": true, //编辑器中显示不可见的控制字符
    "debug.internalConsoleOptions": "openOnSessionStart",//每次调试都打开调试控制台，方便调试
    "debug.showBreakpointsInOverviewRuler": true,//在滚动条标尺上显示断点的位置，便于查找断点的位置
    "debug.toolBarLocation": "docked",//固定调试时工具条的位置，防止遮挡代码内容
    "workbench.editor.wrapTabs": true,//编辑器标签页在空间不足时以多行显示
    "workbench.editor.decorations.colors": true,//在标签页上以颜色强调标签页的状态（例如有问题或有警告）
    "workbench.editor.decorations.badges": true,//在标签页上以小徽章强调标签页的状态（例如git未提交更改）
    "workbench.editor.enablePreview": false,//打开文件时不是“预览”模式，即在编辑一个文件时打开编辑另一个文件不会覆盖当前编辑的文件而是新建一个标签页
    "editor.stickyTabStops": true,//在缩进上移动光标时四个空格一组来移动，就仿佛它们是制表符(\t)一样
    "editor.wordBasedSuggestions": false,//关闭基于文件中单词来联想的功能（语言自带的联想就够了，开了这个会导致用vscode写MarkDown时的异常联想）
    "editor.linkedEditing": true,//html标签自动重命名（喜大普奔！终于不需要Auto Rename Tag插件了！）
    "html.format.indentHandlebars": true//在写包含形如{
    
    {xxx}}的标签的html文档时，也对标签进行缩进（更美观）
}

好用的插件及其相关设置

以下列出了一些好用的插件及其相关设置，按使用情景分类：

通用

驼峰翻译助手：不再让取变量名成为一件难事

image-20210202114049249

英文不好 写代码起变量名时候 你是否一直这样干?

  • 打开翻译软件
  • 输入中文
  • 复制翻译结果
  • 粘贴英文之后修改命名格式（比如小驼峰、大驼峰）

现在你只需要按动图这样来就可以了：

  • 选中输入按快捷键一键得到翻译结果(悄悄告诉你 直接选中英文还可以跳过翻译哦 快速改变命名格式)
  • 选择你喜欢的命名格式（比如小驼峰、大驼峰）

快捷键

win: "Alt+shift+t" 
mac": "cmd+shift+t"

Bracket Pair Colorizer 2：美观的彩虹括号，让你不再为繁杂的括号烦恼

image-20210211191453883

使用前：

image-20210211191837801

使用后：

image-20210211191805784

配置

无需配置，即装即用，记得装完后重启vscode。

Chinese (Simplified) Language Pack for Visual Studio Code：必不可少的中文插件

image-20210211192056485

汉化你的vscode！让界面、设置等都变成中文！

配置

无需配置，即装即用，记得装完后重启vscode。

Code Runner：以最简洁的方式运行任何代码

image-20210211193113634

不需要繁琐的“调试”配置，Code Runner可以快速地以最简洁的方式运行你的任何代码！

支持超过40种语言！

一键运行

安装好Code Runner插件之后，打开你所要运行的文件，有多种方式来快捷地运行你的代码：

  • 键盘快捷键Ctrl+Alt+N
  • 快捷键F1或Ctrl+Shift+P调出 命令面板, 然后输入 Run Code
  • 在编辑区右键选择 Run Code
  • 在侧边栏文件管理器中右键你要运行的文件，选择 Run Code
  • 右上角的运行小三角按钮

这么多运行代码的方式，够便捷不？

停止运行

如果要停止代码运行，也有如下几种方式：

  • 键盘快捷键Ctrl+Alt+M
  • 快捷键F1或Ctrl+Shift+P调出 命令面板, 然后输入 Stop Code Run

配置

想要舒服的使用Code Runner插件，你需要进行一些配置。

提示：

事实上，通过控制台输入命令的方式能运行大部分代码，而Code Runner的原理就是帮你在控制台输入这些命令。

因此，Code Runner并不能提供运行你的代码所需的环境或编译器，你仍需要下载安装这些环境或编译器。

在settings.json中加入如下内容作为配置，设置项的意义已经注释：

"code-runner.runInTerminal": true,//在控制台运行代码，防止乱码和不能输入
"code-runner.executorMap": {
    
    
    "javascript": " cls && cd /d $dir && node \"$fileName\" && pause",
    "python": " cls && cd /d $dir && python -u \"$fileName\" && pause",
    "bat": " cls && cd /d $dir && cmd /c \"$fileName\""
    /*这是每种语言运行时所执行命令的对应表，因为笔者使用的语言有限，这里只列出了javascript、python和windows批处理的命令，其他语言的命令可自行添加*/
    /*笔者其他博客中可能会有关于对此设置项的添加或删改的内容*/
},
"code-runner.saveFileBeforeRun": true, //运行前自动保存
"code-runner.customCommand": " cls",//这使Ctrl+Alt+K这个快捷键可以快速清空控制台内容
"code-runner.clearPreviousOutput": true,//似乎没啥用，好像是自动清除控制台多余内容，开着吧
"code-runner.respectShebang": false//我是Windows系统所以不需要按shebang来运行
//需要注意的是，所有命令前都有一个空格，用来“喂给”上一次运行结尾的“请按任意键继续. . .”

运行效果

运行python：

2

运行javascript：

3

运行windows批处理：

4

Polacode-2020：分享更漂亮的代码片段

image-20210211223731153

生成更好看的代码片段图片来分享给你的朋友或同事。

用法

快捷键F1或Ctrl+Shift+P调出 命令面板, 然后输入Polacode以打开Polacode面板。

打开面板后在左侧编辑器选中一段代码，右侧的Polacode面板便会呈现出好看的代码片段。
点击以保存代码片段。

还可以在Polacode面板上配置阴影和边框及其颜色。

配置

无需配置，即装即用，记得装完后重启vscode。

TODO Highlight：高亮你的TODO

image-20210211225559473

高亮你的TODO注释。

使用前

image-20210211225346417

使用后

image-20210211225308933

配置

无需配置，即装即用，记得装完后重启vscode。

VS Code Counter：统计代码行数

image-20210211225622841

统计你的项目中有多少行代码！以及各语言的占比！

用法

快捷键F1或Ctrl+Shift+P调出 命令面板, 然后输入Count lines in directory以开始统计。

统计完成会生成一个.VSCodeCounter文件夹，并自动打开里面的报告：

例如：

image-20210211230132635

前端开发

CSS Navigation：快速跳转到CSS的类定义

image-20210211200907387

由于未知原因，笔者电脑上CSS Peek插件有时不起作用，遂采用更稳定的CSS Navigation作为替代品。

按住Ctrl键，鼠标移到html中的CSS类名上，可悬浮预览该类的CSS定义，此时按下鼠标左键，快速跳转到CSS定义处。

效果

5

缺点

不能悬浮预览和跳转到html文件内<style>标签内的CSS类定义，只能悬浮预览和跳转到外部.css文件的CSS类定义处。

配置

无需配置，即装即用，记得装完后重启vscode。

css-auto-prefix：写CSS时不再为浏览器前缀发愁

image-20210211202159675

自动补全不同浏览器的CSS3前缀。

效果

6

配置

无需配置，即装即用，记得装完后重启vscode。

Image Preview：快速预览HTML中的图片

image-20210211204328501

功能

当鼠标移到html文档中的图片路径上时，悬浮预览图片，还可跳转到侧边栏文件管理器中或系统文件管理器中

效果

7

配置

安装这个插件后默认还会在行号左边显示图片缩略图：

image-20210211205135512

笔者不太喜欢，所以通过在setting.json中添加如下配置关掉了这个功能：

"gutterpreview.showImagePreviewOnGutter": false

IntelliSense for CSS class names in HTML：自动补全CSS类名

image-20210211205759839

自动补全CSS类名。

效果

8

配置

无需配置，即装即用，记得装完后重启vscode。

JS-CSS-HTML Formatter：格式化js、css、html文件

image-20210211211028432

用于格式化js、css、html文件（其实主要是用来格式css文件，因为前两者vscode有内置格式化引擎）

配置

需要在setting.json中加入如下内容作为配置：

"[html]": {
    
    
    "editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
},
"[javascript]": {
    
    
    "editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
}

用于把 html和 js的格式化也交给这个插件负责

Live Server：实时地使用浏览器预览你的前端页面

image-20210211211836432

还在浏览器里频繁地刷新来预览前端页面？忍受不了写一会代码就要刷新一下来预览页面？试试Live Server！

用法

在侧边栏文件资源管理器中右键文件选择Open with Live Server启动：
image-20210211212458192

或打开编辑html文件时点击vscode下方状态栏右边的Go Live启动：
image-20210211212812744

此时Live Server启动了一个服务器来实现实时预览前端页面。

保存文件时浏览器便会实时更新页面。

效果

9

停止

快捷键F1或Ctrl+Shift+P调出 命令面板, 然后输入Stop Live Server以停止Live Server服务器。

也可以点击vscode下方状态栏右边的图标停止Live Server服务器。image-20210211214327956

注意：关闭浏览器并不会停止Live Server服务器，但关闭vscode可以停止Live Server服务器。

配置

默认使用系统默认浏览器访问服务器，通过在setting.json中添加如下配置可以改变访问服务器所用的浏览器：

"liveServer.settings.CustomBrowser": 浏览器名

浏览器名 的取值如下（默认为null）：

image-20210211222847920

open in browser：从vscode打开浏览器以预览前端页面

image-20210211221440912

在vscode中打开浏览器以预览前端页面

用法

在侧边栏文件资源管理器中右键html文件选择Open In Default Browser从浏览器打开以预览页面：

image-20210211222253331

如果要在其他浏览器打开可以选择Open In Other Browsers。

配置

无需配置，即装即用，记得装完后重启vscode。

Path Intellisense：智能补全路径

image-20210211223241272

智能补全html文件中的文件路径。

效果

11

配置

无需配置，即装即用，记得装完后重启vscode。

摸鱼

epub reader：摸鱼必备！vscode看小说！支持epub！

image-20210211203047646

功能

  • 支持字体大小，字体颜色自定义
  • 阅读进度显示以及自动记录
  • 支持目录跳转
  • 书架编辑

添加书本

在C:\Users\你的用户名\.vscode\extensions\renkun.reader-1.1.6\book路径下增删书本文件（须为.epub文件类型）

用法

按Ctrl+3进入小说阅读界面，鼠标移到书本目录下方可自定义字体大小颜色（记得点save哦）。

点击要阅读的书本，进入后左右有按钮可翻页，鼠标移到小说阅读界面上方可返回或进行章节跳转。

写作

中文引号修正：解决写作时的小毛病

image-20210211185956749

用于自动修正中文文档里的双引号。在用vscode写作时格外有用。

它假设 “ 和 ” 应当依次轮流出现。比如如下这段

”你听说过Lisa吗？”

“没有欸“我说道，”她是不是那个勇者的母亲？“

会被修正为

“你听说过Lisa吗？”

“没有欸”我说道，“她是不是那个勇者的母亲？”

用法

有两种用法：

  1. 选中一部分文档内容 -> Ctrl+Shift+P调出命令面板 -> 输入Smart Quote， 然后回车。这个是只修正选中部分。
  2. 什么都不选，直接Ctrl+Shift+P调出命令面板 -> 输入 Smart Quote， 然后回车。这个是全部修正。

已知问题

目前无法处理多个不连续选择的情况。

目前无法修正单引号。

Markdown All in One：书写Markdown利器

image-20210211214635448

从”All in One“的名字可以看出该插件含有很多功能，可以增强Markdown写作体验。

具体有哪些功能，大家可以自己探索，笔者不多介绍了。

配置

无需配置，即装即用，记得装完后重启vscode。

Word Count CJK：写作必备的字数统计插件

image-20210211215030345

大部分字数统计插件都不能统计中文的字数，而这个插件可以。

在编辑Markdown或纯文本（txt）时，在vscode下方状态栏左边可以显示实时字数统计。

效果

10

配置

在settings.json中加入如下内容作为配置：

"wordcount_cjk.statusBarTextTemplate": "中文字数：${cjk} ,英文单词数：${en_words} ,非空白字符数：${total - whitespace} ,总字符数：${total}",

主题

笔者所用的主题叫做Gruvbox Material Dark。

由该插件提供：

image-20210211235331645

看起来像这样：

image-20210212000344269

配置

下载安装该插件后须在setting.json中加入如下内容作为配置，设置项的意义已经注释：

"gruvboxMaterial.italicKeywords": true,//关键字为斜体
"gruvboxMaterial.darkContrast": "hard"//加深对比度（默认的太浅了）

猜你喜欢

转载自blog.csdn.net/Cykinter/article/details/113792738
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022