Content Table

Visual Studio Code 使用

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

插件

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

插件简要介绍:

  • Alignment: 对齐代码
  • ESLint: 代码检查,需要安装 eslint
  • GitLens: Git 可视化工具,Diff 和 Blame 比较好用
  • Git Graph: 查看 Git 的提交记录
  • HTML Preview: 编辑时实时预览 HTML
  • Live Server Preview: 启动本地 Web 服务
  • Material Theme: 主题
  • Material Icon Theme: 图标
  • Polacode: 代码生成图片,便于分享
  • REST Client: 管理和发送 HTTP | REST 请求,一个文件里可以管理多个请求,简单代替 Postman
  • TODO Highlight: 高亮和搜索 TODO:, FIXME:,也可自定义高亮关键字
  • Vetur: 开发 Vue 使用的插件
  • Project Manager: 可以把不同的目录保存为不同的 Project,通过切换 Project 显示对应的目录,免得在同一个 Workspace 中显示太多目录显得太乱
  • Settings Sync: 使用 Github Gist 保存配置,一个人配置好后,方便给其他人使用
  • vscode-ssh: 使用 SSH 访问远程服务器,并且还提供了 SFTP 功能,能够在 VS Code 里编辑服务器上的文件,保存后自动上传
  • Go To Method: 只列出 JS 文件中的函数,比默认的 outline 简洁很多
  • Code Runner: 运行各种代码,方便测试各种小代码片段
  • Draw.io Integration: 在 VSC 里使用 Draw.io 画流程图等
  • Easy Snippet: 简化代码片段管理
  • PlantUML: 代码画流程图、UML、时序图、泳道图等
  • Remote FS: 远程访问 Linux 文件系统,本地编辑,自动保存到远程
  • reg-visualizer: 正则可视化插件,右键选中的正则表达式点击菜单项 RegExp Visualize

语法高亮

You can add new file extensions to an existing language with the files.associations setting. For example, the setting below adds the .myphp file extension to the php language identifier:

1
2
3
"files.associations": {
"*.myphp": "php"
}

参考配置

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
{
"workbench.colorTheme": "Material Theme",
"workbench.sideBar.location": "right",
"workbench.statusBar.visible": true,
"window.nativeTabs": false,
"window.openFoldersInNewWindow": "off",
"window.restoreFullscreen": true,
"breadcrumbs.enabled": false,
"workbench.colorCustomizations": {
"editor.selectionHighlightBorder": "#00000000",
"activityBarBadge.background": "#64FFDA",
"activityBar.activeBorder": "#64FFDA",
"list.activeSelectionForeground": "#64FFDA",
"list.inactiveSelectionForeground": "#64FFDA",
"list.highlightForeground": "#64FFDA",
"scrollbarSlider.activeBackground": "#64FFDA50",
"editorSuggestWidget.highlightForeground": "#64FFDA",
"textLink.foreground": "#64FFDA",
"progressBar.background": "#64FFDA",
"pickerGroup.foreground": "#64FFDA",
"tab.activeBorder": "#64FFDA",
"notificationLink.foreground": "#64FFDA",
"editorWidget.resizeBorder": "#64FFDA",
"editorWidget.border": "#64FFDA",
"settings.modifiedItemIndicator": "#64FFDA",
"settings.headerForeground": "#64FFDA",
"panelTitle.activeBorder": "#64FFDA",
"breadcrumb.activeSelectionForeground": "#64FFDA",
"menu.selectionForeground": "#64FFDA",
"menubar.selectionForeground": "#64FFDA",
"editor.findMatchBorder": "#64FFDA",
"selection.background": "#64FFDA40"
},
"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.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,
"materialTheme.accent": "Bright Teal",
"editor.wordWrapColumn": 180,
"editor.renderWhitespace": "selection",
"editor.codeLens": false,
"workbench.tree.indent": 20,
"workbench.tree.renderIndentGuides": "none",
"workbench.settings.editor": "json",
"workbench.settings.openDefaultSettings": true,
"workbench.settings.useSplitJSON": true,
"workbench.editor.enablePreviewFromQuickOpen": false,
"explorer.autoReveal": false,
"terminal.integrated.shell.osx": "/bin/zsh",
"terminal.integrated.fontFamily": "Hack Nerd Font",
"terminal.integrated.cursorStyle": "line",
"sequencediagrams.diagram.style": "simple",
"editor.snippetSuggestions": "top",
"editor.suggest.showIcons": false,
"code-runner.clearPreviousOutput": true,
"code-runner.saveAllFilesBeforeRun": true,
"code-runner.runInTerminal": true,
"terminal.integrated.fontSize": 16,
"editor.cursorBlinking": "phase",
"workbench.statusBar.feedback.visible": false,
"telemetry.enableCrashReporter": false,
"telemetry.enableTelemetry": false,
"files.associations": {
"*.tpl": "html",
"*.styl": "css",
"*.qss": "css"
},
"highlight-matching-tag.showRuler": false,
"highlight-matching-tag.highlightFromContent": true,
"highlight-matching-tag.highlightSelfClosing": true,
"highlight-matching-tag.styles": {
"opening": {
"name": {
"highlight": "rgba(180, 20, 80, 0.3)"
}
},
"closing": {
"name": {
"highlight": "rgba(180, 20, 80, 0.3)"
}
}
},
"sync.forceUpload": true,
"workbench.startupEditor": "newUntitledFile",
"projectManager.sortList": "Saved",
"githd.blameView.enabled": false,
"githd.logView.commitsCount": 100,
"git-graph.autoCenterCommitDetailsView": false,
"git-graph.commitDetailsViewLocation": "Docked to Bottom",
"git-graph.defaultFileViewType": "File List",
"git-graph.initialLoadCommits": 100,
"gitlens.views.compare.files.layout": "list",
"gitlens.views.repositories.branches.layout": "list",
"git.confirmSync": false,
"scm.alwaysShowProviders": true,
"editor.scrollbar.vertical": "hidden",
"readOnlyModeSupport.ignore": [
"/Users/Biao/Temp/test.js"
],
}