打造舒适的vscode开发环境

❝

前方高能,长文警告!!

❞

vue-snippet-hero.gif

个人比较喜欢在一个集成的平台上进行各种开发, **「vscode」**正好满足我的需求,下面我会介绍一些我比较常用的插件.

插件类型速览:

主题插件、基础插件、Vue插件、react插件、小程序插件、代码格式化...
Monokai Pro
同时提供 「配色主题」和「文件主题」,看起来比较舒服.
配色方案有多种,用ctrl+k+t快速选择主题

monokai-pro.png

HTML CSS Support
提供**「html」和「css」**的代码高亮和提示,必备插件
JavaScript (ES6) code snippets
**「vscode」本身有内置「js」的代码提示,装一个「JavaScript (ES6) code snippets」**用来提示代码片段就够了.

image.png

Vue Language Features (Volar)

开发 **「vue」**项目必备的插件,代码的高亮和智能提示全靠它了.

安装之后的样子

Vue Peek

在大型的**「Vue」**项目中如果想要快速跳转到某一个组件去,需要找很久才能找到.非常浪费时间

这个插件就完美解决这个问题

Demo

Vue VSCode Snippets

这个插件提供一些Vue的代码片段,在日常开发中,可以节省很多时间

❝

react本身用的 **「jsx和tsx」**可以被 **「vscode」**识别到,所以不像 **「vue」**那样还需要装高亮插件.

❞

Simple React Snippets

**「react」的代码片段插件,这个插件里面有很多「react」**的代码片段,写新文件的时候可以用来快速生成代码.

snippets-in-action.gif

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」**配置文件使用.

在 **「settings.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」,用来做一些代码检查,和 **「prettier」**不一样在于, **「prettier」注重于代码的格式化,「eslit」**则侧重于代码的语法风格.

**「eslint」**和 **「prettier」**二者搭配使用

❝

正常开发中我们使用的数据库可视化工具都是 「navicat」、「dbeaver」,但**「vscode」**中也有很多插件,也可以做到类似的效果

❞

SQL Tools

SQLTools

这个插件支持的数据库种类很多,日常开发需要的数据库基本上都可以覆盖到

MongoDB for VS Code

上面那个插件中没有 **「mongodb」**的插件

如果想要看 **「mongodb」就需要「MongoDB for VS Code」**这个插件来辅助

Redis

想要在 **「vscode」**中使用 **「redis」**就需要这个插件.具体的效果和 **「sql tools」**差不多.

Better Comments

以不同的颜色高亮注释,如果需要自定义可以在 **「settings.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

平常开发打印console.log最少都要敲2~3按键,还需要输入对应的参数,并且也不是很美观

这个插件可以设置模板,只需要按下快捷键就可以快速的打印出上面的这种 console.log

Console Ninja

这个插件可以,直接在你的vscode里面就输出 console.log 结果,提高不少效率,不用每次都去看控制台

docs-main

Path Intellisense

自动补全路径的插件,在项目结构比较深的时候这个工具就很好用了

IDE

git相关

Git Graph:
GitLens — Git supercharged

两个功能强大的 git工具,比 vscode自带的好用不少

Project Manager

Project Manager Logo

非常好用的一个插件,可以保存项目,方便下次打开项目,在项目多的情况下,非常的好用.

具体的效果可以看插件的介绍

vite

109450296-87a66480-7a85-11eb-985c-5dc63ba3e229.gif

功能很多:

启动本地服务器
快速启动项目
内置浏览器显示项目内容

替代了Live Server在我插件列表中的位置

vscode-mindmap

image-20240225195258753

在一些特殊情况下,需要快速画一些流程图、思维导图的时候比较好用,只要创建 **「.km」**文件就可以,还支持打开 .xmid文件.

VSCode Animations

Demo.gif

这个插件配置完成之后,让 vscode的体验整体上升了一个档次,吃了德芙一样丝滑,我最喜欢的插件之一

Bookmarks

列表

一个书签插件,在项目比较大的情况下,如果有一些功能的在不同的 文件中,需要下次去修改,用这个插件标记一下,是一个不错的选择

{ "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" }