前端开环境搭建

Posted padingdun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开环境搭建相关的知识,希望对你有一定的参考价值。

1. 安装包管理工具 npm 或者yarn

npm install -g yarn

yarn基于node,并且速度更快,能自动缓存你下载过的包,让你在离线、重复下载时不需要通过去网上拉取文件,直接在本地就可以安装你需要的包!并且,yarn分离的各个包的安装过程,合理排队,不产生高频请求,单个包安装失败并不影响其他包的安装,有效的重试机制等.

2. 目前最流行的前端开发工具或者IDE或者编辑器:vscode、sublime、各种Storm!还有Hbuilder(这个是完美支持Vue的特供、还支持特有小程序等N端转化插件,如果需要多端覆盖这个绝对的强大!

3. VS code 插件

  • Auto Rename Tag 
  • Beautify, 该插件支持js、josn、css、sass和html的代码美化
  • CSS Peek, 支持css的快速跳转
  • 图标库Material Icon Theme 对当前流行语言和后缀名进行单独匹配好看又丰富的图标!
  • view in Browser 静态网页可以支持直接在默认浏览器预览
  • Quokka.js支持js文件内的部分代码直接计算并返回计算结果
  • javascript (ES6) code snippets支持最新的ES6语法,支持很多代码快捷公式
  • GitLens — Git superchargedGit History
  •  Markdown All in One插件,支持所有markdown语法,同时支持快捷键操作进行修改
  • Bracket Pair Colorizer 这个插件会自动根据你的代码块的括号、大括号等判断作用域块,并用border连线进行明显的区分
  • auto import
  • eslint  可用于检查语法错误规范代码

4. VS code 快捷键

Ctrl + P快速切换文件,根据历史是由最近原则排序,

Alt + ↑ | ↓ 快速移动当前行代码,

Shift + Alt + ↑ | ↓,快速复制当前行,

Ctrl + K , Ctrl + Q快速定位上次编辑的位置…

5. vsocde的一些配置

6. VS code 快速编辑html

  • 第一行输入!并回车,!,然后按下tab键,会直接出现编写html语言的基本框架标签
  • Shift  +  Alt  + F     实现代码的对齐

  • 注释:ctrl+k+c   取消注释:ctrl+k+u

7. React 环境配置:

 插件: Simple React Snippets : imrc 快速生成代码

 

创建本地文件夹,即保存项目的文件夹,在文件夹下打开控制台我这里使用git bash直接在文件夹下右键找到git bash启动即可
在控制台输入 npm install -g create-react-app 使用npm安装 create-react-app


安装完 create-react-app 之后 继续输入 create-react-app my-app 来创建一个项目 my-app 是创建出来的 React 项目,等待一段时间(这里需要下载一些依赖包),即可看到创建完成的整个文件结构

 

换控制台目录到项目目录下 运行 npm start 检测当前项目是否创建成功 正常情况下当输入命令之后 会直接打开默认浏览器预览 http://localhost:3000/ 此时会看到一个react的页面

 

 

以上是关于前端开环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

web前端开之网站搭建框架之vue详解

前端开发环境webstorm搭建

vscode 开发微信小程序环境配置

spring练习,在Eclipse搭建的Spring开发环境中,使用set注入方式,实现对象的依赖关系,通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段

web前端开之网站搭建框架之vue详解

前端开发工具环境搭建