一个全栈偏前端的VSCODE经验分享

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量647 收藏 30
点赞数 25
文章标签： 前端 vscode ide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63619672/article/details/139371394
版权

工欲善其事，必先利其器

前言

首先介绍一下我自己，现阶段主做前端开发，前端以Vue为主，小程序以Uni-app为主，然后有时候也改一下后端代码，方向是成为全栈开发

开发Uni-app的时候，我一般使用HBuilderX作为启动器（准确来说CLI也可以编译，但是还是感觉用HBuilderX启动方便点吧），启动之后，HBuilderX就最小化，然后使用VSCode做IDE了

至于后端的话，我VSCode和PhpStorm混着用

VSCode快捷键

VSCode拥有非常多的快捷键，而且还可以自己改键，在这里只列举几个我最为常用的

同事也问过我，让我教他几个，这里顺便附上笔记（除了console.log那个，其他均为预设值

在这里插入图片描述

编辑类

ALT + ↑/↓ 将当前行上移/下移一行

ALT + SHIFT + ↑/↓ 将当前行向上/向下复制一行

选择类

然后接下来这三个是有点像 CTRL + F 查找或者CTRL + H 替换的

在这里插入图片描述

快捷键作用
ALT + CTRL + ↑/↓向上/向下插入光标
ALT + MOUSE插入光标
CTRL + D多选当前选中的字段

文件类

CTRL + SHIFT + F 在所有文件中搜索所选字段

ALT + SHIFT + F 格式化文档（有些语言需要安装插件来格式化）

命令类

CTRL + SHIFT + P 打开命令面板，我比较常用的有

Color Theme 切换VSCode的主题~~（有时候没事切一下~~

Reload Window 重新载入VSCode（比如遇到如下图这种“没有错却报错的情况”，或者说补全插件不可用时，都可以试试

在这里插入图片描述

设置

自动保存开（afterDelay），files.autoSaveDelay （自动保存延时）设置为 500

editor.guides.bracketPairs （括号对连线）设置为 active

editor.smoothScrolling 和 workbench.list.smoothScrolling （平滑滚动）设置为开

editor.cursorSmoothCaretAnimation （仿Microsoft Word 2013+打字手感）设置为开

editor.stickyScroll.enabled （仿JetBrains系列在顶部显示当前作用域）设置为开

字体

字体方面，我用的是'JetBrains Mono NL', '思源黑体'，16号字

JetBrains Mono

思源黑体 选择下载Region Specific Subset OTFs Simplified Chinese (简体中文)的，安装即可

推荐插件

我的插件很多（可以在新标签页中查看图片

在这里插入图片描述

这里推荐几个比较常用的吧

工具类的

下班倒计时助手 在状态栏显示距离下班还有多少时间

CSS Peek 快速定位到样式

Error Lens 在行的右边显示警告/报错（如有

Highlight Matching Tag 高亮HTML的结束标签

Image preview 在行号的左边显示图片

Live Server 启动本地服务器（用原生前端三件套写的时候，用的比较多

Material Icon Theme 文件图标

TONGYI Lingma 通义灵码（GitHub Copilot平替

Turbo Console Log 一键打印当前选中变量的console.log

这个可以绑快捷键，默认是CTRL + ALT + L，好像和通义灵码冲突来着，所以我绑的ALT + SHIFT + /

uni-helper uni-app套装（API补全啥的

Vue - Official Vue的官方插件，格式化Vue文档的时候要用到来着

Vue Peek 快速定位到Vue组件文件

主题

主题这方面，我也不知道哪个好，反正就看腻了，或者没事的时候切一下

暗 Aura Theme

亮+暗 Bearded Theme

亮+暗 GitHub Theme

亮+暗 Material Theme

暗 Moonlight

亮+暗 Noctis

以下这些是仿Atom编辑器的（Atom是由GitHub开发编辑器，被它的开发者称为“21 世纪的“高自定义性”文本编辑器（hackable text editor for the 21st Century）”。在2022年6月8日，GitHub正式宣布在2022年12月15日关闭Atom，并存档其存储库。）

Atom One Dark Theme

Atom One Light Theme

One Dark Pro

快速启动VSCode

最后讲一下如何快速启动VSCode

首先新建一个文本文件，然后输入以下内容：

@echo off
start ""

然后找到你VSCode安装在哪，一般可以在快捷方式里面找到，如图

在这里插入图片描述

然后把这一段（比如说我的安装地址是"C:\Users\78591\AppData\Local\Programs\Microsoft VS Code\Code.exe"）粘贴到刚刚的文件里面，后面追加个空格和点（.），完成后的文件内容大致如下

