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及安装的插件和个人配置信息:
2、vscode常用的插件安装
1、把VSCode编辑器变成中文
Ctrl + Shift + p 输入:dispaly 选择 【option to install more Language Packs 】然后安装就可以了
2、在浏览器中打开网页;可以选择默认浏览器和其他浏览器。我在官网下载的新版本直接有在浏览器中打开插件
安装: `open in browser`
3、颜色提示插件,只需要将鼠标放在颜色值上悬停,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息啦
安装:`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`
10、H5代码片段和提示 / 智能提示HTML标签,以及标签含义
安装:`Html Snippets`
11、给项目文件夹前边加上icon
安装:`vscode-icon`
12、Beautify css/sass/scss/less 样式格式化(两个的区别还没感受出来)
安装:`Beautify`
13、Vue2的多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备
安装:`Vetur`
13、Vue3的多功能集成插件(已经废弃,新的名字叫做 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`
21、ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
安装:`JavaScript(ES6) code snippets`
22、React/Redux/react-router语法智能提示
安装:`React/Redux/react-router Snippets`
23、【安装完成后,鼠标右键点击html页面--> open with live server】就可以实时的查看HTML页面书写的效果
安装:`Live Server`
24、vscode显示“引入文件”显示对应插件大小的插件
安装:`Import Cost`
25、Vue开发中用到的插件
安装:`Vue Extension Pack`
26、React开发中用到的插件
安装:`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`
33、Vue3的多功能集成插件,支持ts
安装:`TypeScript Vue Plugin (Volar)`、`Vue Language Features (Volar)`
// 和Vetur启冲突,用vue3时候关闭Vetur插件,vue2的时候关闭Volar插件
34、自动搜索工作区文件中的TypeScript定义,并提供所有已知符号作为完成项,以允许代码完成
安装:`TypeScript Importer`
35、使能够typescript@next支持VS Code的内置JavaScript和TypeScript
安装:`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其他的插件,目前自己没有安装的
1、 CSS预处理器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)