前端开发

前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。

最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。

由于互联网行业的急速发展，导致了在不同的国家，有着截然不同的分工体制。

在日本和一些人口比较稀疏的国家，例如加拿大、澳洲等，流行“Full-Stack Engineer”，也就是我们通常所说的全栈工程师。通俗点说就是一个人除了完成前端开发和后端开发工作以外，有的公司从产品设计到项目开发再到后期运维可能都是同一个人，甚至可能还要负责UI、配动画，也可以是扫地、擦窗、写文档、维修桌椅等等。

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

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

PRD（产品原型-产品经理） - PSD（视觉设计-UI工程师） - HTML/CSS/JavaScript（PC/移动端网页，实现网页端的视觉展示和交互-前端工程师）

下载和安装VS Code

下载地址

https://code.visualstudio.com/

安装

初始设置

中文界面配置

首先安装中文插件：Chinese (Simplified) Language Pack for Visual Studio Code
右下角弹出是否重启vs，点击“yes”
有些机器重启后如果界面没有变化，则点击左边栏Manage -> Command Paletet...【Ctrl+Shift+p】
在搜索框中输入“configure display language”，回车
打开locale.json文件，修改文件下的属性 "locale":"zh-cn"

{// 定义 VS Code 的显示语言。// 请参阅 https://go.microsoft.com/fwlink/?LinkId=761051，了解支持的语言列表。"locale":"zh-cn" // 更改将在重新启动 VS Code 之后生效。
}

重启vs

插件安装

为方便后续开发，建议安装如下插件（红色矩形框标记的插件）

创建项目

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如project_xxxx。

然后打开vscode，再在vscode里面选择 File -> Open Folder 打开文件夹，这样才可以创建项目。

保存工作区

打开文件夹后，选择“文件 -> 将工作区另存为...”，为工作区文件起一个名字，存储在刚才的文件夹下即可

新建文件夹和网页

预览网页

以文件路径方式打开网页预览

需要安装“open in browser”插件：

文件右键 -> Open In Default Browser

以服务器方式打开网页预览

需要安装“Live Server”插件：

文件右键 -> Open with Live Server

设置字体大小

左边栏Manage -> settings -> 搜索 “font” -> Font size

开启完整的Emmet语法支持

设置中搜索 Emmet：启用如下选项，必要时重启vs

vscode安装和使用相关推荐

vscode安装设置go
vscode安装设置go vscode安装go配置 1.下载最新的vscode: https://code.visualstudio.com/docs/?dv=win 2.下载go: https: ...
【Linux】26.VScode安装、插件、快捷键等基本用法
VScode安装.插件.快捷键等基本用法部分参考http://www.cnblogs.com/bloglkl/p/5797805.html (1) 在visual studio code中插件下载M ...
vscode安装Remote -WSL插件连接本地的wsl
扩展中搜索:Remote -WSL vscode安装Remote -WSL插件连接本地的wsl
【Tools】Ubuntu中vscode安装和使用
00. 目录文章目录 00. 目录 01. vscode简介 02. vscode下载 03. vscode安装 04. vscode汉化 05. vscode安装C/C++ 06. vscode安 ...
【windows环境——VSCode安装教程】
大家好呀!我是超梦,今天给小伙伴们带来一个最新版在windows环境的VSCode安装教程,话不多说我们开始吧. VSCode安装下载与安装设置中文环境下载与安装 1. 第一步,进入官网,根据自 ...
go插件 vscode 报错_MacOS中 VSCode 安装 GO 插件失败问题的快速解决方法
问题重现 Installing golang.org/x/tools/cmd/guru FAILED Installing golang.org/x/tools/cmd/gorename FAILED ...
解决VScode安装Babel转码器报错：无法将“cnpm“项识别为cmdlet\函数、脚本文件或可运行程序的名称的问题
解决VScode安装Babel转码器报错:无法将"cnpm"项识别为cmdlet\函数.脚本文件或可运行程序的名称的问题报错结果如下: 解决方案第一步:安装npm 点我安装np ...
OpenGL vscode 安装与配置
OpenGL vscode 安装与配置一.在vscode中配置好C++的环境这个看下网上的教程二.下载cmake CMake 下载好后点击安装,安装过程中选择add path to all us ...
[转载] 消除vscode安装pylint后提示的unused variable
参考链接: 使用direnv和pyenv管理Python环境 vscode 消除vscode安装pylint后提示的unused variable查看代码复制代码消除vscode安装pylint后提 ...
安装软件，python安装，node.js安装，pycharm安装，vscode安装,PR, PS, LR.AE Windows开关机等，雪崩的时候没有一片雪花儿是无辜的
安装 (汉语词语) 安装,汉语词汇,就是按照一定的程序.规格把机械或器材固定在一定的位置上,也指按照一定的方法.规格把机械或器材等固定在一定的地方. 出处徐迟 <石油头>:"就 ...

vscode安装和使用