vscode插件
Vue - Official - Vue3必装
Vue3的IDE插件，volar不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。
曾用名：Vue Language Features (Volar)
注意：使用时需要禁用 Vetur 插件,Volar与它会有冲突
Vue 3 Snippets - Vue3选装
Vue 3 Snippets插件为VSCode提供了丰富的Vue3代码片段，可以让我们在编写代码时更加迅速。。比如，只需输入vtemplate，然后按下Tab键，即可自动生成一个Vue模板的代码片段。此外，该插件还支持自定义代码片段，可以根据自己的需求进行扩展。
Vetur - Vue2必装
vue2的IDE插件
Prettier - Code formatter - 必装
可格式化代码，使项目具备统一的编码风格
Chinese (Simplified) (简体中文) Language Pack for Visual - 必装
这是微软官方提供的 Visual Studio Code 语言包，专门为中文（简体）用户设计。它将 VSCode 的用户界面翻译为中文，使得软件更加友好和易于使用。此外，它还支持语法高亮、代码提示等功能，以适应中文开发环境，提供更好的用户体验。
CSS Variable Autocomplete - 建议选装
使用 CSS 变量很麻烦，此扩展通过提供自动完成、颜色预览和转到定义等高级功能增强了 Web 开发体验
Stylelint - 建议选装
样式规范插件，用于项目中引入了Stylelint时可进行样式校验
ESLint - 建议选装
代码规范插件，用于项目中引入了ESLint时可进行代码校验
i18n Ally - 部分情况建议
如果项目引入了国际化依赖，可使用这个插件优化显示效果，大大提高开发效率。
GitLens - 部分情况建议
它提供了强大的 Git 集成功能，包括文件注释、比较和提交历史，有助于更好地管理和理解版本控制。
注：如果您的项目过大，可能好几个GB这种，就不推荐装这个插件，有可能会造成打开文件及修改代码卡顿，因为这个插件特别吃内存，正常情况下的项目不会卡顿，当然如果你的战机性能较好，就不必烦恼这个。
Git History - 选装
它允许您在 VSCode 中轻松查看文件的 Git 历史记录，帮助您理解代码的演变过程。
Git Graph - 选装
它是一个强大的 Git 可视化工具，用于在 Visual Studio Code 中查看和理解 Git 仓库的历史和分支结构。它允许您直观地浏览提交记录、合并请求以及分支之间的关系。您可以轻松地了解项目的发展情况，查看谁提交了哪些更改，以及何时进行了合并等操作。这对于团队协作和代码维护非常有帮助。
Color Highlight - 建议选装
让代码中的颜色高亮
Bracket Pair Colorizer - 建议选装
让代码中的括号有对应的颜色，有助于读代码
Auto Rename Tag - 建议选装
重命名html或者组件标签时，会同步更改结束标签
Auto Complete Tag - 建议选装
编写html或者组件标签时，自动完成标签的编码
Auto Close Tag - 建议选装
编写html或者组件标签时，自动完成结束标签的编码
CSS Peek - 选装
可定位css类名的声明位置
DotENV - 选装
可优化.env文件的显示效果
CodeMetrics - 选装
可帮助你计算函数的时间复杂度的插件，用于算法优化
WindiCSS IntelliSense - 选装
搭配WindiCSS使用，如果你的项目使用了WindiCSS，使用它是明智之选
Markdown All in One - 选装
如果您经常使用 Markdown 编写文档，它将成为您的好帮手，提供了丰富的 Markdown 编辑功能和预览功能
One Dark Pro - 选装
可让IDE定制自己喜欢的样式及字体风格
vscode-icons - 选装
项目文件夹图标库，开发舒服点而已
Todo+ - 选装
统计项目中存在的所有代办项，您可以在项目中添加注释TODO:，这个插件会自动识别代码中的这个注释，UI面板可以统计你加入项目中的所有代办项。
TODO Highlight - 选装
您可以在项目中添加注释TODO:，这个插件会自动识别代码中的这个注释，加上高亮
vscode settings配置文件
根据以上安装的所有插件配置的通用配置及常用的vscode配置，如有特殊需要可自行配置
{
// workbench
// 启用工作区列表的平滑滚动效果，使滚动更加流畅
"workbench.list.smoothScrolling": true,
// 设置启动时打开的编辑器为新的无标题文件
"workbench.startupEditor": "newUntitledFile",
// 设置工作区树的缩进为10个像素，影响文件和文件夹在资源管理器中的显示缩进
"workbench.tree.indent": 10,
// 启用编辑器选项卡的高亮显示，当文件被修改时，对应的选项卡会高亮显示
"workbench.editor.highlightModifiedTabs": true,
// 当文件被删除时，自动关闭对应的编辑器选项卡
"workbench.editor.closeOnFileDelete": true,
// 启用编辑器限制功能
"workbench.editor.limit.enabled": true,
// 限制每个编辑器组中的编辑器数量
"workbench.editor.limit.perEditorGroup": true,
// 设置每个编辑器组中最多允许打开10个编辑器选项卡
"workbench.editor.limit.value": 10,
// editor
// 设置编辑器的制表符大小为2个空格
"editor.tabSize": 2,
// 禁用自动检测缩进
"editor.detectIndentation": false,
// 设置光标闪烁样式为扩展
"editor.cursorBlinking": "expand",
// 禁用大型文件优化
"editor.largeFileOptimizations": false,
// 关闭编辑器的辅助功能支持
"editor.accessibilitySupport": "off",
// 启用光标平滑动画
"editor.cursorSmoothCaretAnimation": "on",
// 启用括号对的颜色化
"editor.guides.bracketPairs": "active",
// 启用内联建议
"editor.inlineSuggest.enabled": true,
// 设置建议选择为最近使用的前缀
"editor.suggestSelection": "recentlyUsedByPrefix",
// 设置在按下Enter键时智能接受建议
"editor.acceptSuggestionOnEnter": "smart",
// 禁用代码片段阻止快速建议
"editor.suggest.snippetsPreventQuickSuggestions": false,
// 启用粘性滚动
"editor.stickyScroll.enabled": true,
// 启用悬停时的粘性
"editor.hover.sticky": true,
// 设置建议插入模式为替换
"editor.suggest.insertMode": "replace",
// 启用括号对的颜色化
"editor.bracketPairColorization.enabled": true,
// 设置自动闭合括号的位置为空格前
"editor.autoClosingBrackets": "beforeWhitespace",
// 设置自动删除闭合括号的行为为始终
"editor.autoClosingDelete": "always",
// 设置自动覆盖闭合括号的行为为始终
"editor.autoClosingOvertype": "always",
// 设置自动闭合引号的位置为空格前
"editor.autoClosingQuotes": "beforeWhitespace",
// 设置单词分隔符
"editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
// 设置保存时的代码操作
"editor.codeActionsOnSave": {
// 显式修复所有ESLint问题
"source.fixAll.eslint": "explicit",
// 显式修复所有Stylelint问题
"source.fixAll.stylelint": "explicit",
// 从不组织导入
"source.organizeImports": "never"
},
// 设置默认的格式化程序为Prettier
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 设置HTML文件的默认格式化程序为Prettier
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 设置CSS文件的默认格式化程序为Prettier
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 设置SCSS文件的默认格式化程序为Prettier
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 设置JavaScript文件的默认格式化程序为Prettier
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 设置TypeScript文件的默认格式化程序为Prettier
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 设置JSON文件的默认格式化程序为Prettier
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 设置Markdown文件的默认格式化程序为Prettier
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 设置JSONC文件的默认格式化程序为Prettier
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 设置Vue文件的默认格式化程序为Prettier
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// extensions
// 忽略扩展推荐
"extensions.ignoreRecommendations": true,
// terminal
// 启用终端光标闪烁
"terminal.integrated.cursorBlinking": true,
// 从不恢复终端会话进程
"terminal.integrated.persistentSessionReviveProcess": "never",
// 启用终端选项卡
"terminal.integrated.tabs.enabled": true,
// 设置终端滚动缓冲区大小为10000行
"terminal.integrated.scrollback": 10000,
// 启用终端粘性滚动
"terminal.integrated.stickyScroll.enabled": true,
// files
// 设置文件的行尾符为LF（Unix风格）
"files.eol": "\n",
// 在保存文件时插入一个最终的换行符
"files.insertFinalNewline": true,
// 启用简单的文件对话框
"files.simpleDialog.enable": true,
// 设置文件关联，将特定扩展名的文件关联到特定的语言模式
"files.associations": {
"*.ejs": "html",
"*.art": "html",
"**/tsconfig.json": "jsonc",
"*.json": "jsonc",
"package.json": "json"
},
// 设置文件排除规则，隐藏特定的文件和文件夹
"files.exclude": {
"**/.eslintcache": true,
"**/bower_components": true,
"**/.turbo": true,
"**/.idea": true,
"**/tmp": true,
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.stylelintcache": true,
"**/.DS_Store": true,
"**/vite.config.mts.*": true,
"**/tea.yaml": true
},
// 设置文件监视器排除规则，不监视特定的文件和文件夹
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/.vscode/**": true,
"**/node_modules/**": true,
"**/tmp/**": true,
"**/bower_components/**": true,
"**/dist/**": true,
"**/yarn.lock": true
},
// search
"search.searchEditor.singleClickBehaviour": "peekDefinition",
"search.followSymlinks": false,
// 在使用搜索功能时，将这些文件夹/文件排除在外
"search.exclude": {
"**/node_modules": true,
"**/*.log": true,
"**/*.log*": true,
"**/bower_components": true,
"**/dist": true,
"**/elehukouben": true,
"**/.git": true,
"**/.github": true,
"**/.gitignore": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.vitepress/cache": true,
"**/.idea": true,
"**/.vscode": false,
"**/.yarn": true,
"**/tmp": true,
"*.xml": true,
"out": true,
"dist": true,
"node_modules": true,
"CHANGELOG.md": true,
"**/pnpm-lock.yaml": true,
"**/yarn.lock": true
},
// 调试任务出错时，仍然进行调试
"debug.onTaskErrors": "debugAnyway",
// 启用差异编辑器时，忽略空格差异
"diffEditor.ignoreTrimWhitespace": false,
// 设置npm的包管理器为pnpm
"npm.packageManager": "pnpm",
// 禁用CSS、LESS、SCSS的验证
"css.validate": false,
"less.validate": false,
"scss.validate": false,
// extension
// 启用Emmet建议作为代码片段显示
"emmet.showSuggestionsAsSnippets": true,
// 禁用在Tab键上触发Emmet扩展
"emmet.triggerExpansionOnTab": false,
// 启用Stylelint
"stylelint.enable": true,
// 设置Stylelint的包管理器为pnpm
"stylelint.packageManager": "pnpm",
// 设置Stylelint验证的文件类型
"stylelint.validate": ["css", "less", "postcss", "scss", "vue"],
// 设置Stylelint的自定义语法
"stylelint.customSyntax": "postcss-html",
// 设置Stylelint的代码片段类型
"stylelint.snippet": ["css", "less", "postcss", "scss", "vue"],
// 启用TypeScript的内联提示
"typescript.inlayHints.enumMemberValues.enabled": true,
// 优先使用类型导入
"typescript.preferences.preferTypeOnlyAutoImports": true,
// 包含package.json的自动导入
"typescript.preferences.includePackageJsonAutoImports": "on",
// 设置ESLint验证的文件类型
"eslint.validate": [
"javascript",
"typescript",
"javascriptreact",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"json5"
],
// 设置CSS变量的查找文件路径
"cssVariables.lookupFiles": ["packages/core/base/design/src/**/*.css"],
// 设置i18n-ally的语言文件路径
"i18n-ally.localesPaths": [
"packages/locales/src/langs",
"playground/src/locales/langs",
"apps/*/src/locales/langs"
],
// 设置i18n-ally的路径匹配模式
"i18n-ally.pathMatcher": "{locale}/{namespace}.{ext}",
// 设置i18n-ally启用的解析器
"i18n-ally.enabledParsers": ["json"],
// 设置i18n-ally的源语言
"i18n-ally.sourceLanguage": "en",
// 设置i18n-ally的显示语言
"i18n-ally.displayLanguage": "zh-CN",
// 设置i18n-ally启用的框架
"i18n-ally.enabledFrameworks": ["vue", "react"],
// 设置i18n-ally的键样式为嵌套
"i18n-ally.keystyle": "nested",
// 启用i18n-ally的键排序
"i18n-ally.sortKeys": true,
// 启用i18n-ally的命名空间
"i18n-ally.namespace": true,
// 启用资源管理器的文件嵌套功能
"explorer.fileNesting.enabled": true,
// 禁用资源管理器的文件嵌套展开
"explorer.fileNesting.expand": false,
// 设置资源管理器的文件嵌套模式
"explorer.fileNesting.patterns": {
"*.ts": "$(capture).test.ts, $(capture).test.tsx, $(capture).spec.ts, $(capture).spec.tsx, $(capture).d.ts",
"*.tsx": "$(capture).test.ts, $(capture).test.tsx, $(capture).spec.ts, $(capture).spec.tsx,$(capture).d.ts",
"*.env": "$(capture).env.*",
"README.md": "README*,CHANGELOG*,LICENSE,CNAME",
"package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
"eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
"tailwind.config.mjs": "postcss.*"
},
// 启用Vue服务器的混合模式
"vue.server.hybridMode": true,
// 设置TypeScript的SDK路径
"typescript.tsdk": "node_modules/typescript/lib",
// 设置工作区的颜色主题为One Dark Pro
"workbench.colorTheme": "One Dark Pro",
// 设置Windows终端的配置文件
"terminal.integrated.profiles.windows": {
"GitBash": {
"path": "C:\\Program Files\\Git\\bin\\bash.exe" //注意是bash.exe而不是git-bash.exe
}
},
// 设置Windows终端的默认配置文件为GitBash
"terminal.integrated.defaultProfile.windows": "GitBash",
// 禁用vsicons的新版本提示消息
"vsicons.dontShowNewVersionMessage": true,
// 设置工作区的图标主题为vscode-icons
"workbench.iconTheme": "vscode-icons",
// 启用Git的自动获取功能
"git.autofetch": true,
// 设置cSpell的用户自定义单词
"cSpell.userWords": ["oper"]
}
