Visual Studio Code 扩展
主题相关
One Dark ProShades of Purple- 紫色主题(来自彤姐的推荐:没有什么比骚更重要)
- 插件地址open in new window
Dracula OfficialMaterial Icon Theme- 文件图标美化
- 插件地址open in new window
background
React 相关
ES7 React/Redux/GraphQL/React-Native snippets- 提供 ES7 中的 JavaScript 和 React / Redux 片段,以及针对 VS Code 的 Babel 插件功能
- 插件地址open in new window
Vue 相关
Vue 2 Snippets- 基于最新的 Vue 2 的 API 添加了 Code Snippets
- 插件地址open in new window
VeturVue文件语法高亮、片段整理、错误检查、格式化- 插件地址open in new window
CSS 相关
Easy LESS- 保存时自动将
less自动编译为css - 插件地址open in new window
- 保存时自动将
language-stylus- 增加对
stylus的支持 - 插件地址open in new window
- 增加对
px to rempx和rem互相转换- 插件地址open in new window
微信小程序相关
minapp- 微信小程序标签、属性的智能补全(同时支持原生小程序、
mpvue和wepy框架,并提供 snippets) - 插件地址open in new window
- 微信小程序标签、属性的智能补全(同时支持原生小程序、
Markdown 相关
Markdown All in One- 为 Markdown 增加键盘快捷键,目录,自动预览等)
- 插件地址open in new window
markdownlint- Markdown / CommonMark 标记和样式检查
- 插件地址open in new window
Git 相关
GitLens — Git supercharged- 增强构建在 VS Code 中的 Git 功能
- 插件地址open in new window
格式化相关
ESLint- 将 ESLint JavaScript 集成到 VS Code 中
- 插件地址open in new window
Prettier - Code formatter
调试相关
Debugger for Chrome- 在 Chrome 浏览器或任何其他支持 Chrome Debugger 协议的目标中调试 JavaScript 代码
- 插件地址open in new window
Live Server- 启动具有实时重新加载功能的本地开发服务,以处理静态和动态页面
- 插件地址open in new window
其他
Auto Close Tag- 自动添加 HTML / XML 关闭标签
- 插件地址open in new window
Auto Rename Tag- 自动重命名配对的 HTML / XML 标签
- 插件地址open in new window
Auto Import- 自动查找,解析并提供所有可用导入的代码操作和代码完成。 与 Typescript 和 TSX 一起使用
- 插件地址open in new window
Import Cost- 在编辑器中显示导入/需要包的大小(PS:小内存用户不建议使用,说的就是你这个用 8G 的)
- 插件地址open in new window
Image preview- 在行号边上、悬停时显示图像预览
- 插件地址open in new window
Path Intellisense- 自动补全文件名
- 插件地址open in new window
npm Intellisense- 可自动完成导入语句中的 npm 模块
- 插件地址open in new window
Chinese (Simplified) Language Pack for Visual Studio Code- 适用于 VS Code 的中文(简体)语言包
- 插件地址open in new window
Bracket Pair Colorizer- 为匹配的括号着色
- 插件地址open in new window
EditorConfig for VS Code- 增加对
.editorconfig的支持 - 插件地址open in new window
- 增加对
env-cmd-file-syntax- .env 文件键值字符串高亮
- 插件地址open in new window
Code Spell Checker- 代码拼写检查
- 插件地址open in new window
webpack 项目识别 alias
- 在项目根目录新建
jsconfig.json或tsconfig.json - 添加以下代码,其中
paths字段的值要与你项目配置的alias一致
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src"]
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
推荐配置
// 将设置放入此文件中以覆盖默认设置
{
"files.autoSave": "off",
"files.autoSaveDelay": 1500,
"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.formatOnSave": true,
"editor.codeActionsOnSave": {
// "source.organizeImports": true,
"source.fixAll": true,
"source.fixAll.eslint": true
},
// eslint 配置
"eslint.options": {
"extensions": ["js", ".vue"]
},
"eslint.format.enable": true,
"eslint.validate": [
"vue",
"html",
"javascript",
"javascriptreact",
"jsx",
"typescript",
"typescriptreact"
],
"prettier.semi": false,
// 是否使用单引号
"prettier.singleQuote": true,
"prettier.printWidth": 100,
"prettier.packageManager": "yarn",
"prettier.trailingComma": "none",
"[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"
},
"workbench.colorTheme": "Bluloco Dark",
// 编辑器配置
"workbench.iconTheme": "material-icon-theme",
"workbench.editor.enablePreview": false,
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"vue-html": "html",
"javascript": "javascriptreact",
"wxml": "html"
},
// 搜索配置
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"gitlens.keymap": "alternate",
"explorer.confirmDragAndDrop": false,
"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"
}
},
"javascript.implicitProjectConfig.experimentalDecorators": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.vue": "vue"
},
// 微信小程序
"minapp-vscode.disableAutoConfig": true,
"gitlens.advanced.messages": {
"suppressShowKeyBindingsNotice": 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"
}
}
}
},
"less.compile": {
"outExt": "wxss"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"markdownlint.config": {
"MD001": false,
"MD024": false,
"MD033": false
},
"scm.defaultViewMode": "tree",
"settingsSync.ignoredSettings": [
"window.zoomLevel",
],
"cSpell.ignoreWords": [
"antd",
"ahooks"
]
}
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
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
