VSCode 使用心得 2020-9-13

最新推荐文章于 2023-12-25 23:31:24 发布

Hwrn.aou

最新推荐文章于 2023-12-25 23:31:24 发布

阅读量888

点赞数 1

本文链接：https://blog.csdn.net/weixin_44881875/article/details/108538004

版权

VSCode 使用心得

VSCode 使用心得

VSCode 使用心得

年初换了新电脑, 急忙下了一个 vscode, 用到现在, 发现实在是太有趣了, 特此分享.

介绍

vscode 大名鼎鼎, 就… 不需要太多介绍了吧?
当然, 先介绍一下这个编辑器本体的功能, 插件容后再叙.

快捷键

自从使用了 vscode, 我对鼠标的依赖越来越少, 以至于现在几乎不用 – 一般操作都能用键盘或触摸板完成
当然, 可以通过插件配置如 vim 或 visual studio 的键映射.

一些比较好用的快捷键 (无插件):

打开键盘快捷方式

(ctrl+L) + (ctrl+S): (在这里可以自己设置快捷方式)

侧栏相关

ctrl+shift+(E/F/X/D): 打开侧栏. 此时焦点跳到侧栏, 如打开资源管理器后, 可以按上下左右键选择文件
连按两下则回到文本编辑器中.
ctrl+B: 切换视图可见性 (和 markdown 加粗有冲突)

跳转相关

使用 ctrl+(P/E) 选择文件打开, ctrl+shift+P 选择命令运行
使用 (alt, ctrl, Fn)+(左/右) 可以跳转到文本编辑器的各种地方, 注意 win+上下左右就是窗口移动了… 要小心
一般的, 在程序源码中, 可以使用 F12 跳转到定义
同时, 可以自定义快捷键用于打开链接, 这在 markdown 中特别好用…

代码块相关

ctrl+(X/C/V/D) 各有用途, 略
(ctrl+K)+(ctrl+数字/L/[) 可折叠代码块

扩展

扩展简直是 vscode 的精髓… 我目前觉得以下扩展非常好用:

辅助工具

翻译
设置shift+ctrl+C对选中短语进行翻译, 按shift+Fn+右, 可选择到行尾, 非常方便
KoroFileHeader
添加文件头, 格式化显示文件信息
Open
右键用默认方式打开 pdf, word, excel 等.
Paste Image
直接保存复制的图片
Overtype
添加-替换模式切换.

美化

nest

啊, 是真的好看而且好玩
需要配合 Fix VSCode Checksums 使用
Power Mode
光污染就是生产力

markdown

Markdown Links

感谢 Foam 插件, 让我找到了这个宝藏. 不过, Foam 和 Foam 推荐的其他插件就… 没啥用处

附上自己的css吧, 直接复制到 Microsoft VS Code\resources\app\extensions\markdown-language-features\media\markdown.css 就行:

/*
 * @Description: Keep away from VSCode default stupid settings
    Copy to C:\Program_Files\Microsoft VS Code\resources\app\extensions\markdown-language-features\media as markdown.css
 * @Author: .
 * @Date: 2020-02-07 22:37:40
 * @LastEditors: .
 * @LastEditTime: 2020-08-01 09:19:56
 * @TODU:
 */
:root { /* barfi.css*/
  --bg-color: #1e1e1e;
  --text-color: #a1a1a1;
  --window-border-color: #333;
  --window-border: 1px solid #555;
  --md-char-color: #C7C5C5;
  --meta-content-color: #5b808d;

  --blur-text-color: #C8C8C8;

  --drag-placeholder-color: #c7c5c5;
  --panel-border-color: #777777;
  --active-toggle-btn-color: #ddd;
  --table-border-color: #ccc;

  --primary-color: #428bca;
  --primary-btn-border-color: #285e8e;
  --primary-btn-text-color: #fff;

  --search-select-bg-color: #000;
  --search-select-text-color: #fff;

  --heading-char-color: #ddd;
  --color-popover-bg-color: #fafafa;

  --control-text-color: var(--text-color);
  --control-text-hover-color: var(--text-color);

  /* Side Bar */
  --side-bar-bg-color: #1a1a1a;
  --item-hover-bg-color: #111;
  --item-hover-text-color: #7c929e;
  --side-bar-fg-color: #DADCE0;

  --side-bar-menu-active-tint: var(--side-bar-menu-active-tint);

  --mac-title-bar-height: 20px;
  --sidebar-width: 270px;

  /* Side-bar file list */
  --active-file-bg-color: #283139;
  --active-file-text-color: #7c929e;
  --active-file-left-border-color: #7fa8f0;
  --active-file-border-color: rgba(91, 112, 130, 0.47);
  --focus-ring-color: #6eace2;
  --file-item-file-name-color: #7c929e;
  --file-item-summary: #616161;

  /* Outline */
  --outline-border-color: #363B40;
  --outline-item-hover-bg-color: #363B40;
  --outline-item-hover-fg-color: white;

  /* Sidebar footer */
  --sidebar-footer-bg-color: #131516;
  --sidebar-footer-heading-color: #7c929e;
  --sidebar-footer-fg-color: #818181;

  /* TOC Drop down */
  --toc-dropmenu-bg-color: #131516;
  --toc-dropmenu-fg-color: #9aa0a6;

  --monospace: monospace;
}

html,
body {
  font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
  font-size: var(--vscode-markdown-font-size, 14px);
  padding: 0 26px; /* 上(下左右) 右(左) 下 左 */
  line-height: var(--vscode-markdown-line-height, 22px);
  word-wrap: break-word;
}

#code-csp-warning {
  position: fixed;
  top: 0;
  right: 0;
  color: white;
  margin: 16px;
  text-align: center;
  font-size: 12px;
  font-family: sans-serif;
  background-color: #444444;
  cursor: pointer;
  padding: 6px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
}

