1.0 VS Code下载和对前端的概述

Vscode代码编辑器

VSCode是由微软研发的一款跨平台代码编辑器，目前是前端(网页)开发使用最多的一款软件开发工具。是一种简化且高效的代码编辑器，同时支持诸如调试，任务执行和版本管理之类的开发操作。它的目标是提供一种快速的编码编译调试工具，然后将其余部分留给IDE。

如何下载

下载链接

下载插件，提升体验感

《Chinese (Simplified) (简体中文) Language》
规范提示工具 《ESLint》
vue开发工具 《Vetur》
支持HTML和CSS《HTML CSS Support》
支持JavaScript和TypeScript 《JavaScript (ES6) code snippets》
设置背景插件 background
…
支持markdown的插件
1.Markdown All in One
2.Markdown Preview Enhanced
3.Paste Image
下载完插件就可以开始markdown文档的编写了，首先建立一个文件夹作为你的文库，添加文件，将文件名后缀改为.md

用户设置

文件–首选项–设置，打开用户设置。VScode支持选择配置，也支持编辑setting.json文件修改默认配置。个人更倾向于编写json的方式进行配置，下面会附上我个人的配置代码

• editor.fontsize用来设置字体大小，可以设置editor.fontsize :
• files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。
• editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true,即"editor.codeActionsOnSave": { “source.organizeImports”: true }；

在setting.json中的个人部分设置

// #这个按用户自身习惯选择
	"vetur.format.defaultFormatter.html": "js-beautify-html",
	// #让vue中的js按"prettier"格式进行格式化
	"vetur.format.defaultFormatter.js": "prettier",
	"vetur.format.defaultFormatterOptions": {
		"js-beautify-html": {
			// #vue组件中html代码格式化样式
			"wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
			"wrap_line_length": 200,
			"end_with_newline": false,
			"semi": false,
			"singleQuote": true
		},
		"prettier": {
			"semi": false,
			"singleQuote": true
		}
	},
	"editor.formatOnType": true,//自动调整格式
	"editor.formatOnSave": true

新版的vscode设置默认为UI的设置，而非之前的json设置。如果你想复制我上面这段代码进行配置，可以进行下面的修改

文件>首选项>设置 > 搜索workbench.settings.editor，选中json即可改成json设置；

关于前端三把斧

HTML

描述了一个网站的结构，是一种标记语言而不是编程语言。除HTML以外其他的技术则通常来描述一个网页的表现和展示效果如CSS,或功能与行为如JavaScript

CSS

确定布局和元素的表现，不能单独使用
CSS的出现使页面的内容和样式得以分离

<p>HTML是一门伟大的语言!</p>

改变字体的颜色

p{
color: #37a;
text-align: right;//右对齐
}

JavaScript

是一种高级的、解释型的编程语言，使网页可交互（例如复杂的动画，可点击的按钮，通俗的菜单、表单验证、页面特效、操作页面元素等）

• 解释性语言：执行时由编译器逐条翻译并执行。
• 编译性语言：执行前先由编译器全部翻译，再执行。
• 编译性语言执行速度快，解释性语言最主要的是安全性。

Java和JavaScript是两种不同的编程语言，JavaScript是运行在浏览器的一种动态的、弱类型的脚本语言，Java是面向对象的、静态的、强类型程序设计语言。
JavaScript可在任何浏览器上运行，java需要虚拟机实现跨平台。
但是他们都是高级语言，都必须被翻译为机器语言才能执行。

前端开发工具的类型

Visual Studio Code 强大且轻巧的免费代码编辑器，有很多插件可以使用。
sublime text3 支持各种语言，体积小无需包装，但是对于项目的启动、打包、提交版本比较困难，制作简单网页可以使用它。
Webstorm 是jetbrains公司开发的商业javascript开发工具，免费版本只能使用30天，每次30分钟。
HBuilder 提供比其他工具更优秀的vue支持，提升vue开发效率。