第一篇 工欲善其事,必先利其器【前端入门】【Javascirpt开发环境部署】【vscode安装部署环境】【vscode配置】【Chrome浏览器安装和插件安装】
chapter1 工欲善其事必先利其器
这一篇文章将会介绍 Vscode 安装和部署 、 Chorme浏览器 安装与部署，在未来的文章中，这两个应用将会一直陪伴我们。❤
工具介绍和下载地址
Vscode IDE
Vscode，我个人的主要开发IDE，但是不代表你在开发的时候就选择vscode，简单的 记事本、Vim编辑器、sublime text 的 轻型编辑器 或者 webstorm、IntelliJ IDEA 等 更重更全面的IDE 。重要的不是分辨哪个编辑器好坏，而是根据个人的喜好和开发场景去选择。
VScode下载地址
Chrome 浏览器
Chrome 浏览器我个人认为在 浏览器规范 上目前是比较有优势的，同时其 DevTools 和 插件 能在一定程度上帮助我们的 开发和扩展 使用。
Chrome下载地址
Git 分布式版本控制软件
Git 版本控制器，个人轻量开发并不是很需要，可是目前很多企业都使用 git，同时如果想要在 GitHub 发布和克隆 那这个东西是必不可少的。后续我会单独一篇文章介绍如何使用和安装git。
Git下载地址
vscode部署JS开发环境
微软开发得支持 windows、Macos 的 免费开源 IDE。
开发框架 electron、包含 monaco-editor 开发，感兴趣可以在 github 查看源码。
IDE (Integrated Development Environment)
全称是集成开发环境 ，是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。
1.下载与安装
- VScode下载地址
- 根据自己的系统选择对应的安装器
- 运行安装程序
2.客制化vscode 【插件市场】
vscode 维护了一个良好的社区，上面有很多优秀的插件，我们只需要在插件市场上订阅相关插件就可以使用插件功能了。
我们进入插件市场搜索相关插件就可以了，然后下方是我推荐的插件，加粗 的请务必下载。
- 调试工具
- Live Server（静态网站预览工具）
- 代码补全和代码提醒
- IntelliCode（代码上下文感知）
- IntelliCode API Usage Examples
- IntelliSense for CSS class names
- JavaScript (ES6) code snippets
- Path Intellisense（路径感知）
- Trailing Spaces（高亮显示空格）
- className Completion in CSS
- 预览工具
- Svg Preview
- 主题自定义
- Material Icon Theme
- Material Theme
- Material Theme Icons
- vscode-icons
- Community Material Theme
- Atom One Dark Theme
- Nodejs相关
- Node.js Extension Pack
- Node.js Modules Intellisense
- npm(好像死掉了)
- npm Intellisense
- Search node_modules
- 代码规范
- ESLint
3.部署 javascript 开发环境
Javascript 代码可以运行在 浏览器引擎 和 Nodejs 上面，因此我们需要安装 Nodejs。
3.1Vscode的Nodejs 开发环境配置
Node.js下载地址←点击直接进去下载(选择LTS的稳定版本就可以)
安装完成之后，在你的 终端( Terminal ) 输入 node -v 显示版本信息就表示安装完毕了，之后跟随下面的步骤就可以简单构建一个学习开发环境了。
首先新建一个文件夹,比如在桌面创建一个 hello （项目名称）的文件夹,
~ %cd Desktop/
Desktop % mkdir hello
Desktop % cd hello
运行 npm init 初始化 npm。
hello % npm init
点击回车直到出现如下内容
About to write to 你的路径
{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
之后运行下面命令，安装一个 cowsay 的包。
npm install cowsay
在之前创建的 hello目录 里面新建一个 index.js 文件，输入以下内容并保存。
const cowsay = require("cowsay");
console.log(cowsay.say({
text : "I'm a moooodule",
e : "oO",
T : "U "
}));
然后按一下图片步骤创建 launch.json 文件。
按一下 F5 你就能看到性感小了,这就表示环境配置好了。
现在你可以试着改写 index.js 内的内容。然后按 F5 来查看结果，（ console.log 可以打印出来你的想看的信息，你也可以试着打断点来查看堆栈信息，好好玩玩吧。）
当然你感兴趣，也可以去这个网站找一些好玩的东西:
npmjs←点击直接进去搜搜你喜欢的东西吧。
3.2 Live Server 开发环境部署
可能你不太会使用 webpack 的框架 或者 不只是想要简单学习 javascript 你还想编写 Style样式 和 HTML 标签 的 网页，那么Live Server是一个很好的选择。
只需要在 Vscode插件市场 搜索 Live Server 之后安装即可，这时候新建一个 index.html 在里面输入如下内容,然后在 **vscode ** 右键 index.html文件选择 Open with Live Server 就可以了。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题title>
<style>
/* 你的 Style样式在这里面写 */
style>
head>
<body>
<script>
// 要编写的代码在这里
script>
body>
html>
Chrome 浏览器
谷歌浏览器下载地址
浏览器能做什么？ 浏览器是用来检索、展示以及传递Web信息资源的应用程序。
Web信息资源由
统一资源标识符( Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接( Hyperlinks)，通过浏览器浏览互相关联的信息。
为什么要单独讲浏览器? 浏览器最重要的就是其 搜索 这一功能，我们不可能什么问题都去咨询别人，要有自己的解决问题的能力，比如查阅官方文档，查阅别人相似问题解决方式。
开发者控制台
浏览器能运行Js脚本 浏览器本身有 JavaScript引擎 得以使 Javascirpt 脚本得以在浏览器中运行。所以我们在学习的时候用一个 Chrome 浏览器就够了。可以试着在刚下好的浏览器中按 F12 或者 Ctrl+Shift+i 来打开 开发者控制台 吧, Mac（drawin)系统的按这个⌥+⌘+i。
打开 开发者控制台 输入下面这段 魔法代码 吧。
console.log(`%cHello %cworld`,`color:#fff;background:green;border-radius:4px 0 0 4px;padding:8px`,`color:#fff;background:black;border-radius:0 4px 4px 0;padding:8px`)
具体操作与步骤如下,效果就是 彩色的Helloworld。
浏览器插件
Chrome 支持很多浏览器插件，在该浏览器内进入该网址 chrome://settings/
设置——扩展程序——右上角开启开发者模式，就可以安装插件了，将下载好的 crx 文件拖到这个 chrome://extensions/ 网址的页面内就可以安装了。