VScode编辑器中安装的常用的插件

258 阅读7分钟

1、vscode自定义插件安装位置

vscode插件默认的安装位置是:C:\Users\自己电脑的用户名.vscode\extensions

如果不想把插件安装在C盘的话,可以自己新建一个文件来存储插件,然后在快捷方式的目标中修改路径:

右击桌面vscode的快捷方式,点属性, 快捷方式有一栏是 “目标” 。 注意不能把添加的文字放在原始引号里面,要放在后面 在原本的目标后加入--extensions-dir "新的插件存储位置",例如:

"D:\softWareInstall\VSCode\Microsoft VS Code\Code.exe" --extensions-dir "D:\softWareInstall\VSCode\extensions"

同时也保证了,vscode每次更新的时候,之前安装的插件不会删除,会一直存在

然后重新启动vscode即可

彻底删除vscode及安装的插件和个人配置信息:

www.cnblogs.com/muou2125/p/…

2、vscode常用的插件安装


1、把VSCode编辑器变成中文
Ctrl + Shift + p  输入:dispaly  选择 【option to install more Language Packs 】然后安装就可以了


2、在浏览器中打开网页;可以选择默认浏览器和其他浏览器。我在官网下载的新版本直接有在浏览器中打开插件
安装: `open in browser`


3、颜色提示插件,只需要将鼠标放在颜色值上悬停,就可以预览色块中色彩模型的(HEXRGBHSLCMYK)相关信息啦
安装:`Color Info`


4、对html,css文件支持,便于你快速书写属性/智能提示CSS类名以及id/在标签新增class的时候会提示之前写过的class
安装:`HTML CSS Support`


5、代码格式化了解一下
安装:`JS-CSS-HTML Formatter`


6、jQuery自动提示
安装: `jQuery Code Snippets`


7、路径自动补齐
安装:`Path Autocomplete`


8、检测JS必备/语法检测
安装:`ESLint`


9、同步修改对应标签,这个hin方便,想象一下几屏幕的代码要改标签,啊。。。完美!/自动完成另一侧标签的同步修改
安装:`Auto Rename Tag`


10H5代码片段和提示 / 智能提示HTML标签,以及标签含义
安装:`Html Snippets`


11、给项目文件夹前边加上icon
安装:`vscode-icon`


12Beautify css/sass/scss/less 样式格式化(两个的区别还没感受出来)
安装:`Beautify`


13Vue2的多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备
安装:`Vetur`

13Vue3的多功能集成插件(已经废弃,新的名字叫做 Vue - Official)
安装:`Volar (旧版废弃)`
安装:`Vue - Official` (新版,小问题一堆,后面应该会慢慢修复)

14、快速新建vue页面
安装:`Vue 2 Snippets`


15、自动闭合HTML/XML标签
安装:`Auto Close Tag`


16、书写md文件的预览插件/ markdown语法纠错
安装:`markdownlint`


17、主题
安装:`Atom One Dark Theme`


18、实时预览markdown,markdown使用者必备
安装:`Markdown Preview Enhanced`


19、每一对括号用不同颜色区别 (括号强迫症必备)
安装:`Bracket Pair Colorizer -已废弃`
安装:`Rainbow Brackets`


20、图标插件项目中文件会以相应的icon提示
安装:`Material Icon Theme`


21ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
安装:`JavaScript(ES6) code snippets`


22React/Redux/react-router语法智能提示
安装:`React/Redux/react-router Snippets`


23、【安装完成后,鼠标右键点击html页面--> open with live server】就可以实时的查看HTML页面书写的效果
安装:`Live Server`
 
24、vscode显示“引入文件”显示对应插件大小的插件
安装:`Import Cost`

25Vue开发中用到的插件
安装:`Vue Extension Pack`

26React开发中用到的插件
安装:`ES7 React/Redux/GraphQL/React-Native snippets` 

27、node开发中用到的插件
安装:`Node Extension Pack`

28、设置文件前面的图标主体
安装:`Material Icon Theme`

