前端开发环境搭建vscode+node.js

2019-11-25

字数统计: 1.3k字 | 阅读时长≈ 4分

1.安装及环境变量配置

vscode 请到官网下载对应版本
node.js 请到官网下载对应版本

目前安装好像都自动配置环境变量，但是我尝试下载包的时候发现路径不对

发现还需要在cmd里进行如下配置

1 2	>npm config set prefix “E:\nodejs\node_global” >npm config set cache “E:\nodejs\node_cache”

然后打开安装目录的node_modules\npm\npmrc

打开之后进行如下配置

新建NODE_PATH

1	D:\nodejs\node_modules

在系统Path变量里添加

1	D:\nodejs\node_modules

配置完成后可以通过安装一个集成几个翻译平台的命令行工具作测试：

注意此处的路径，这个路径是设置的全局保存的路径，如果路径不对，则是上述的npmrc没有生效。

看下效果：

cmd

git

2.YARN包管理器

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

或者使用npm安装：

D:\nodejs>npm install -g yarn
D:\nodejs\node_global\yarnpkg -> D:\nodejs\node_global\node_modules\yarn\bin\yarn.js
D:\nodejs\node_global\yarn -> D:\nodejs\node_global\node_modules\yarn\bin\yarn.js
+ yarn@1.19.2
added 1 package in 1.112s

yarn的教程参照官网

3.VSCode插件

之前出过 Sublime的使用教程，有兴趣的可以康康。

言归正传，开始介绍VSCode的插件。

1.Chinese（Simplified） language

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

2.Auto Rename Tag 标签自动重命名（当然如果你使用的是pug语法可以忽略）

3.代码美化工具 `Beautify`

该插件支持js、josn、css、sass和html的代码美化

css快速预览与修改工具 CSS Peek,支持css的快速跳转

如果你对思考怎么写一个css的名称很苦恼的话还可以装个IntelliSense for CSS class names in HTML插件

4.图标库 Material Icon Theme 对当前流星雨烟和后缀名进行单独匹配好看又丰富的图标

view in Browser 静态网页可以支持直接在默认浏览器预览

5.基于技术栈的插件

关于Vue、React的

vue-beautify、Vue VSCode Snippets、Vue Peek，ES7 React/Redux/GraphQL/React-Native snippets、React Native Tools等，涵盖代码美化、Vue代码补全、组件跳转预览等功能，同时你也可以安装一些UI库的代码提示补全，如vscode-element-helper、Ant Design Snippets不过这些插件并没有兼容html的语法，如果你使用了类似pug这样的语法，那么久会有很多功能受到限制！