Visual Studio Code 扩展

主题相关

HTML 相关

React 相关

  • ES7 React/Redux/GraphQL/React-Native snippets

Vue 相关

CSS 相关

AI 代码提示和生成

Markdown 相关

Git 相关

格式和代码检查相关

调试相关

语法支持

开发体验提升

微信小程序相关

  • WXML - Language Service
    • 微信小程序标签、属性的智能补全(同时支持原生小程序、mpvuewepy 框架,并提供 snippets)
    • 插件地址open in new window

其他

webpack 项目识别 alias

  1. 在项目根目录新建 jsconfig.jsontsconfig.json
  2. 添加以下代码,其中 paths 字段的值要与你项目配置的 alias 一致
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}
1
2
3
4
5
6
7
8
9

推荐配置

// 将设置放入此文件中以覆盖默认设置
{
  /** 编辑器相关配置 */
  "editor.fontSize": 13.5,
  "editor.fontFamily": "Input Mono, Fira Code, monospace",
  "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss06', 'zero'",
  "editor.tabSize": 2,
  // 关闭快速预览
  "editor.minimap.enabled": true,
  "editor.wordWrap": "on",
  "editor.lineNumbers": "on",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // bug控制缩进不关tabSize修改无用
  "editor.detectIndentation": false,
  "editor.inlineSuggest.enabled": true,
  "editor.cursorSmoothCaretAnimation": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.renderWhitespace": "boundary",
  "editor.glyphMargin": true,
  "editor.accessibilitySupport": "off",
  // 保存格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
    // "source.organizeImports": true,
  },
  /** 工作台配置 */
  "workbench.colorTheme": "Bluloco Dark",
  "workbench.iconTheme": "material-icon-theme",
  // 新开标签页查看文件而不是覆盖当前标签页
  "workbench.editor.enablePreview": false,
  "workbench.editor.closeOnFileDelete": true,
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.tree.indent": 14,
  "workbench.list.smoothScrolling": true,
  "workbench.activityBar.visible": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.fontAliasing": "antialiased",
  /** 终端配置 */
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.persistentSessionReviveProcess": "never",
  "terminal.integrated.tabs.enabled": true,
  "terminal.integrated.cursorStyle": "line",
  "extensions.autoUpdate": "onlyEnabledExtensions",
  "extensions.ignoreRecommendations": true,
  // 如需要开发微信小程序,需要注释这段代码,不然会和 minapp-vscode 插件冲突
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // 有注释的 json
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[wxml]": {
    "editor.defaultFormatter": "qiu8310.minapp-vscode"
  },
  // 文件配置
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.vue": "vue",
    "*.env.*": "env"
  },
  "files.exclude": {
    "**/.idea": true
  },
  "files.insertFinalNewline": true,
  "files.simpleDialog.enable": true,
  /** 文件搜索配置 */
  "search.exclude": {
    // 配置文件
    "**/.vscode": true,
    "**/.git": true,
    "**/.github": true,
    // 依赖文件
    "**/node_modules": true,
    "**/bower_components": true,
    "**/miniprogram_npm": true,
    // lock 文件
    "**/package-lock.json": true,
    "**/yarn.lock": true,
    "**/pnpm-lock.yaml": true,
    // 打包文件
    "**/dist": true,
    "**/.umi": true
  },
  "scm.defaultViewMode": "tree",
  /** git 相关 */
  "git.ignoreMissingGitWarning": true,
  "git.autofetch": true,
  "git.untrackedChanges": "separate",
  /** 资源管理器配置 */
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  /*** 第三方扩展配置 ***/
  /** eslint 配置 https://github.com/antfu/eslint-config */
  "eslint.format.enable": true,
  "eslint.options": {
    "extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json",
    "jsonc",
    "json5"
  ],
  /** prettier 配置 */
  // 是否每行末尾添加分号
  "prettier.semi": false,
  // 是否使用单引号
  "prettier.singleQuote": true,
  "prettier.printWidth": 100,
  "prettier.trailingComma": "none",
  /** errorLens 配置 */
  "errorLens.enabledDiagnosticLevels": ["warning", "error"],
  "errorLens.excludeBySource": ["cSpell", "Grammarly", "eslint"],
  /** Code Spell Checker 配置 */
  "cSpell.allowCompoundWords": true,
  "cSpell.language": "en,en-US",
  "cSpell.ignoreWords": [
    /** 库相关 */
    "yalc",
    "vetur",
    "vuex",
    "vuepress",
    "vite",
    "antd",
    "ahooks",
    "weui",
    "weapp",
    "wxml",
    "craco",
    /** 常用简写 */
    "btns"
  ],
  /** emmet 配置 */
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascript": "javascriptreact",
    "wxml": "html"
  },
  /** vetur 配置 */
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 80, // No line exceeds 100 characters
      "singleQuote": false // Prefer double quotes over single quotes
    },
    "prettier": {
      // 是否添加分号
      "semi": false,
      // 是否使用单引号
      "singleQuote": true,
      "eslintIntegration": true,
      "parser": "babylon"
    }
  },
  "gitlens.keymap": "alternate",
  "tabnine.experimentalAutoImports": true,
  // 标签高亮
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 4px",
          "borderStyle": "solid",
          "borderColor": "LightSkyBlue",
          "borderRadius": "5px"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 4px 0 0",
          "borderStyle": "solid",
          "borderColor": "LightSkyBlue",
          "borderRadius": "5px"
        }
      }
    }
  },
  /** markdown 配置 */
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.quickSuggestions": true
  },
  "markdown-preview-enhanced.codeBlockTheme": "one-dark.css",
  "markdown-preview-enhanced.previewTheme": "one-dark.css",
  "markdownlint.config": {
    "MD001": false,
    "MD024": false,
    "MD033": false
  },
  /** 微信小程序配置 */
  "minapp-vscode.disableAutoConfig": true
}
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
上次更新: 4/22/2022, 11:30:58 AM
(adsbygoogle = window.adsbygoogle || []).push({});