VSCode怎么用? 史上超全vscode配置使用教程
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
4、css-auto-prefix
自动添加 CSS 私有前缀。
5、change-case
转换命名风格。
6、CSS Peek
定位 CSS 类名。
7、vscode-json
处理 JSON 文件,用法看图:
8、Regex Previewer
实时预览正则表达式的效果。
9、韭菜盒子
大家如果平时也买买基金和股票,上班又不好一直看手机,推荐安装个韭菜盒子,一边写代码一边看股票
安装之后,你的vscode左侧会多出一个图标,点击它添加自己关注的基金和股票
设置同步
花了一天终于把vscode配置成自己满意的样子,如果每换一次电脑就要重新来一次,大家一定会手撕了我。放心,早就帮大家准备好了。Settings Sync,在不同电脑间同步你的插件。
首先要想在不同的设备间同步你的插件, 需要用到 Token 和Gist id
Token 就是你把插件上传到 github 上时, 让你保存的那段字符,Gist id 在你上传插件的那台电脑上保存着。
先给大家来三个快捷键,后面会用到
现在手把手教大家配置:
- 1、安装Settings Sync
- 2、登陆Github>settings>Developer settings>personal access tokens>generate new token,输入名称,勾选Gist,提交
- 3、保存Github Access Token
- 4、打开vscode,Ctrl+Shift+P打开命令框-->输入sync-->选择高级设置-->编辑本地扩展设置-->编辑token
- 5、Ctrl+Shift+P打开命令框-->输入sync-->找到update/upload settings,上传成功后会返回Gist ID,保存此Gist ID.
- 6、在 VSCode 里,依次打开: 文件 -> 首选项 -> 设置,然后输入 Sync 进行搜索:能找到你gist id
- 7、若需在其他机器上DownLoad插件的话,同样,Ctrl+Shift+P打开命令框,输入sync,找到Download settings,会跳转到Github的Token编辑界面,点Edit,regenerate token,保存新生成的token,在vscode命令框中输入此Token,回车,再输入之前的Gist ID,即可同步插件和设置
开启一个本地服务
第一种方式
1.安装Debugger for Chrome插件
2.使用ctrl+`快捷键打开终端,然后输入npm install -g live-server
3.在命令行里输入 live-server即可
第二种方式
在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地开启一个本地的服务器。 本文是利用node.js中的http-server,开启本地服务,步骤如下:
1.安装http-server
在终端输入:$ npm install http-server -g
2.开启 http-server服务
终端进入目标文件夹,然后在终端输入:
$ http-server -c-1 (⚠️只输入http-server的话,更新了代码后,页面不会同步更新) Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.8.196:8080 Hit CTRL-C to stop the server
3.关闭 http-server服务
按快捷键CTRL-C 终端显示^Chttp-server stopped.即关闭服务成功。
相关文章
深入讲解VsCode各场景高级调试与使用技巧 代码编写效率提升2倍
VSCode是一款开源免费的跨平台文本编辑器,它的可扩展性和丰富的功能使得它成为了许多程序员的首选编辑器,在本文中,我将分享一些VSCode的使用技巧,帮助您更高效地使用它2023-12-22- 如何高效地使用vscode插件?Visual Studio Code中可以自己安装一些插件,提高工作效率,下面我们就来看看vscode插件相关教程2023-12-22
vscode有哪些插件好用? vscode部分插件的使用方法
vscode有哪些插件好用?vscode中有很多插件,这些插件该怎么用呢?下面我们就来看看vscode部分插件的使用方法2023-12-22- vscode左下角显示大纲?vscode中想要设置显示大纲,在哪里设置呢?下面我们就来看看vscode显示所有函数方法2023-12-22
VScode无法显示跳转到定义怎么解决? vscode无法跳转定义的原因及解决方
VScode无法显示跳转到定义怎么解决?vscode无法跳转定义的原因及解决方法2023-12-22VSCode如何跳转到指定函数? vscode函数跳转快捷键介绍
VSCode如何跳转到指定函数?VSCode文档想要跳转到指定函数的定义或引用位置,该怎么操作呢?下面我们就来看看vscode函数跳转快捷键介绍2023-12-22vscode里的终端不能执行命令怎么办? vscode终端无法正常执行命令解决办
vscode里的终端不能执行命令怎么办?本文将从多个角度来分析这个问题,并提供相应的解决方法2023-12-09VS Code 1.85发布:新增浮动编辑器窗口/Copilot 可解释 Rust 代码等
微软发布 VS Code 1.85,这个版本主要添加了浮动编辑器窗口、改善无障碍视图工作流程,精细化扩展更新控制,并更新了 GitHub Copilot 功能2023-12-09vscode出现event=>怎么取消? vsCode的@click方法显示一个event=>
今天我们来看看解决 VSCode 中组件输入点击事件 @click 后自动弹出“$event =>” 的问题的图文教程,详细请看下文介绍2023-11-29VSCode和WebStorm哪个更优秀?两款强大的编辑器对比介绍
VSCode和WebStorm哪个更优秀?这两款编辑器都很不错,他们各自有什么优缺点?该怎么选择呢?下面我们就来看看vscode和webstorm的区别对比介绍2023-11-29
最新评论