React 快速上手 - 02 开发环境搭建

前端之家收集整理的这篇文章主要介绍了React 快速上手 - 02 开发环境搭建前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

目录

React 快速上手 - 02 开发环境搭建

目标

  • 安装 git 软件
  • 安装 node npm 环境
  • 配置 node npm 常用工具
  • 安装 vscode 作为 IDE 开发工具
  • 安装 vscode 常用开发插件 为 react 开发做准备

安装 git

这个必要性,就不多说了,进入开源的世界,没有 git 寸步难行

进入 官网

下载后是一个安装包,一路 下一步 安装直到完成

安装 node npm

打开网站 https://nodejs.org/en/ 选择下载 LTS 版本。

下载后是一个安装包,一路 下一步 安装直到完成

测试安装结果

node -v
npm -v

使用淘宝镜像

为了加速 npm 的安装速度,我们用淘宝提供的源,这个问题在其它包管理软件也会遇到

npm config set registry https://registry.npm.taobao.org

验证配置

npm config get registry

这样就完成了加速

安装 cnpm

其实现在的 cnpm 版本已经很稳定了,早先会有下载包错误问题,毕竟产品成熟需要时间,cnpm官网

全局安装

npm install -g cnpm
如果你没有配置淘宝镜像可以参数传入加速
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 yarn

yarn 是个很优秀的包管理程序, react 官方示例都是推荐 yarn 安装,特点就是快,相信不久 npm 也会赶上的,比如已经下载过的包本地做缓存,下次就秒安装了

yarn官网

mac 安装

homebrew 方式

brew install yarn

如果没有安装 homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

windows 安装

直接下载安装包 Yarn Setup

一路 下一步 安装直到完成

安装 nrm 包源管理工具

  • 安装
cnpm install -g nrm
> nrm ls

npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror  https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/
  • 切换源
> nrm use npm

  verb config Skipping project config: /Users/hans/.npmrc. (matches userconfig)

  Registry has been set to: https://registry.npmjs.org/

个人喜欢 npm 用官方源,cnpm 用来安装淘宝镜像,这样遇到包问题,可以手动调整,比较灵活。

安装 n node 版本切换工具

  • 安装
cnpm install -g n
  • 本地版本列表
> n

  node/8.8.1
  node/8.9.4
  node/8.10.0
  node/8.11.1
  node/9.4.0
  node/9.9.0
  • 安装、切换 版本
> n 8.11.2
  • 切换 最新版本
> n latest
  • 切换 最新稳定版本
> n stable
> n lts
> n rm 8.8.1

安装 vscode

推荐理由 微软出品、免费、开源、速度快、轻量级、程序稳定、不卡、不卡、大文件秒开、语法高亮、升级频繁、配置方便

下载后是一个安装包,一路 下一步 安装直到完成

配置 vscode 格式文件 .editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
tab_width = 1

没有请创建文件

安装 vscode 插件 eslint

  • 全局安装
cnpm install -g eslint

"eslint.alwaysShowStatus": true,"eslint.autoFixOnSave": "off","eslint.validate": [
    "javascript",{
      "language": "html","autoFix": true
    },{
      "language": "vue","javascriptreact","html","vue"
  ],"eslint.options": { "plugins": ["html"] },

安装 vscode 插件 prettier - Code formatter

代码格式化插件

"prettier.singleQuote": true,"prettier.semi": false,"prettier.bracketSpacing": false,"prettier.useTabs": false,"prettier.tabWidth": 2,
  • 使用,鼠标右键点击 格式化文件

安装 vscode 插件 reactjs code snippets

代码片段工具

  • 安装 vscode 插件,侧栏 > 扩展 > 搜索 reactjs code snippets

  • 使用,新建文件 MyApp.js

安装 vscode 插件 Auto Close Tag

html 标签自动补完插件

  • 安装 vscode 插件,侧栏 > 扩展 > 搜索 Auto Close Tag

安装 vscode 插件 Auto Rename Tag

html 标签改名自动同步插件

  • 安装 vscode 插件,侧栏 > 扩展 > 搜索 Auto Rename Tag

安装 vscode 插件 Debugger for Chrome

vscode chrome 调试工具

  • 安装 vscode 插件,侧栏 > 扩展 > 搜索 Debugger for Chrome

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0","configurations": [
    {
      "name": "Chrome","type": "chrome","request": "launch","url": "http://localhost:3000","webRoot": "${workspaceRoot}/src","userDataDir": "${workspaceRoot}/.vscode/chrome","sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}
  • 使用录像

http://localhost:3000 服务需要已开启

安装完插件都需要重启 vscode 才能生效

猜你在找的React相关文章