显示目录

Visual Studio Code 使用

Visual Studio Code 简称 VSC,配置后效果如下:

插件

VSC 自带的功能已经很丰富了,再安装下面几个插件,能够满足绝大多数时候前端开发 (Java,C++ 等非脚本语言开发推荐使用 IDE):

插件简要介绍:

  • Alignment: 对齐代码
  • Custom CSS and JS Loader: 修改界面的样式
  • ESLint: 代码检查,需要安装 eslint
  • GitLens: Git 可视化工具,Diff 和 Blame 比较好用
  • Material Theme: 主题
  • Polacode: 代码生成图片,便于分享
  • REST Client: 管理和发送 HTTP | REST 请求,一个文件里可以管理多个请求,简单代替 Postman
  • TODO Highlight: 高亮和搜索 TODO:, FIXME:,也可自定义高亮关键字
  • Vetur: 开发 Vue 使用的插件
  • Settings Sync: 使用 Github Gist 保存配置,一个人配置好后,方便给其他人使用

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
{
"workbench.colorTheme": "Material Theme",
"workbench.sideBar.location": "right",
"workbench.statusBar.visible": true,
"workbench.iconTheme": "eq-material-theme-icons",
"window.nativeTabs": false,
"window.openFoldersInNewWindow": "off",
"breadcrumbs.enabled": false,

"workbench.colorCustomizations": {
"editor.selectionHighlightBorder": "#00000000",
},

"files.useExperimentalFileWatcher": true,

"editor.fontFamily": "Monaco, 'Courier New', monospace",
"editor.fontSize": 14,
"editor.minimap.enabled": false,
"editor.overviewRulerBorder": false,
"editor.renderWhitespace": "boundary",
"editor.wordWrap": "on",
"editor.roundedSelection": false,
"editor.selectionHighlight": true,
"editor.occurrencesHighlight": false,
"editor.renderControlCharacters": true,
"editor.scrollBeyondLastLine": false,
"editor.renderLineHighlight": "all",
"editor.scrollbar.verticalScrollbarSize": 7,
"editor.scrollbar.horizontalScrollbarSize": 7,
"editor.hideCursorInOverviewRuler": true,
"editor.links": false,

"files.eol": "\n",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,

"editor.matchBrackets": false,
"bracket-pair-colorizer-2.showBracketsInGutter": true,
"bracket-pair-colorizer-2.showHorizontalScopeLine": false,
"bracket-pair-colorizer-2.highlightActiveScope": true,
"bracket-pair-colorizer-2.activeScopeCSS": [
"backgroundColor: {color}; opacity: 0.3"
],

"javascript.preferences.quoteStyle": "single",
"vetur.format.options.tabSize": 4,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.validation.template": false,

"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
],

"files.exclude": {
"**/node_modules": true,
"**/.*": true
},
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/lib": true
},
"workbench.activityBar.visible": false,
"vscode_custom_css.imports": ["file:///Users/Biao/Documents/workspace/VSC/vsc.css"],
"vscode_custom_css.policy": true,
"sync.gist": "6beffa6125f0a1d89fb9724e82d44d54",
"eslint.packageManager": "yarn",
"window.zoomLevel": 0,
"gitlens.currentLine.enabled": false,
"extensions.ignoreRecommendations": true,
"todohighlight.isEnable": true,
"todohighlight.include": [
"**/*.http",
"**/*.vue",
],
"todohighlight.defaultStyle": {
"borderRadius": "2px",
},
"todohighlight.keywords": [
{
"text": "###",
// "color": "#666",
"color": "orangered",
// "border": "1px solid rgba(0,0,0,0.4)",
"borderRadius": "0px",
"backgroundColor": "rgba(0,0,0,0.4)",
"isWholeLine": true,
}
],
"rest-client.timeoutinmilliseconds": 10000,
}

Custom CSS and JS Loader 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
[title="Open Changes"], [title="Split Editor Right (⌘\\)"], [title="Open to the Side"], [title="Collapse All"] {
display: none !important;
}

.tab {
min-width: 200px !important;
}

.monaco-editor .scroll-decoration {
box-shadow: none;
}

.mtk1::before, .mtk2::before, .mtk3::before, .mtk4::before, .mtk5::before,
.mtk6::before, .mtk7::before, .mtk8::before, .mtk9::before, .mtk10::before,
.mtk11::before, .mtk12::before, .mtk13::before, .mtk14::before, .mtk15::before {
border-color: transparent !important;
}

.monaco-editor .vs-whitespace {
color: rgba(238, 255, 255, 0.06) !important;
}

.tab-border-bottom {
border-left: 2px solid transparent !important;
}

.tab-border-bottom.active {
/* border-left: 2px solid rgb(128, 203, 196) !important; */
--tab-border-bottom-color: transparent !important;
}

/* File Explorer 树节点的缩进 */
.monaco-tree-row[aria-level="1"] { padding-left: 23px !important; }
.monaco-tree-row[aria-level="2"] { padding-left: 46px !important; }
.monaco-tree-row[aria-level="3"] { padding-left: 69px !important; }
.monaco-tree-row[aria-level="4"] { padding-left: 92px !important; }
.monaco-tree-row[aria-level="5"] { padding-left: 115px !important; }
.monaco-tree-row[aria-level="6"] { padding-left: 138px !important; }
.monaco-tree-row[aria-level="7"] { padding-left: 161px !important; }
.monaco-tree-row[aria-level="8"] { padding-left: 184px !important; }
.monaco-tree-row[aria-level="9"] { padding-left: 207px !important; }
.monaco-tree-row[aria-level="10"] { padding-left: 230px !important; }
.monaco-tree-row[aria-level="11"] { padding-left: 253px !important; }
.monaco-tree-row[aria-level="12"] { padding-left: 276px !important; }
.monaco-tree-row[aria-level="13"] { padding-left: 299px !important; }
.monaco-tree-row[aria-level="14"] { padding-left: 322px !important; }
.monaco-tree-row[aria-level="15"] { padding-left: 345px !important; }