我的 VSCode 常用插件
Vue插件
- Vetur 是一款为 Vue2 编写的语法高亮、自动完成、格式化、错误检查等功能的插件。注意,次此插件与 Vue Language Features (Volar) 存在冲突,不能同时启用,如果是 Vue2 项目时建议禁用 Vue Language Features (Volar)
- Vue VSCode Snippets 是一款快速生成 Vue 代码片段的插件,支持 Vue2 和 Vue3
- Vue - Official,Vue官方插件,提供语法高亮、自动完成、格式化、错误检查等功能
uni-app插件
- uni-create-view 此插件可以快捷创建 uni-app 页面并添加到 pages.json,也可以快速创建 uni-app 组件
- uni-helper 是一款增强 uni-app 系列产品在 VSCode 内的开发体验的插件,此插件其实是以下五个插件的扩展包
- uni-app-schemas 校验 uni-app 中的 androidPrivacy.json、pages.json 和 manifest.json 格式
- uni-app-snippets 提供 uni-app 基本能力代码片段
- uni-cloud-snippets 提供 uni-cloud 基本能力代码片段
- uni-ui-snippets 提供 uni-ui 基本能力代码片段
- uni-highlight 在 VSCode 中对条件编译的代码注释部分提供了语法高亮
React插件
- Simple React Snippets 一款快速生成 React 代码片段的插件,不支持 Redux 和 RN
- ES7+ React/Redux/React-Native snippets 也是一款快速生成 React 代码片段的插件,支持 Redux 和 RN,此插件相当于补足了 Simple React Snippets 的缺失部分
- VSCode React Refactor 可以快速的对选择的代码段落进行提取重构
- react-taro-snippets 一款快速生成 Taro 页面代码片段的插件,支持 ts
- Antd Rush 此插件可以为 Ant Design 组件及属性显示对应官方文档
- vscode-styled-components 在 React 开发生态中提供 CSS in JS 解决方案的
styled-components
的官方插件
ReactNative插件
- React Native Tools 微软官方专门为 RN 在 VSCode 在中进行调试而开发的插件
- Expo Tools RN 的社区版脚手架
create-expo-app
在 VSCode 中的官方插件
CSS插件
- Autoprefixer 为 CSS 代码快速生成浏览器厂商前缀
- CSS Peek 快速查看项目中的 CSS 类名定义
- Stylelint CSS 代码风格校验插件
- Tailwind CSS IntelliSense TailwindCSS 的官方插件
HTML插件
- Auto Close Tag 标签自动闭合
- Auto Rename Tag 标签对自动改名
- Highlight Matching Tag 标签对高亮显示
- HTML CSS Support HTML 标签的 id 和 class 属性增强提示插件
- IntelliSense for CSS class names in HTML 智能感知项目中的 CSS 类名,并在 HTML 文件中进行提示
- WXML - Language Service 微信原生小程序的 .wxml 文件代码高亮,标签、属性的智能补全
JS/TS插件
- Code Runner 快速运行代码片段在终端中查看输出结果,除了 JS 以外还支持其他众多开发语言
- Import Cost 显示所导入的 npm 模块的大小
- JavaScript Snippet Pack 快速生成 JS 代码片段,不支持 ES6
- JavaScript (ES6) code snippets 快速生成 JS 代码片段,支持 ES6
- jQuery Code Snippets 快速生成 jQuery 代码片段
- Node.js Modules Intellisense 智能感知 NodeJs 模块,并在 import 或 require 的时候进行提示
- npm Intellisense 智能感知
node_modules
文件夹中的模块,并在 import 或 require 的时候进行提示 - Prisma NodeJS 社区中的下一代 ORM 框架 Prisma 的官方插件,提供语法高亮、自动完成、格式化、错误检查等功能
- Paste JSON as Code 根据 json 数据快速生成对应的类型声明,除了 JS 以外还支持其他众多开发语言
- Template String Converter 字符串和模板字符串快速转换
Flutter插件
- Dart Dart 官方插件,支持 Dart 编程语言,并提供用于有效编辑、重构、运行和重新加载 Flutter 移动应用程序的工具
- Dart (Syntax Highlighting Only) Dart 代码语法高亮提示
- Dart Data Class Generator Dart 数据模型生成器
- Flutter 提供在 VSCode 中编写和调试 Flutter 的支持
- Flutter Widget Snippets 快速生成 Flutter 代码片段
- Pubspec Assist Dart 和 Flutter 的依赖管理器
PHP插件
- PHP Intelephense PHP 代码智能提示
- PHP Server 启动一个本地的 PHP 服务器
- phpfmt - PHP formatter PHP 代码格式化插件
- PHP DocBlocker 快速生成 PHP 代码注解
- PHP Debug 提供在 VSCode 中调试 PHP 代码的支持
Git插件
- Git Graph 主要是用来显示
git log
- GitLens — Git supercharged 可以将各种常用的
git
命令通过 GUI 进行操作 - GitHub Pull Requests 处理PR用的
- Remote Repositories 此插件是配合
Azure Repos
和GitHub Repositories
使用的- Azure Repos 在 VSCode 中快速浏览和搜索任何远程 Azure 存储库
- GitHub Repositories 在 VSCode 中快速浏览、搜索、编辑和提交到任何远程 GitHub 存储库
Markdown插件
- Markdown All in One
- Markdown Preview Enhanced markdown 预览效果增强插件
- markdownlint markdown 语法校验插件
代码检查
- Code Spell Checker 变量名拼写检查,一般用来检查英文单词的变量
- EditorConfig for VS Code 在不同编辑器和 IDE 中,对项目中的代码文件的编码格式进行统一
- ESLint JS 代码风格校验插件
- Prettier - Code formatter 代码格式化插件
辅助开发工具
- any-rule 正则表达式大全
- Better Comments 注释增强和美化插件
- change-case 快速转换变量名的大小写
- Color Picker 可以在色盘中快速选择颜色的插件
- Error Lens 错误提示增强
- Image preview 通过图片的引入路径显示预览缩略图
- Image Sprites 不需要找 UI 也能合成精灵图
- Iconify IntelliSense Iconify系列图标快速预览
- Live Server 启动一个本地服务器
- Path Intellisense 在项目中自动补全文件路径名的插件
- Regex Previewer 快速检验正在表达式
- REST Client 在 VSCode 中进行 API 接口调试
- SVG 在 VSCode 中编辑 SVG 文件和各种增强功能
- SVG Previewer SVG 文件预览
数据填充
- Lorem ipsum 快速生成假文,由于 VSCode 内置的假文功能只支持 HTML 文件,而此插件可以用于各种文件
- vscode-faker 快速生成用例数据
运维
- Docker Docker 官方插件,提供在 VSCode 中管理镜像和容器的功能
- Dev Containers 提供在 Docker 容器中进行开发的能力
- Remote Explorer 远程资源管理器
- Remote - SSH 在 VSCode 中使用 SSH 连接服务器
- Remote - SSH: Editing Configuration Files 在 VSCode 中通过 SSH 连接远端服务器作为开发环境
- SFTP 在 VSCode 中使用 SFTP 上传文件到服务器
- WSL VSCode 的微软官方 WSL 插件
外观和色彩
- Carbon Product Icons 图标主题插件
- Catppuccin Icons for VSCode 图标主题插件
- Color Highlight 颜色值高亮可视化插件
- DotENV 环境变量配置文件的高亮显示
- Dracula Official VSCode 主题插件
- Material Icon Theme 根据项目中的文件后缀名或文件夹名字自动显示图标
- Todo Tree TODO 高亮提示
- YAML
.yaml
文件代码高亮提示
其他
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code VSCode 中文汉化包
- CodeGeeX: AI Code AutoComplete, Chat, Auto Comment 一款国产的 AI 语言模型
- Database Client JDBC 数据库管理
- Draw.io Integration 流程图绘制
- IntelliCode 微软官方的智能代码提示
- i18n Ally i18n国际化插件
- Project Manager 项目管理器
- Partial Diff 文本对比插件
- Redis Redis管理
- WakaTime 开发行为记录
我的VSCode用户配置
查看
json
{
// ========== 外观配置 ==========
"editor.cursorSmoothCaretAnimation": "on",
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
"editor.guides.bracketPairs": "active",
"editor.lineNumbers": "interval",
"editor.renderWhitespace": "boundary",
"window.autoDetectColorScheme": true,
"window.dialogStyle": "custom",
"window.nativeTabs": true, // this is great, macOS only
"window.title": "${rootName}", // this make tabs more readable
"workbench.colorTheme": "Dracula",
"workbench.colorCustomizations": {
"editorIndentGuide.activeBackground1": "#ff0000"
},
"workbench.editor.tabActionLocation": "left",
"workbench.fontAliasing": "antialiased",
"workbench.iconTheme": "catppuccin-mocha",
"workbench.list.smoothScrolling": true,
"workbench.preferredDarkColorTheme": "Dracula",
"workbench.preferredLightColorTheme": "Dracula Soft",
"workbench.sideBar.location": "right",
"workbench.startupEditor": "newUntitledFile",
"workbench.tree.indent": 10,
// ========== 编辑器配置 ==========
"css.validate": false,
"css.lint.hexColorLength": "ignore",
"css.lint.unknownAtRules": "ignore",
"less.validate": false,
"less.lint.unknownAtRules": "ignore",
"scss.validate": false,
"scss.lint.unknownAtRules": "ignore",
"debug.onTaskErrors": "debugAnyway",
"diffEditor.ignoreTrimWhitespace": false,
"editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
"editor.find.addExtraSpaceOnTop": false,
"editor.unicodeHighlight.invisibleCharacters": false,
"editor.autoClosingBrackets": "always",
"editor.cursorBlinking": "smooth",
"editor.copyWithSyntaxHighlighting": false,
"editor.linkedEditing": true,
"editor.snippetSuggestions": "top",
"editor.wordBasedSuggestions": "off",
"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 30,
"editor.minimap.size": "fit",
"editor.tabSize": 2,
"editor.wordWrapColumn": 120,
"editor.wordWrap": "bounded",
"editor.quickSuggestions": {
"strings": "on"
},
// 不要同时开启editor.formatOnSave和source.fixAll.eslint,这样会导致两次lint检查
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll": "never",
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"extensions.ignoreRecommendations": true,
"extensions.autoUpdate": "onlyEnabledExtensions",
"files.eol": "\n",
"files.insertFinalNewline": true,
"files.simpleDialog.enable": true,
"git.autofetch": true,
"git.confirmSync": false,
"git.enableSmartCommit": true,
"git.untrackedChanges": "separate",
"git.ignoreLimitWarning": true,
"git.path": "D:/Develop/Git/bin/git.exe",
"javascript.suggest.paths": false,
"typescript.suggest.paths": false,
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"typescript.tsdk": "./node_modules/typescript/lib",
"typescript.updateImportsOnFileMove.enabled": "always",
"php.validate.executablePath": "D:/Develop/PHP74/php.exe",
"php.suggest.basic": false,
"python.pythonPath": "D:/Develop/Python/python.exe",
"python.linting.enabled": false,
"python.formatting.provider": "yapf",
"python.linting.flake8Enabled": true,
"python.linting.flake8Args": ["--max-line-length=248"],
"scm.diffDecorationsGutterWidth": 2,
"search.followSymlinks": false,
"security.workspace.trust.untrustedFiles": "open",
"terminal.external.windowsExec": "D:/Develop/Git/bin/bash.exe",
"terminal.integrated.automationProfile.windows": {
"path": "D:/Develop/Git/bin/bash.exe"
},
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.cursorStyle": "line",
"terminal.integrated.fontWeight": "300",
"terminal.integrated.defaultProfile.windows": "Git-Bash",
"terminal.integrated.persistentSessionReviveProcess": "never",
"terminal.integrated.profiles.windows": {
"Git-Bash": {
"path": "D:/Develop/Git/bin/bash.exe",
"args": []
}
},
"workbench.editor.closeOnFileDelete": true,
"workbench.editor.highlightModifiedTabs": true,
"workbench.editor.limit.enabled": true,
"workbench.editor.limit.perEditorGroup": true,
"workbench.editor.limit.value": 5,
// VScode 文件搜索排除区域
"search.exclude": {
"**/*.snap": true,
"**/*.svg": true,
"**/.git": true,
"**/.github": false,
"**/.nuxt": true,
"**/.umi": true,
"**/.output": true,
"**/.pnpm": true,
"**/.vscode": true,
"**/.yarn": true,
"**/assets": true,
"**/bower_components": true,
"**/dist/**": true,
"**/logs": true,
"**/node_modules": true,
"**/out/**": true,
"**/package-lock.json": true,
"**/pnpm-lock.yaml": true,
"**/public": true,
"**/temp": true,
"**/yarn.lock": true,
"**/CHANGELOG*": true,
"**/LICENSE*": true
},
// 配置文件关联
"files.associations": {
"*.html": "html",
"*.vue": "vue",
"*.nvue": "vue",
"*.css": "tailwindcss",
"*.scss": "css",
"*.sass": "css",
"*.wxs": "javascript",
"*.js": "javascript",
"*.jsx": "javascriptreact",
"*.php": "php",
"*.json": "jsonc",
"*.wxss": "css",
"*.wxml": "wxml",
"*.cjson": "jsonc"
},
// 隐藏一些碍眼的文件夹
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/tmp": true,
"**/bower_components": true
},
// 排除掉一些不必要索引的大文件夹以减少内存和CPU消耗
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/**": true,
"**/tmp/**": true,
"**/bower_components/**": true,
"**/dist/**": true
},
// ========== 插件配置 ==========
"auto-rename-tag.activationOnLanguage": [
"html",
"xml",
"php",
"javascript",
"javascriptreact",
"typescriptreact"
],
"Codegeex.Privacy": true,
"code-runner.clearPreviousOutput": true,
"code-runner.defaultLanguage": "javascript",
"code-runner.runInTerminal": true,
"code-runner.saveAllFilesBeforeRun": true,
"code-runner.executorMap": {
"javascript": "node",
"typescript": "tsc $fileName && node $fileNameWithoutExt.js",
"php": "php",
"python": "D:/Develop/Python/python.exe"
},
"cSpell.allowCompoundWords": true,
"cSpell.language": "en,en-US",
"dart.hotReloadOnSave": "manual",
"emmet.showSuggestionsAsSnippets": true,
"emmet.triggerExpansionOnTab": false,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"wxml": "html",
"vue-html": "html"
},
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"wxml": "html",
"javascript": "jsx"
},
"errorLens.enabledDiagnosticLevels": ["warning", "error"],
"errorLens.excludeBySource": ["cSpell", "Grammarly", "eslint"],
// ESLint config: https://github.com/antfu/eslint-config
"eslint.codeAction.showDocumentation": {
"enable": true
},
"eslint.format.enable": false,
"eslint.options": {
"configFile": ".eslintrc",
"extensions": [".html", ".vue", ".css", ".scss", ".js", ".ts", ".jsx", ".tsx"]
},
"eslint.quiet": true,
// Silent the stylistic rules in you IDE, but still auto fix them
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off" },
{ "rule": "format/*", "severity": "off" },
{ "rule": "*-indent", "severity": "off" },
{ "rule": "*-spacing", "severity": "off" },
{ "rule": "*-spaces", "severity": "off" },
{ "rule": "*-order", "severity": "off" },
{ "rule": "*-dangle", "severity": "off" },
{ "rule": "*-newline", "severity": "off" },
{ "rule": "*quotes", "severity": "off" },
{ "rule": "*semi", "severity": "off" }
],
"eslint.run": "onSave",
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml"
],
"githubIssues.workingIssueFormatScm": "#${issueNumberLabel}",
"githubPullRequests.fileListLayout": "tree",
"gitlens.codeLens.authors.enabled": false,
"gitlens.codeLens.enabled": false,
"gitlens.codeLens.recentChange.enabled": false,
"gitlens.menus": {
"editor": {
"blame": false,
"clipboard": true,
"compare": true,
"history": false,
"remote": false
},
"editorGroup": {
"blame": true,
"compare": false
},
"editorTab": {
"clipboard": true,
"compare": true,
"history": true,
"remote": true
},
"explorer": {
"clipboard": true,
"compare": true,
"history": true,
"remote": true
},
"scm": {
"authors": true
},
"scmGroup": {
"compare": true,
"openClose": true,
"stash": true
},
"scmGroupInline": {
"stash": true
},
"scmItem": {
"clipboard": true,
"compare": true,
"history": true,
"remote": false,
"stash": true
}
},
"html-css-class-completion.includeGlobPattern": "**/*.{css,scss,sass,less,html}",
"html-css-class-completion.excludeGlobPattern": "**/node_modules/*.*",
"i18n-ally.autoDetection": false,
"i18n-ally.displayLanguage": "en",
"i18n-ally.ignoredLocales": [],
"iconify.annotations": true,
"iconify.inplace": true,
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.useWebExt": true,
"minapp-vscode.disableAutoConfig": true,
"prettier.printWidth": 200,
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"react-native-tools.showUserTips": false,
"stylelint.enable": true,
"stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
"svg.preview.mode": "svg",
"tailwindCSS.classAttributes": ["class", "className", "ngClass", "ui"],
"tailwindCSS.includeLanguages": {
"plaintext": "html"
},
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)",
["tw.style\\(([^)]*)\\)", "'([^']*)'"],
["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
["/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
],
"vue.server.hybridMode": false, // 解决vue的代码提示出现两次的问题
// ========== 格式化关联配置 ==========
"[css]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "Vue.volar"
},
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[php]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
},
"[dart]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "Dart-Code.dart-code",
"editor.selectionHighlight": true,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": "off"
},
"[prisma]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "Prisma.prisma"
}
}