@echo off
start "" "C:\Users\78591\AppData\Local\Programs\Microsoft VS Code\Code.exe" .

（start、两个半角双引号、VSCode程序路径、点之间都有一个空格）

然后将此文件改名为code.bat，丢到C:\Windows中，如图

在这里插入图片描述

以后你就可以在文件夹里面按一下地址栏，或者按一下CTRL + L，然后输入code，来快速在当前文件夹中启动VSCode了

阿朱quq
关注
  • 25
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
一款人事管理系统。体验全栈开发，VSCode、React、AntD、Python、Flask、MySQL、SQLite.zip
09-28
这款人事管理系统是一个全面展示全栈开发技术的项目，涵盖了前端、后端以及数据库管理等多个方面。下面将详细解析其中涉及的技术栈和知识点。 1. **前端开发**： - **React**：这是一个由Facebook开发的JavaScript...
全栈前端笔记分享
08-12
主要分享jQuery源码剖析系列、JavaScript彻底搞懂系列、JavaScript Dom操作、ES6详解系列、javaScript设计模式系列、数据结构与算法系列、Vue、Node.js等等,分享内容会附加优质的学习博客连接以供全面参考学习。
hbuilder、hbuilderx和vscode对比
sdingdangmao的博客
12-25 2万+
1. 从内存来对比 1.1 vscode占用内存 打开同一个项目，发现vscode占用内存比较多 1.2 HBuilder占用内存 1.3 HBuilderx占用内存 1.4 对比 从内存上来看，HBuilderX可能更优 2. 从项目来对比 2.1 函数声明 vscode能通过Ctrl+左键跳转到函数所在的文件，HBuilder和X只能通过Alt+左键访问本文件内的声明。 2.2 超链接 对于超链接（即a标签），vscode的预览明显更好，而HBuilder和X只能显示源码，甚至谷歌浏览器也不能体现
前端（web）的工具的使用（DreamWeaver,HBuilder ,VScode）小心得
热门推荐
嘤嘤怪赚钱养妈妈
09-04 3万+
我也刚开始学习前端，我想一步一步的记录下我的学习过程，今天是写博客的第一篇 工欲善其事必先利其器  我先来讲一下工具的选用吧，个人认为可选择3款软件比较好用 1 DreamWeaver 我觉得这个软件初学者可能比较适合，这个软件上手快，用起来比较简便，几乎不需要什么配置。 简单的说一下一下DreamWeaver的一些使用吧 1）用DreamWeaver创建一个web项目吧 首先就是我们...
2023年总结的web前端学习路线分享（学习导读）
ztK63LrD的博客
03-06 2万+
以上是博主自学一年前端总结的一些经验，虽然不是特别的准确但是至少能够给刚入学的前端小白一个借鉴的分享，我也会把一些人可能问到的问题总结如下，给大家分享一下我的经历：前端难不难？前端相较于后端语言来说还是比较简单的，不用考虑太多的算法方面知识，如果你的编程能力不是特别的优秀又想从事编程行业，前端可以说是一个不错的选择。前端好就业吗？近几年由于培训机构输出大量的程序员，导致现在前端有一点饱和，人数的众多导致企业对人才的要求也提高了，如果你想从事前端，建议早最准备学习多项技术才能让自己不被淘汰下去。
利用React和Node.js创建一个简单的全栈应用
m0_65257615的博客
05-22 296
前端使用React构建用户界面，后端使用Node.js和Express处理API请求，MongoDB作为数据库存储任务数据。在这篇文章中，我将分享如何使用React和Node.js创建一个简单的全栈应用。在`src`文件夹下创建`components`文件夹，并添加`TaskManager.js`组件。- [Node.js 官方文档](https://nodejs.org/en/docs/)在`server`文件夹下创建`models`文件夹，并添加`task.js`文件。4. 后端开发（Node.js）
全栈 前端+后端+运维
01-10
全栈工程师是现代软件开发领域中的一个重要角色，他们具备从前端到后端，甚至包括运维的全面技术能力。这样的专业人士可以高效地构建和维护整个应用程序，确保从用户界面到数据库的无缝对接。以下是对"全栈 前端+...
blog:一个博客全栈应用的前端部分
05-17
该项目是一个web全栈应用，前后端分离，是笔者第一次进入服务端（node）领域的尝试。集成前端React(Vue)，后端Node，数据库Mysql，缓存Redis，消息推送，文件上传，密码加密，数据存储，性能监控等功能或模块，涵盖...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 184
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 143
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 822
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 609
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 973
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 742
模糊搜索功能 每个网站都要用得到
Webkit简介以及工作流程
读心悦
07-10 299
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
Haproxy搭建Web群集
wkysdhr的博客
07-08 947
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 370
【代码】​​ 翻页 上一页/下一页。
java后端转全栈的前端学习内容
06-28
### 回答1： Java后端转全栈需要学习前端技术，具体包括HTML、CSS、JavaScript等内容。 首先，HTML是前端页面标记语言，需要学习标记语法、标签语义和语法规则等，了解如何编写网页内容和结构，如何布局和排版。 其次，CSS是前端页面样式表语言，需要学习各种样式属性和使用方法，如颜色、字体、布局、动画等。学习CSS还需要了解浏览器兼容性，掌握CSS的响应式设计，以适应不同设备的屏幕尺寸。 最后，JavaScript是前端的核心语言，需要学习各种语法、函数、对象、事件等知识，掌握数据类型、控制流程、循环、DOM操作、Ajax等。此外，还需要了解jQuery、React、Vue等流行前端框架和库的使用，提高开发效率和代码质量。 除此之外，学习前端还需要了解一些通用的工具和技能，如Git、WebPack、ESLint等。同时，要注重实战练习，多做项目和练习，加深理解和提升技能水平。 总之，Java后端转全栈需要在前端领域扎实地学习HTML、CSS、JavaScript等知识，掌握前端开发的基础和核心技术，提高开发能力和水平。 ### 回答2： 随着Web应用的不断发展，全栈开发工程师越来越受到企业的青睐。如果您已经是Java后端开发工程师，并且有志于学习前端技术，那么下面将为您介绍一些必须学习的内容。 1. HTML和CSS：这是前端开发的基础，学习这些技术可以使您更好地理解网站的结构和样式。HTML是网页内容的结构化语言，而CSS是用于美化和布局网页的样式表语言。 2. JavaScript：这是目前最流行的客户端脚本语言。学习JavaScript可以使您处理客户端的事件和数据。同时，JavaScript的框架和库与Java的框架和库有相似的地方，这使得Java后端开发者更容易学习前端技术。 3. jQuery：这是一个流行的JavaScript库，可以帮助您更容易地操作HTML和CSS元素，使您编写代码更容易，更高效。 4. AngularJS或React：这些是当前最热门的JavaScript框架之一。AngularJS是一个全面的框架，它通过指令和服务提供了许多有用的功能，而React是一个用于构建用户界面的JavaScript库。学习这些框架将有助于您更好地理解JavaScript编程语言以及JavaScript的应用。 5. AJAX：这是一种异步JavaScript和XML技术，可以在不重新加载整个页面的情况下与服务器进行通信。AJAX可以帮助您实现快速响应和更好的用户体验。 6. Bootstrap：这是一个流行的HTML、CSS和JavaScript框架，用于构建响应式、移动优化的网站。它可以帮助您快速搭建一个美观的前端界面。 通过学习以上的技术，Java后端开发人员可以更好的理解前端技术，实现更好的全栈开发。当然，学习的过程并不是一成不变的，如果想要成为更优秀的全栈开发人员，还需要不断的更新和学习最新的前端技术和框架。 ### 回答3： 在Java后端转全栈的过程中，前端技术学习是非常重要的一环。以下是建议的前端学习内容： 1. HTML和CSS HTML是网页的基础语言，而CSS则负责网页的样式设计。建议从基础语法入手，学习盒模型、定位和布局等常用技术。 2. JavaScript JavaScript是前端开发的基础，学习它可以让你掌握网页的交互效果和动态特效。需要掌握基础语法、DOM操作和事件处理等知识点。 3. 前端框架 前端框架是帮助你快速构建网页的重要工具。建议学习React或Vue等流行的前端框架。 4. UI框架 UI框架是提供给设计师和开发者一个可重复使用组件的框架，它可以帮助你快速构建用户界面。Bootstrap和Ant Design是常用的组件库。 5. Web安全 Web安全是非常重要的，要确保网站不容易受到SQL注入、XSS攻击等安全问题。了解Web安全相关知识是必要的。 6. 服务器和网络 学习如何用基础的服务器架构来运行你的应用程序。从LAMP以及基础的网络知识开始。 总的来说，Java后端转全栈需要学习前端的技术知识是为了更好地与设计师和前端开发人员合作，互相理解，同时也是为了能够完成一些可视化的工作。掌握前端知识除了能让你更好地完成工作之外，还有可能让你更加获得员工职位以及更高的薪资。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值