--- theme: nico --- # 前言 > 前方高能,长文警告!! ![vue-snippet-hero.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a40d31a6eee34878add5e2b1a7477ff0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=800\&h=402\&s=50742\&e=gif\&b=01b0f0) 个人比较喜欢在一个集成的平台上进行各种开发, **vscode**正好满足我的需求,下面我会介绍一些我比较常用的插件. 插件类型速览: * `主题插件`、`基础插件`、`Vue插件`、`react插件`、`小程序插件`、`代码格式化`... # 主题 * `Monokai Pro` * 同时提供 **配色主题**和**文件主题**,看起来比较舒服. * 配色方案有多种,用`ctrl+k+t`快速选择主题 ![monokai-pro.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/819a3347766b45d3ad80d1d429d4c4fb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2560&h=1467&s=1259158&e=png&a=1&b=2a272b) # 基础插件 * `HTML CSS Support` * 提供**html**和**css**的代码高亮和提示,必备插件 * `JavaScript (ES6) code snippets` * **vscode**本身有内置**js**的代码提示,装一个**JavaScript (ES6) code snippets**用来提示代码片段就够了. ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8dfe2c5e28a4b799c66f97f61b6452d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2560&h=1467&s=2640829&e=png&a=1&b=2a272b) # Vue插件推荐 ## Vue - Official 开发 **vue**项目必备的插件,代码的高亮和智能提示全靠它了. 注:之前使用的是Volar,已经废弃了,现在使用的是Vue - Official

安装之后的样子

## Vue Peek 在大型的**Vue**项目中如果想要快速跳转到某一个组件去,需要找很久才能找到.非常浪费时间这个插件就完美解决这个问题 ![Demo](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70691d0e1d9148a58e455eb4c163ab87~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=747\&h=355\&s=392329\&e=gif\&f=171\&b=000c18) >注: 虽然`vscode`也是可以直接ctrl+鼠标的方式跳转文件,但是这个插件还有一些额外的功能,直接悬浮窗查看文件内容. 之类的, 所以是否要安装还是看自己有没有需要. ## Vue VSCode Snippets 这个插件提供一些`Vue`的代码片段,在日常开发中,可以节省很多时间 SnippetDemo

# React > react本身用的 **jsx和tsx**可以被 **vscode**识别到,所以不像 **vue**那样还需要装高亮插件. ## Simple React Snippets **react**的代码片段插件,这个插件里面有很多**react**的代码片段,写新文件的时候可以用来快速生成代码. ![snippets-in-action.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49a8acf231d8471fa62e23ea9d50795f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1280&h=720&s=6125439&e=gif&f=153&b=fbfbf9) ## Typescript React code snippets **typescript**版本的**react**的代码片段. ## ES7+ React/Redux/React-Native snippets 也是一个 **react**代码片段的插件, # 小程序 > 平常开发主要用到的是**Uniapp**,所以插件类型也主要偏向**uniapp** ## uni-helper 在 **vscode**上面开发 **uniapp**只需要装一个这个插件即可,这个插件是一个拓展包会把其他和 **uniapp**有关的插件也安装下来,提供 **uniapp**标签的代码提示,代码高亮等相关功能.

# 代码格式化 > 代码格式化主要就是 **Prettier**和 **Eslint** ## Prettier - Code formatter ![Prettier - Code formatter](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce1fbfe66b46412796fac5d8d4a41bcb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=128\&h=128\&s=5417\&e=png\&b=1a2b34) 用来格式化代码,搭配项目中的**prettier**配置文件使用. 在 **settings.json**中也需要配置一下 ```json "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript|react]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript|react]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "Vue.volar" }, "prettier.configPath": ".prettierrc.js", ``` ## Eslint ESLint

**eslint**,用来做一些代码检查,和 **prettier**不一样在于, **prettier**注重于代码的格式化,**eslit**则侧重于代码的语法风格. **eslint**和 **prettier**二者搭配使用 # 数据库 > 正常开发中我们使用的数据库可视化工具都是 **navicat**、**dbeaver**,但**vscode**中也有很多插件,也可以做到类似的效果 ## SQL Tools ![SQLTools](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fbd5e517730a4d70afb771de3b90bdfd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=128\&h=128\&s=10814\&e=png\&a=1\&b=f0df46) 这个插件支持的数据库种类很多,日常开发需要的数据库基本上都可以覆盖到

## MongoDB for VS Code

上面那个插件中没有 **mongodb**的插件如果想要看 **mongodb**就需要**MongoDB for VS Code**这个插件来辅助 ## Redis

想要在 **vscode**中使用 **redis**就需要这个插件.具体的效果和 **sql tools**差不多. # 其他插件 ## Better Comments Annotated code

以不同的颜色高亮注释,如果需要自定义可以在 **settings.json**中写入配置来进行自定义配置例子: ```json "better-comments.tags": [ { "tag": "!", "color": "#FF2D00", "strikethrough": false, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false }, { "tag": "?", "color": "#3498DB", "strikethrough": false, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false }, { "tag": "//", "color": "#474747", "strikethrough": true, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false }, { "tag": "todo", "color": "#FF8C00", "strikethrough": false, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false }, { "tag": "*", "color": "#98C379", "strikethrough": false, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false } ] ``` ## Turbo Console Log ![Turbo Console Log](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31f35b7cb538436d94217a02dd532db0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=128\&h=128\&s=11157\&e=png\&a=1\&b=f89d26)

