Windows系统零开始前端开发环境配置

1. 安装nodejs

国内下载页面(推荐)
官网下载页面
现在的nodejs自带NPM,只需点击下一步下一步安装即可。
为了加速国内NPM包下载,可配置淘宝NPM镜像
升级版本,自然是去下载页面找最新版本安装。

1.5 安装chrome和cmder

chrome国内下载页面
因为官网要翻墙。。。
cmder官网下载页面
比cmd更好用的终端。可以使用Linux相关命令。

2. 安装git

国内下载页面(推荐)
官网下载页面
国内直接从官网下载比较困难,需要翻墙。
所以这里要感谢淘宝NPM镜像提供空间。

3. 安装VSCode和常用插件

官网下载页面
下面是常用的插件列表:
Git History
Git Lens
Babel ES6/ES7
ESLint
EditorConfig for Visual Studio Code
以上插件用于优化编辑器里进行git管理,代码规范化的体验。

3.5 安装create-react-app

暂时忘掉各种依赖,比如webpack,react及其相关配置。
create-react-app是一个脚手架。它帮你处理好一切。
你只需敲如下命令,就开始创建一个新项目。

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

因为业务需求,你需要自定义模板文件,自定义流程。
这方面需求,暂时没有很好的解决方案,可以尝试下react-app-rewired (一个对 create-react-app 进行自定义配置的解决方案)。
多入口/多页面可以尝试使用这个方案

4. 优化VSCode编辑器默认行为

在项目目录下新建.editorconfig文件。
包括统一tab的占位,保存文件时最后一行再插入新行,去除首尾空格。

# 配置文件内容
# editorconfig.org

root = true


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


[*.md]
trim_trailing_whitespace = false

5. 配置VSCode编辑器代码规范

  1. 安装airbnb的规范
    npm install -g eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

  2. 在项目目录下新建.eslintrc文件

{ "extends": "airbnb", "parser": "babel-eslint", "env": { "browser": true, "node": true, "mocha": true }, "globals": { "Babel": true, "React": true }, "plugins": [
"react"
], "rules": { "global-require": "off", "import/no-unresolved": "off", "no-underscore-dangle": "off", "no-new-func": "off", "no-param-reassign": "off", "react/prefer-stateless-function": "off", "react/no-multi-comp": "off", "react/jsx-no-bind": "off", "react/jsx-indent": "off", "react/jsx-first-prop-new-line": "off", "react/jsx-filename-extension": "off", "no-restricted-syntax": "off" }}
  1. 不是所有文件都需要eslint来校验格式
    http://eslint.org/docs/user-guide/configuring
    .eslintignore
**/dist/**
**/src/**
**/examples/**
**/node_modules/**
**/server.js
**/webpack.config*.js
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,142评论 25 708
  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
    静默虚空阅读 41,524评论 3 14
  • 最近由于换了环境,所以需要重新配置下 Mac 系统的 React Native (后面简称为 RN)开发环境,在此...
    ywz阅读 2,001评论 0 4
  • 一场说走就走的旅行。 来到枣庄云亭的石头部落,哥哥一路跟着导航sir的指示,终于到达目的地。 围着石头从中午走到了...
    冻成冰的鱼阅读 189评论 0 0
  • 今天是周一,是个好日子。开水不小心打湿了床单,生活是如此匆忙。 昨天木木先生迫不及待告诉妈妈我骨折了,怕妈妈担心,...
    妖女青青阅读 142评论 0 0