显示目录

Visual Studio Code 使用

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

插件

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

插件简要介绍:

  • Alignment: 对齐代码
  • ESLint: 代码检查,需要安装 eslint
  • GitLens: Git 可视化工具,Diff 和 Blame 比较好用
  • HTML Preview: 编辑时实时预览 HTML
  • Material Theme: 主题
  • Material Icon 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
98
99
100
101
102
103
104
105
106
107
108
109
110
{
"workbench.colorTheme": "Material Theme",
"workbench.sideBar.location": "right",
"workbench.statusBar.visible": true,
"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.wordWrap": "off",
"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": true,
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.detectIndentation": 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,
"**/dist": true,
"**/.*": true
},
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/lib": true,
"**/dist": true,
},
"workbench.activityBar.visible": false,
"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,
"workbench.tree.indent": 20,
"materialTheme.accent": "Teal",
"workbench.iconTheme": "material-icon-theme",
"editor.wordWrapColumn": 180,
"editor.renderWhitespace": "none",
"editor.codeLens": false,
"workbench.settings.editor": "json",
"workbench.settings.openDefaultSettings": true,
"workbench.settings.useSplitJSON": true,
"workbench.editor.enablePreviewFromQuickOpen": false,
"explorer.autoReveal": false,
"terminal.integrated.fontFamily": "Meslo LG S for Powerline",
}