前端技术-Vscode 安装和使用 | 学习笔记

简介: 简介:快速学习前端技术-Vscode 安装和使用

开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):前端技术-Vscode 安装和使用】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/667/detail/11297


前端技术-Vscode 安装和使用 

 

内容简介:

一、前端开发

二、安装前端开发工具 vscode

三、创建工作区

四、设置字体大小

五、怎样写代码?

 

一、前端开发

前端的主要作用是用于数据显示,在招聘网站上找工作一般都会有前端工程师。

在日本和一些人口比较稀疏的国家,例如加拿大、澳洲等,流行"full-Stack Engineer" ,也就是我们通常所说的全栈工程师。

通俗点说就是一个人除了完成前端开发和后端开发工作以外,有的公司从产品设计到项目开发再到后期运维可能都是同一个人,甚至可能还要负责 UI、配动画,也可以是扫地、擦窗、写文档维修桌椅等等。

而在美国等互联网环境比较发达的国家项目开发的分工协作更为明确,整个项目开发分为前端、中间层和后端三个开发阶段,这三个阶段分别由三个或者更多的人来协同完成。

国内的大部分互联网公司只有前端工程师和后端工程师,中间层的工作有的由前端来完成,有的由后端来完成。

 

二、安装前端开发工具 vscode

安装 vscode 后需要安装插件,让应用更加方便

1.怎样安装插件?

在扩展中搜索以下插件 Chinese (Simplified) Language pack for Visual S, Live Server(内置服务器), Vetur(用于 vue 开发,安装后可以看到 vue 代码颜色的变化), vue-helper,点击安装.安装完成后,重新加载过或重启 vscode 就可以使用了.

image.png


三、创建工作区(前端代码都写到工作区里面)

第一步:在本地硬盘里创建空文件夹

第二步:使用 vscode 打开创建空文件夹,将文件夹命名为 vs1010.

image.png

第三步:把文件夹保存成工作区,在文件中点击将工作区另存为...将文件名命名为1010,保存类型为 Code 工作区

(*.code-workspace).

image.png

若要打开工作区,点击文件→打开工作区→vs1010→选中文件 vs1010.code-workspace→打开

image.png

 

四、设置字体大小

左边栏Manage→settings→搜索"font"→Font size

 

五、怎样写代码?

右键点击工作区的名称→新建文件夹 demo1→在 demo 中新建文件夹01.html

例如:<h1>hello vscode!</h1>

执行:

点击右键→Open with live Server点击后就会打开默认浏览器就会显示 hello vscode!

如果打不开,直接在浏览器中输入 http://127.0.01:5500/找到自己的文件打开 demol/01.html. 若右击没有 Open with live Server ,则检查插件是否装对或者安装后是否重启.

相关文章
|
11月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
1567 1
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
273 0
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
6511 24
|
7月前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
1225 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
9月前
|
前端开发 应用服务中间件 nginx
docker安装nginx,前端项目运行
通过上述步骤,你可以轻松地在Docker中部署Nginx并运行前端项目。这种方法不仅简化了部署流程,还确保了环境的一致性,提高了开发和运维的效率。确保按步骤操作,并根据项目的具体需求进行相应的配置调整。
821 25
|
8月前
|
人工智能 自然语言处理 前端开发
VSCode AI提效工具,通义灵码前端开发体验
通义灵码2.0是一款强大的VS Code插件,安装简便,图标易记。其亮点包括接入deepseek-v3/r1模型,支持智能问答、AI编程、代码优化及贴图提问;多语言和编辑器支持;个性化使用满足不同需求。个人版完全免费,节省12%开发时间。对比1.0版本,2.0在功能实现上更加完善,尤其在前端项目中表现出色,根据需求描述生成完整项目结构和详细代码,极大提升开发效率。
617 0
|
9月前
|
人工智能 Java Python
python安装、vscode安装、conda安装:一文搞定Python的开发环境(史上最全)
尼恩架构团队推出了一系列《LLM大模型学习圣经》PDF,旨在帮助读者深入理解并掌握大型语言模型(LLM)及其相关技术。该系列包括Python基础、Transformer架构、LangChain框架、RAG架构及LLM智能体等内容,覆盖从理论到实践的各个方面。此外,尼恩还提供了配套视频教程,计划于2025年5月前发布,助力更多人成为大模型应用架构师,冲击年薪百万目标。
|
9月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
200 10
|
12月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
703 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
11月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
348 8

热门文章

最新文章

  • 1
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 2
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 9
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 10
    前端如何禁止用户打开 F12 开发者工具