显示目录

Visual Studio Code 使用

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

插件

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

插件简要介绍:

  • Alignment: 对齐代码
  • ESLint: 代码检查,需要安装 eslint
  • GitLens: Git 可视化工具,Diff 和 Blame 比较好用
  • HTML Preview: 编辑时实时预览 HTML
  • Live Server Preview: 启动本地 Web 服务
  • Material Theme: 主题
  • Material Icon Theme: 图标
  • Polacode: 代码生成图片,便于分享
  • REST Client: 管理和发送 HTTP | REST 请求,一个文件里可以管理多个请求,简单代替 Postman
  • TODO Highlight: 高亮和搜索 TODO:, FIXME:,也可自定义高亮关键字
  • Vetur: 开发 Vue 使用的插件
  • Settings Sync: 使用 Github Gist 保存配置,一个人配置好后,方便给其他人使用

语法高亮

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
{
"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.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"
}
}