前端开发环境篇

更新日志，请根据目录跳转查看

• 更新日志： 2019年08月19日 vscode 新插件更新和配置推荐【20190819更新】；

包管理器

NPM包管理器

• 请下载官 较新的稳定版！地址=》
• 双击msi安装包安装，可以自定义安装目录；
• 安装完成后检查全局环境：

• 检查版本

如果没有出现版本 ，检查全局系统变量是否配置好（cmd、powershell和bash会通过系统环境变量到对应目录下找同名命令的exe并传入后面的参数，如果环境变量里没有配置路径当然找不到对应的工具）：

• 配置环境：

右键我的电脑》打开“属性”：


点击新建，不要直接双击添加，更不要在外面就双击修改，这样容易修改到原来的路径里的符 ，导致其他的也会出错！！！


• 设置淘宝镜像代理

YARN包管理器

• 如果说npm是皇家正统，那么yarn就是爵士大将军！yarn基于node，并且速度更快，能自动缓存你下载过的包，让你在离线、重复下载时不需要通过去 上拉取文件，直接在本地就可以安装你需要的包！并且，yarn分离的各个包的安装过程，合理排队，不产生高频请求，单个包安装失败并不影响其他包的安装，有效的重试机制等！

• yarn有多个类别的包提供安装 地址 =》

• 或者使用npm安装：

• yarn 的使用和npm并无二致我就不细提，直接机票前往 =》 yarn使用

前端开发软件篇

软件选择

VSCode轻量的重武器！

• 我是一个VSCode的使用者，它起始安装包只有不到50M，恐怖如斯！虽然比sublime的10M左右大，但是开源免费，插件最多事最大的优点！$80足够驱使我去找一款更好的工具了！

公共的插件

• 语言插件，vscode默认语言英语，需要安装其他语言插件；

如果安装重启vscode没哟起效，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。要修改 locale.json，你可以同时按下 Ctrl+Shift+P 打开命令面板，之后输入 “config” 筛选可用命令列表，最后选择配置语言命令。

• 静态 页可以支持直接在默认浏览器预览

基于技术栈的插件

• 关于Vue、React的

、、，、等，涵盖代码美化、Vue代码补全、组件跳转预览等功能，同时你也可以安装一些UI库的代码提示补全，如、不过这些插件并没有兼容html的语法，如果你使用了类似这样的语法，那么久会有很多功能受到限制！

• 关于css

、、、、等根据需要选择。

• 关于html

非常推荐使用Pug的语法，不需要成对标签，特点明确，格式要求严格，可以让代码非常规范而且易读性很高！推荐插件，。

Pug的语法简单易学，没有了尖尖角角看起来也很整洁！文档


支持最新的ES6语法，支持很多代码快捷公式。

代码管理插件

• 、

支持快速预览提交历史：


安装git后自动支持一键化代码提交操作：


• vscode 支持安装其他软件的快捷键命令：Sublime Text（）等，不一一列举，输入 即可搜索到所有的快捷键替换插件：

1. • 然后是vsocde的一些配置：

alias别名

另外，如果你为了路径别名无法被vscode识别而烦恼，可以考虑添加一个jsconfig.js 或者tsconfig.js 到根目录下，像这样：

推荐一款vscode设置同步插件：Setting Sync

• 使用方式：

• • 安装之后会有步骤操作，按步骤进行；
• • 如果日后忘了，或者不小心关闭了，或者没弹出步骤操作：
• • • 控制台Ctrl + Shift + P 输入Sync ，选择 How to configure 会打开 页帮助。

致力于打造一个舒适的编程环境，欢迎留言一起解决’舒适’问题！