前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

在正式开发之前,我们先来搭建开发环境:一个合理的开发环境,会大大提高我们写代码的效率,规范性和健壮程度。

我们将会从初始化环境开始,然后从检查(Lint) 、测试(Test) 、构建(Build) 、版本管理(Version Control) 和 持续化集成(Continuous integration) 这几方面来搭建我们的开发环境。

那么首先我们来初始化我们的环境。

# 初始化环境

首先在任意位置新建一个名叫 sparrow 的文件夹,然后安装下面对应版本的 node 和 npm:

  • node: 14.17.6

  • npm: 6.14.15

接下来运行 npm init -y 来初始化环境,这之后 sparrow 文件夹里会出现一个 package.json 文件。又了它之后,我们就来搭建我们的开发环境!

代码编辑器推荐使用 VSCode

# 代码检查(Lint)

首先我们来看看代码检查,代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,能帮助我们规范代码和加少出错的可能性。这里我们将使用 ESlint 来作为代码检查的工具。

$ npm install eslint --save-dev
@前端进阶之旅: 代码已经复制到剪贴板

我们可以通过下面的命令来初始化 ESlint 的配置,它会问你一些问题,根据你的选择去生成对应的配置文件。

$ npx eslint --init
@前端进阶之旅: 代码已经复制到剪贴板

这里把问题和答案都记录下来了。

  • How would you like to use ESLint? > To check syntax, find problems, and enforce code style

  • What type of modules does your project use? > JavaScript modules (import/export)

  • Which framework does your project use? > None of these

  • Does your project use TypeScript? > NO

  • Where does your code run? > Browser, Node

  • How would you like to define a style for your project > Use a popular style guide

  • Which style guide do you want to follow? > Airbnb:

    fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