Appearance
常见问题
文件改名后不能自动导入
修改以下 vscode 配置项
插件性能查看
查看运行慢的插件
执行结果如下
Emmet 提示慢
如果在 vue 等文件中出现输入 html 标签需要很长时间才出现代码提示,通过以下配置可以优化速度。
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"vue": "html"
},
"emmet.excludeLanguages": [
"!**/node_modules/**"
"markdown"
]
cpu 占用高
vscode 会在后台监测文件,可能会出现以下进程 cpu 占用过高,造成电脑发热严重
在 vscode 配置中修改以下配置项,将 node_modules 等扩展包目录排除掉
- files.exclude
- search.exclude
- files.watcherExclude
下面是向军大叔的配置
"intelephense.files.exclude": [
"**/.git/**",
"**/.svn/**",
"**/.hg/**",
"**/CVS/**",
"**/.DS_Store/**",
"**/node_modules/**",
"**/bower_components/**",
"**/vendor/**/{Tests,tests}/**",
"**/.history/**",
"**/vendor/**/vendor/**",
"**/dist/**"
],
"files.exclude": {
"*.code-workspace": true,
"**/dist": true,
"**/node_modules": true,
"**/public/js/app.js": true,
"**/unpackage": true,
"**/vendor.js": true,
".github": true,
".vscode": true
},
"files.watcherExclude": {
"**/dist/**": true,
"**/node_modules/**": true,
"**/node_modules/*/**": false,
"**/vendor/**": true
},
"search.exclude": {
"*.code-workspace": true,
"**/dist": true,
"**/vendor": true,
"**/node_modules": true
}
移除不需要的 import
我们希望在保存时移除不需要的 import ,我提供两种方式
热键定义
查找热键定义 organizeImports
,然后设置为你想要的热键
全局配置定义
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
换行设置
设置HTML 标签前后自动换行,访问设置 > 扩展 〉HTML
进行配置
如果要将 HTML 的属性对齐排列,请在设置 > 扩展 〉HTML
中进行设置
折叠 import
前端头部的 import 语句可以通过设置 foldingImportsByDefault
属性为 true,对其进行折叠。
原来
折叠后
折叠 tailwindcss 属性
安装 Tailwind Fold 插件后,可以折叠 tailwindcss 的属性。需要在 vscode 中设置 tailwind-fold.autoFold 属性。