VsCode的安装和使用

  • 1 VsCode介绍
  • 2 VsCode下载
  • 3 VsCode前端工程师常用插件
  • 4 VsCode常见设置


1 VsCode介绍

  • 前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。
  • 最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。由于互联网行业的急速发展，导致了在不同的国家，有着截然不同的分工体制。
  • 在日本和一些人口比较稀疏的国家，例如加拿大、澳大利亚等，流行“Full-Stack Engineer”，也就是我们通常所说的全栈工程师。通俗点说就是一个人除了完成前端开发和后端开发工作以外，有的公司从产品设计到项目开发再到后期运维可能都是同一个人，甚至可能还要负责UI、配动画，也可以是扫地、擦窗、写文档、维修桌椅等等。
  • 而在美国等互联网环境比较发达的国家项目开发的分工协作更为明确，整个项目开发分为前端、中间层和后端三个开发阶段，这三个阶段分别由三个或者更多的人来协同完成。国内的大部分互联网公司只有前端工程师和后端工程师，中间层的工作有的由前端来完成，有的由后端来完成。
  • PRD（产品原型-产品经理） - PSD（视觉设计-UI工程师） - HTML/CSS/JavaScript（PC/移动端网页，实现网页端的视觉展示和交互-前端工程师）
  • 前端工程师比较推崇的一款开发工具就是visual studio code,下载地址为:https://code.visualstudio.com/

2 VsCode下载

https://code.visualstudio.com/

3 VsCode前端工程师常用插件

  • open in browser 通过浏览器打开当前文件的插件
  • Auto Rename Tag 自动修改标签对插件
  • Chinese Language Pack 汉化包
  • HTML CSS Support HTML CSS 支持
  • Intellij IDEA Keybindings IDEA快捷键支持
  • Live Server 实时加载功能的小型服务器
  • Prettier-Code formatter 代码美化格式化插件
  • Vetur VScode中的Vue工具插件
  • vscode-icons 文件显示图标插件
  • Vue 3 snipptes 生成VUE模板插件
  • Vue language Features Vue3语言特征插件

4 VsCode常见设置

  • 设置字体: 齿轮>search>搜索 “字体大小”
  • 设置字体大小可以用滚轮控制: 齿轮>设置>搜索 “Mouse Wheel Zoom”
  • 设置左侧树缩进: 齿轮>设置>搜索 “树缩进”
  • 设置文件夹折叠: 齿轮>设置>搜索 “compact” 取消第一个勾选
  • 设置编码自动保存: 齿轮> 设置> 搜索 “Auto Save” ,选择为"afterDelay"