#code-csp-warning:hover {
  text-decoration: none;
  background-color: #007acc;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
}

body.scrollBeyondLastLine {
  margin-bottom: calc(100vh - 22px);
}

body.showEditorSelection .code-line {
  position: relative;
}

body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -12px;
  height: 100%;
}

body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
  left: -30px;
}

.vscode-light.showEditorSelection .code-active-line:before {
  border-left: 3px solid rgba(0, 0, 0, 0.15);
}

.vscode-light.showEditorSelection .code-line:hover:before {
  border-left: 3px solid rgba(0, 0, 0, 0.40);
}

.vscode-light.showEditorSelection .code-line .code-line:hover:before {
  border-left: none;
}

.vscode-dark.showEditorSelection .code-active-line:before {
  border-left: 3px solid rgba(255, 255, 255, 0.4);
}

.vscode-dark.showEditorSelection .code-line:hover:before {
  border-left: 3px solid rgba(255, 255, 255, 0.60);
}

.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
  border-left: none;
}

.vscode-high-contrast.showEditorSelection .code-active-line:before {
  border-left: 3px solid rgba(255, 160, 0, 0.7);
}

.vscode-high-contrast.showEditorSelection .code-line:hover:before {
  border-left: 3px solid rgba(255, 160, 0, 1);
}

.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
  border-left: none;
}

img {
  max-width: 100%;
  max-height: 100%;
}

a {
  color: #C8C8C8;
  text-decoration: none;
  border: solid 1px var(--window-border-color);
  border-color: #285e8e;
}

a:hover {
  text-decoration: underline;
}

a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 1px solid -webkit-focus-ring-color;
  outline-offset: -1px;
}

hr { /* 分割线 */
  border: 0;
  height: 2px;
  border-bottom: 2px solid;
}

/* 标题 */
h1, h2, h3, h4,  h6 {
  margin: 0px;
}


h1 {
  padding-bottom: 0.3em;
  line-height: 1.2;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-size: 32px;
  margin: 8px 0px;
  font-weight: bolder;
  text-align: center;
}

h2 {
  font-size: 28px;
  font-weight: 500;
  margin: 4px 0px;
}

h3 {
  font-size: 24px;
  font-weight: bolder;
}

h4{
  font-size: 20px;
  font-weight: 400;
  margin-left: 1em;
}

h5{
  font-size: var(--vscode-markdown-font-size, 14px);;
}

h6{
  font-size: var(--vscode-markdown-font-size, 14px);
  color: #B8D7A3;
}

p, ul, dd, ol, hr, address, pre, table, iframe{
  /* ul: 无序列表, ol:无序列表, pre: 定义预格式文本 */
  margin: 4px, 0px;
}

b, dt, strong{ /* b: 粗体, strong: 定义着重文字，与<b></b>效果相同 */
  color: rgb(255, 96, 32);
  font-weight: bolder;
}

i { /*定义斜体*/
  opacity: unset;
}

em { /* 定义加重语气，与<i></i>效果相同 */
  color: #1dccf8;
  font-family: "Times New Roman", "楷体";
  font-size: var(--vscode-markdown-font-size, 16px);
}

mark {
  background: #ace056;
}

/* Table related */
table {
  border-collapse: collapse;
/**
* 有些 table 有外框, 可能是因为:
  border: solid 1px var(--window-border-color);
  margin-bottom: 20px
*/
}

th { /* 表头 */
  color: #439e30;
  font-weight: 500;
}

table>thead>tr>th {
  text-align: left;
  border-bottom: 1px solid;
}

table>thead>tr>th,
table>thead>tr>td,
table>tbody>tr>th,
table>tbody>tr>td {
  padding: 5px 10px;
}

table>tbody>tr+tr>td {
  border-top: 1px solid;
}

table tr:nth-child(even) { /** 偶数行变色 */
  color: #B8D7A3;
  /*background: var(--side-bar-bg-color);*/
}

