第一篇 工欲善其事,必先利其器【前端入门】【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 维护了一个良好的社区，上面有很多优秀的插件，我们只需要在插件市场上订阅相关插件就可以使用插件功能了。

我们进入插件市场搜索相关插件就可以了，然后下方是我推荐的插件，加粗 的请务必下载。

• 调试工具
  1. Live Server（静态网站预览工具）
• 代码补全和代码提醒
  1. IntelliCode🔥🔥🔥（代码上下文感知）
  2. IntelliCode API Usage Examples🔥🔥🔥
  3. IntelliSense for CSS class names🔥🔥🔥
  4. JavaScript (ES6) code snippets🔥🔥🔥
  5. Path Intellisense🔥🔥🔥（路径感知）
  6. Trailing Spaces🔥🔥（高亮显示空格）
  7. className Completion in CSS🔥🔥
• 预览工具
  1. Svg Preview
• 主题自定义
  1. Material Icon Theme🔥🔥
  2. Material Theme&#x