平常开发打印`console.log`最少都要敲`2~3`按键,还需要输入对应的参数,并且也不是很美观这个插件可以设置模板,只需要按下快捷键就可以快速的打印出上面的这种 `console.log` ## Console Ninja 这个插件可以,直接在你的`vscode`里面就输出 `console.log` 结果,提高不少效率,不用每次都去看控制台 ![docs-main](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/127675627ea2436d84d2c696f2214cd6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960\&h=540\&s=2998626\&e=gif\&f=293\&b=1e1e1e) ## Path Intellisense 自动补全路径的插件,在项目结构比较深的时候这个工具就很好用了 ![IDE](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f8de397f33040b49ea68694dbc3f783~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=480\&h=270\&s=87934\&e=gif\&f=95\&b=242124) ## git相关 * `Git Graph`: * `GitLens — Git supercharged` 两个功能强大的 `git`工具,比 `vscode`自带的好用不少 ## Project Manager > 注: vscode里面的最近打开功能,可以平替这个插件,但是这个插件会根据存储的项目生成一份json文件,迁移到新电脑的时候,可以把文件拷过去,稍作修改,就可以直接还原之前的项目管理信息.如果有需要还是可以安装的,不需要的话,直接用最近打开这个就好. ![Project Manager Logo](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f4bb6aa27ec4a6989ed390b4a62c957~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1000\&h=230\&s=35543\&e=png\&a=1\&b=1580fb) 非常好用的一个插件,可以保存项目,方便下次打开项目,在项目多的情况下,非常的好用. 具体的效果可以看插件的介绍

## vite ![109450296-87a66480-7a85-11eb-985c-5dc63ba3e229.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72be0d1d152f49ebaa29cffecc0352a2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1972&h=1558&s=7238975&e=gif&f=300&b=fefefe) 功能很多: * 启动本地服务器 * 快速启动项目 * 内置浏览器显示项目内容替代了`Live Server`在我插件列表中的位置 ## vscode-mindmap ![image-20240225195258753](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c29fdd2d866442048e3b75a42d481548~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=845\&h=445\&s=58416\&e=png\&b=fdfdfd) 在一些特殊情况下,需要快速画一些流程图、思维导图的时候比较好用,只要创建 **.km**文件就可以,还支持打开 `.xmid`文件. ## VSCode Animations ![Demo.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b648a066e98483e88ef3b02608b353a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=800&h=450&s=4788819&e=gif&f=423&b=000000) 这个插件配置完成之后,让 `vscode`的体验整体上升了一个档次,吃了德芙一样丝滑,我最喜欢的插件之一 ## Bookmarks ![列表](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b61aebd0dbd34d7694599c148f0a6201~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=662\&h=448\&s=2487127\&e=gif\&f=205\&b=23282f) 一个书签插件,在项目比较大的情况下,如果有一些功能的在不同的 `文件`中,需要下次去修改,用这个插件标记一下,是一个不错的选择 # 配置文件 ```json { "workbench.layoutControl.enabled": false, "window.commandCenter": false, "window.menuBarVisibility": "compact", "security.workspace.trust.untrustedFiles": "open", "editor.scrollbar.scrollByPage": true, "editor.smoothScrolling": true, "explorer.confirmDelete": false, "explorer.confirmDragAndDrop": true, "git.confirmSync": false, "editor.fontVariations": false, "workbench.startupEditor": "none", "editor.acceptSuggestionOnCommitCharacter": false, "editor.fontSize": 16, "search.followSymlinks": false, "search.useIgnoreFiles": false, "typescript.tsserver.maxTsServerMemory": 12288, "git.autorefresh": false, "editor.fontWeight": "bold", "editor.codeLensFontFamily": "'Monaspace Radon'", "editor.fontFamily": "'Monaspace Radon'", "debug.console.fontFamily": "FiraCode Nerd Font", "editor.fontLigatures": true, "explorer.compactFolders": false, "typescript.format.enable": false, "editor.formatOnSave": true, "extensions.ignoreRecommendations": true, "files.autoSave": "afterDelay", "editor.defaultFormatter": "esbenp.prettier-vscode", "emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true, "editor.cursorBlinking": "smooth", "editor.cursorStyle": "block", "editor.cursorSmoothCaretAnimation": "on", "workbench.list.smoothScrolling": true, "diffEditor.ignoreTrimWhitespace": false, // 保存后自动修复格式 "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, // 添加vue支持 "eslint.validate": ["javascript", "javascriptreact", "vue"], "files.eol": "\n", "eslint.format.enable": true, "editor.linkedEditing": true, "typescript.disableAutomaticTypeAcquisition": true, "files.associations": { "*.json": "jsonc" }, "window.zoomLevel": -1, "px-to-rpx.autoRemovePrefixZero": true, "px-to-rpx.baseWidth": 375, "px-to-rpx.fixedDigits": 2, "javascript.updateImportsOnFileMove.enabled": "never", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript|react]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript|react]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "Vue.volar" }, "prettier.configPath": ".prettierrc.js", "update.mode": "default", "workbench.tree.enableStickyScroll": true, "turboConsoleLog.logMessagePrefix": "👉", "terminal.integrated.smoothScrolling": true, "[javascriptreact]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "editor.inlayHints.fontFamily": "'Monaspace Radon'", "animations.Install-Method": "Apc Customize UI++", "vite.autoStart": false, "apc.imports": [ "file:///c:/Users/cathe/.vscode/extensions/brandonkirbyson.vscode-animations-2.0.1/dist/updateHandler.js" ], "animations.Enabled": true, "workbench.iconTheme": "Monokai Pro (Filter Machine) Icons", "workbench.colorTheme": "Monokai Pro (Filter Machine)", "terminal.integrated.env.windows": {}, "console-ninja.featureSet": "Community" } ```