/* 引用块 */
blockquote {
  margin: 0;
  padding: 0 1em 0 1em; /* padding 上下有值之后会合并相邻的块, 但会很丑 */
  border-left-width: 5px;
  border-left-style: solid;
  border-radius: 0 1em 0 1.5em; /* 圆角 */
}

code {
  font-family: "Fira Code Retina", Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
  font-size: 1em;
  line-height: 1.357em;
}

body.wordWrap pre {
  white-space: pre-wrap;
}

pre:not(.hljs),
pre.hljs code>div {
  padding: 16px;
  border-radius: 3px;
  overflow: auto;
}

pre code {
  color: var(--vscode-editor-foreground);
  tab-size: 4;
}

/** Theming */

.vscode-light pre {
  background-color: rgba(220, 220, 220, 0.4);
}

.vscode-dark pre {
  background-color: rgba(10, 10, 10, 0.4);
}

.vscode-high-contrast pre {
  background-color: rgb(0, 0, 0);
}

.vscode-high-contrast h1 {
  border-color: rgb(0, 0, 0);
}

.vscode-light table>thead>tr>th {
  border-color: rgba(0, 0, 0, 0.69);
}

.vscode-dark table>thead>tr>th {
  border-color: rgba(255, 255, 255, 0.69);
}

.vscode-light h1,
.vscode-light hr,
.vscode-light table>tbody>tr+tr>td {
  border-color: rgba(0, 0, 0, 0.18);
}

.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table>tbody>tr+tr>td {
  border-color: rgba(255, 255, 255, 0.18);
}

/*
https://raw.githubusercontent.com/isagalaev/highlight.js/master/src/styles/vs2015.css
*/
/*
* Visual Studio 2015 dark style
* Author: Nicolas LLOBERA <nllobera@gmail.com>
*/


.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: #569CD6;
}

.hljs-link {
  color: #569CD6;
  text-decoration: underline;
}

.hljs-built_in,
.hljs-type {
  color: #4EC9B0;
}

.hljs-number,
.hljs-class {
  color: #B8D7A3;
}

.hljs-string,
.hljs-meta-string {
  color: #D69D85;
}

.hljs-regexp,
.hljs-template-tag {
  color: #9A5334;
}

.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
  color: #DCDCDC;
}

.hljs-comment,
.hljs-quote {
  color: #57A64A;
  font-style: italic;
}

.hljs-doctag {
  color: #608B4E;
}

.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
  color: #9B9B9B;
}

.hljs-variable,
.hljs-template-variable {
  color: #BD63C5;
}

.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
  color: #9CDCFE;
}

.hljs-section {
  color: gold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/*.hljs-code {
  font-family:'Monospace';
}*/

.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #D7BA7D;
}

.hljs-addition {
  background-color: var(--vscode-diffEditor-insertedTextBackground, rgba(155, 185, 85, 0.2));
  color: rgb(155, 185, 85);
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background: var(--vscode-diffEditor-removedTextBackground, rgba(255, 0, 0, 0.2));
  color: rgb(255, 0, 0);
  display: inline-block;
  width: 100%;
}


/**
* From hightlight.css
/*
From https://raw.githubusercontent.com/isagalaev/highlight.js/master/src/styles/vs.css
*/
/*

Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>

*/

.vscode-light .hljs-function,
.vscode-light .hljs-params,
.vscode-light .hljs-number,
.vscode-light .hljs-class {
  color: inherit;
}

.vscode-light .hljs-comment,
.vscode-light .hljs-quote,
.vscode-light .hljs-number,
.vscode-light .hljs-class,
.vscode-light .hljs-variable {
  color: #008000;
}

.vscode-light .hljs-keyword,
.vscode-light .hljs-selector-tag,
.vscode-light .hljs-name,
.vscode-light .hljs-tag {
  color: #00f;
}

.vscode-light .hljs-built_in,
.vscode-light .hljs-builtin-name {
  color: #007acc;
}

.vscode-light .hljs-string,
.vscode-light .hljs-section,
.vscode-light .hljs-attribute,
.vscode-light .hljs-literal,
.vscode-light .hljs-template-tag,
.vscode-light .hljs-template-variable,
.vscode-light .hljs-type {
  color: #a31515;
}

.vscode-light .hljs-selector-attr,
.vscode-light .hljs-selector-pseudo,
.vscode-light .hljs-meta,
.vscode-light .hljs-meta-keyword {
  color: #2b91af;
}

.vscode-light .hljs-title,
.vscode-light .hljs-doctag {
  color: #808080;
}

.vscode-light .hljs-attr {
  color: #f00;
}

.vscode-light .hljs-symbol,
.vscode-light .hljs-bullet,
.vscode-light .hljs-link {
  color: #00b0e8;
}


.vscode-light .hljs-emphasis {
  font-style: italic;
}

.vscode-light .hljs-strong {
  font-weight: bold;
}