29、显示Visual Studio代码的图标,目前该插件已被vscode内部支持:“文件” -> “首选项” -> “文件图标主题”
安装:`vscode-icons`

30、显示代码对齐辅助线,很好用
安装:`guides`

31、用四种不同颜色交替着色文本前面的缩进
安装:`Indent-Rainbow`

32、正则大全,快捷键f1/fn+f1/鼠标右键

可以参考的网址:https://blog.csdn.net/u013946061/article/details/105583225?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduend~default-2-105583225.nonecase&utm_term=vscode%E5%BC%95%E5%85%A5%E5%8C%85%E6%98%BE%E7%A4%BA%E5%A4%A7%E5%B0%8F%E6%8F%92%E4%BB%B6&spm=1000.2123.3001.4430
安装:`any rule`

33Vue3的多功能集成插件,支持ts
安装:`TypeScript Vue Plugin (Volar)``Vue Language Features (Volar)`
// 和Vetur启冲突,用vue3时候关闭Vetur插件,vue2的时候关闭Volar插件

34、自动搜索工作区文件中的TypeScript定义,并提供所有已知符号作为完成项,以允许代码完成
安装:`TypeScript Importer`

35、使能够typescript@next支持VS Code的内置JavaScriptTypeScript
安装:`JavaScript and TypeScript Nightly`

36、使你在编辑代码的时候,有特效显示出来,例如火苗、烟花、水纹等等
安装:`Power Mode`

37、使你的编辑器有背景图片显示出来
安装:`background`

38、在vscode点击一行代码便可清晰看出这一行代码的更改历史和更改人员
安装:`GitLens — Git supercharged`

39、在vscode的控制台中,提供了一个可视化的git历史面板,帮助您轻松浏览git历史
安装:`Git History` (v0.2.4版本,用着舒服,新版本用着不舒服)

40、查看存储库的Git图形,并从图形中轻松执行Git操作
安装:`Git Graph`

41、[通义灵码](https://tongyi.aliyun.com/lingma "https://tongyi.aliyun.com/lingma"),
是一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、
单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力,
并针对阿里云 SDK/API 的使用场景调优,为开发者带来高效、流畅的编码体验
安装:`TONGYI Lingma`

41、国际化支持,管理多语言文件的键值对
安装:`i18n Ally`

42、若使用 Tailwind CSS,提供类名智能提示
安装:`Tailwind CSS IntelliSense`

43、针对 Windi CSS 的原子化 CSS 支持
安装:`Windicss IntelliSense`

44、高亮 `.env` 环境变量文件
安装:`DotENV`

3、vscode其他的插件,目前自己没有安装的

1CSS预处理器styl后缀文件的识别扩展 
安装:`language-stylus`


2、添加对.py文件的支持,毕竟tab与空格的痛苦写过python的都知道 
安装:`Python`


3、添加对 React Native项目的支持,快速书写es6以及jsx 
安装:`React Native Tools `

4、运行React Native项目时,有些文件的查看需要这个 
安装:`C/C++`


5、用于同步vscode配置,多台电脑一份配置(相对而言配置复杂,可不安装)
安装:`Settings Sync`

 
6、启动sublimeText的快捷键配置。vscode上面自有一套快捷键设定,习惯sublime快捷键的人可以安装一下 
安装:`Sublime Text Keymap`


7、格式化,使用标准风格,快捷键 alt+shift +F 
安装:`Prettier`


8、自动提示文件路径,支持各种快速引入文件,比如书写图片路径时。遗憾就是,对webpack项目中的路径别名无法扩展 
安装:`Path Intellisense`


9、图标主题 --没安装
安装:`VSCode Great Icons`


10、node,python等代码不必开命令行即可运行 
安装:`Code Runner`


11、将css中的px自动转换为rem.再也不用计算器了(大漠大神推介)
安装:`px to rem & rpx & vw (cssrem)`


12、给标签们加个相对应的虚线        
文件 ——>首选项——>设置——>搜索renderIntentGuides→将此选项改为true(默认为false)