前端入门学习笔记（一）开发预备，vscode插件推荐

学习笔记

这一系列为W3C微课、现代 JavaScript 教程、廖雪峰JavaScript学习笔记，记录我的学习过程，方便我日后查阅复习，也方便新小白们更快上手前端三件套。
在写这些学习笔记的时候，所流行的标准是HTML5，CSS3，ES6

同时由于 MarkDown编辑器 兼容HTML语法，我可以在学习的过程中，多次练习，加强我对知识的巩固。

方案1：安装WebStorm

参考 Webstorm 超实用教程进行此步骤，此处不多描述 https://www.jianshu.com/p/4ce97b360c13
由于 WebStorm 是专门为了前端开发而生的IDE, 故所有功能已集成，无需过多的个人设置，根据教程一路完成即可。

方案2：安装vscode（强烈推荐）

点击此处进入vscode官网点击Download for Windows即可
与WebStorm不同，vscode是一个轻量级的代码编辑器，需要自行安装插件才能丰富他的功能，此处推荐几个插件

• 1 Atom One Dark Theme
  此插件可更换vscode主题，颜色更加柔和，代码看起来更加清晰

• 2 Auto Close Tag，Auto Rename Tag
  自动添加闭合标签，自动修改标签名字，当你修改开始标签的时候，结束标签也会自动修改

• 3 TabOut
  Tab键可以直接跳出括号

• 4 Beautify
  当你保存的时候，自动美化代码格式

• 5 Bracket Pair Colorizer
  每个括号的颜色都不同，更加容易看出括号的配对

• 6 Code Runner
  Code Runner是新手的福音，大多数使用vscode的新人都被繁琐的配置劝退，安装了这个插件后，只需要装好对应环境（如运行Java 安装好JDK环境，不过这一步哪怕是IDEA也不能跳过），只需要点击右上角的三角号即可运行程序

• 7 ESLint
  用于控制JavaScript的代码风格

• 8 HTML CSS Support
  提示CSS类名，以及id

• 9 HTML Snippets
  HTML代码自动填充，帮你省去大量繁琐步骤

• 10 JavaScript (ES6) code snippets
  与上一个插件类似

• 11 jQuery Code Snippets
  jQuery是JavaScript的一个库，它的大量使用于JavaScript开发，甚至有人用jQuery来入门JavaScript

• 12 Material Icon Theme
  给不同类型文件不一样的图标，一眼看出文件类型

• 13 open in browser
  因为HTML CSS在浏览器中运行，安装此插件后只需要ALT + B即可在浏览器中打开当前HTML文件

• 14 字符串自动补全
  在VSCODE中添加以下设置
  “editor.quickSuggestions”: {
  “other”: true,
  “comments”: true,
  “strings”: true
  },
  这个配置有三个选项：other、comments和strings。其中，comments 就是代码注释，strings 就是指字符串。默认情况下，当光标在代码注释或者字符串里，自动补全窗口就不会被自动唤出了。但如果你希望这个窗口永远不被自动唤出，那么你就需要将“other” 也改为 “false”。