本文主要是介绍推荐并整理一波vscode插件(哪些内置了,哪些好用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- 背景
- 现在还在用的(21款)
- Chinese(Simplified)简体中文
- Chinese Lorem
- Lorem ipsum
- Code Runner(很推荐)
- Codeium: AI Coding Autocomplete(推荐)
- Draw.io Integration
- ESLint
- Highlight Matching Tag
- JavaScript (ES6) code snippets
- 其他代码块
- Vue3 Snippets
- ES7+ React/Redux/React-Native snippets (这个很强大)
- Live Server
- Markdown All in One
- Material Icon Theme(推荐)
- Project Manager
- Tailwind CSS IntelliSense
- Vue - Official
- GitLens — Git supercharged
- 哪些插件已经内置了,卸载掉,避免占用内存
- 自动关闭HTML标签(默认开启,不用管)
- Auto Close Tag
- Close HTML/XML Tag
- 路径自动补全(默认开启,不用管)
- Path IntelliSense
- Path Autocomplete
- HTML和CSS片段(默认开启,不用管)
- HTML Snippets
- HTML Boilerplate
- CSS Snippets
- 括号配对着色
- Bracket Pair Colorizer 2
- Rainbow Brackets
- 模块自动导入(默认开启,不用管)
- Auto Import
- Move TS
- HTML标签自动重命名
- Auto Rename Tag
- HTML标签自动包装
- htmltagwrap
- html tag wrapper
- 多彩缩进
- Indent Rainbow
- NPM集成
- NPM
- 再推荐一个避免vscode内存过大的解决方案
背景
某一天,发现电脑的内存占用
很多,其中vscode的插件是头号元凶
于是趁机整理一波用不上的和已经内置的插件
现在还在用的(21款)
Chinese(Simplified)简体中文
这个不用多说,vscode中文,有需要的就安装
Chinese Lorem
简体中文的乱数假文
用于随机生成中文字符(填充文本测试用)
使用:输入
jw
默认生成128字符的中文字符,输入jw30
生成30个
Lorem ipsum
效果同上,不过是字母的
默认没有快捷键,可以查看文档自己绑定
Code Runner(很推荐)
运行代码块(对我来说主要是js代码,其他语言代码也可以)
尤其是对于我经常 ctrl + n 创建的临时文件也能够运行
正常要运行比如js代码,需要创建一个文件,然后保存,在控制台输入指令执行,有如下缺点
- 临时文件不行
- 需要保存
- 只能运行一整个文件
使用:
ctrl + alt + n
,运行特定代码就先选中就行
前提需要编辑器已经识别出代码类型,或者自己手动vscode右下角指定
Codeium: AI Coding Autocomplete(推荐)
AI代码自动补全
免费的里面算好用的了
Draw.io Integration
用来创建流程图,和网页版的作用一样
需要的可以用
ESLint
Highlight Matching Tag
高亮匹配标签
虽然vscode也内置了,但是我个人觉得不好用
- 有黄色下划线标记
- 背景色更深一点
JavaScript (ES6) code snippets
代码块生成
很多,可以查看文档,我举例几个
imp→ imports entire module import fs from ‘fs’;
clg→ console log console.log(object)
clo→ console log object with name console.log('object :>> ', object);
nfn→ creates a named function const add = (params) => {}
sto→ set timeout helper method setTimeout(() => {});
其他代码块
上面只是es6常用的一些,如果你是其他的语言,也有,在商店搜索snippets
找你需要的即可
我这里推荐几个我自己用的
Vue3 Snippets
ES7+ React/Redux/React-Native snippets (这个很强大)
但是太多了,会导致写代码有些并不是你需要的代码块的也会识别,我一般不用
Live Server
给html
开启一个本地服务器,改动直接就在页面上同步了
alt + L, alt + O
开启
alt + L, alt + C
关闭
Markdown All in One
Markdown 所需的一切(键盘快捷键、目录、自动预览等)
具体参见文档 https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one#keyboard-shortcuts-1
Material Icon Theme(推荐)
vscode文件和目录的图标
直接对比就知道了
Project Manager
项目管理
当你有很多个项目需要频繁切换的时候,不用每次打开资源管理器找,直接这里面切换即可,很方便
Tailwind CSS IntelliSense
Tailwind 类名提示
Vue - Official
vue语法高亮和提示
GitLens — Git supercharged
功能很多
我主要是用来看某一行的代码是哪个人什么时候写的
哪些插件已经内置了,卸载掉,避免占用内存
自动关闭HTML标签(默认开启,不用管)
Auto Close Tag
Close HTML/XML Tag
路径自动补全(默认开启,不用管)
Path IntelliSense
Path Autocomplete
HTML和CSS片段(默认开启,不用管)
HTML Snippets
HTML Boilerplate
CSS Snippets
括号配对着色
这里要提一下:Dracula
主题默认有6种颜色,但One Dark Pro
主题只有3种
我推荐一下我的配置,因为我是one dark pro
用户
写到最外层即可
"workbench.colorCustomizations": {"[One Dark Pro]": {"editorBracketHighlight.foreground1": "#FFD580","editorBracketPairGuide.activeBackground1": "#FFD58040","editorBracketHighlight.foreground2": "#C581D6","editorBracketPairGuide.activeBackground2": "#C581D640","editorBracketHighlight.foreground3": "#87CEFA","editorBracketPairGuide.activeBackground3": "#87CEFA40","editorBracketHighlight.foreground4": "#98FB98","editorBracketPairGuide.activeBackground4": "#98FB9840","editorBracketHighlight.foreground5": "#F0E68C","editorBracketPairGuide.activeBackground5": "#F0E680B2","editorBracketHighlight.foreground6": "#B0C4DE","editorBracketPairGuide.activeBackground6": "#B0C4DE40","editorBracketHighlight.unexpectedBracket.foreground": "#FF6347"}
}
Bracket Pair Colorizer 2
Rainbow Brackets
模块自动导入(默认开启,不用管)
Auto Import
Move TS
HTML标签自动重命名
设置搜索:Linked Editing
开启
Auto Rename Tag
HTML标签自动包装
htmltagwrap
html tag wrapper
多彩缩进
设置搜索:Bracket Pairs
开启
Indent Rainbow
NPM集成
NPM
再推荐一个避免vscode内存过大的解决方案
有时候占用内存大并不是插件的问题
设置搜索:follow
,在用户和工作区设置
中,取消勾选Follow Symlinks
这个功能的作用
在 Visual Studio Code (VSCode) 中,设置是否在搜索中跟踪符号链接(symbolic links)的选项影响着搜索功能如何处理项目中的符号链接文件和文件夹。
符号链接(也称为软链接或symlinks)是一种特殊的文件,它指向另一个文件或目录的路径。它们类似于Windows中的快捷方式。在某些开发场景中,符号链接被用来组织项目结构或链接到外部资源。
这篇关于推荐并整理一波vscode插件(哪些内置了,哪些好用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!