1. 安装nodejs

国内下载页面(推荐)

官网下载页面

现在的nodejs自带NPM,只需点击下一步下一步安装即可。

为了加速国内NPM包下载,可配置淘宝NPM镜像

2. 安装git

国内下载页面(推荐)

官网下载页面

国内直接从官网下载比较困难,需要翻墙。

所以这里要感谢淘宝NPM镜像提供空间。

3. 安装VSCode和常用插件

官网下载页面

下面是常用的插件列表:

Git History

Git Lens

Babel ES6/ES7

ESLint

EditorConfig for Visual Studio Code

以上插件用于优化编辑器里进行git管理,代码规范化的体验。

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

Windows系统零开始前端开发环境配置的更多相关文章

  1. Windows系统上搭建Clickhouse开发环境

    Windows系统上搭建Clickhouse开发环境 总体思路 微软的开发IDE是很棒的,有两种:Visual Studio 和 VS Code,一个重量级,一个轻量级.近年来VS Code越来越受欢 ...

  2. AngularJS + CoffeeScript 前端开发环境配置详解

    AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了.虽然AngularJS的 ...

  3. windows系统下简单nodej.s环境配置 安装

    国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/ windows系统下简单nodejs环境配置. 第一步:下载安装文件 下载地址:官网 htt ...

  4. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  5. windows系统下简单node.js环境配置 安装

    国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/ windows系统下简单nodejs环境配置. 第一步:下载安装文件 下载地址:官网 htt ...

  6. windows系统JDK的安装及环境配置

    本文转载至:http://blog.csdn.net/sweetburden2011/article/details/8881181 一:JDK的安装 1.   首先上甲骨文公司的官方网站下载JDK的 ...

  7. Windows系统中 JDK安装及环境配置

    需要安装jdk的第一步就是先去官网下载好JDK,选择需要的版本. Windows系统 1.将下载好的压缩包解压,点击解压得到的jdk执行文件开始安装.在安装过程中会弹出两个安装,一个是jdk,一个是j ...

  8. Sublime Text前端开发环境配置

    Sublime Text是前端开发不可不说的编辑器,本文以Sublime Text 3为例讲解一下如何搭建前端的开发环境. 下载Sublime Text 3 下载地址 #==> Sublime ...

  9. windows下前端开发环境配置

    nvm安装 多媒体布局 前端自动化构建工具,gulp nvm管理node的版本,npm是node的包管理工具 下载nvm安装包 https://github.com/coreybutler/nvm-w ...

随机推荐

  1. Token:共识的下一个100年,区块链技术是无可阻挡的文明进程

    Token:共识的下一个100年,区块链技术是无可阻挡的文明进程.很少有人意识到,区块链的应用——Token可能是近100年来最伟大的制度创新,超越股份制,并将是『债券』之后最重要最主流的交易品种,没 ...

  2. Python+OpenCV图像处理(一)——读取显示一张图片

    先在此处先声明,后面学习python+opencv图像处理时均参考这位博主的博文https://blog.csdn.net/u011321546/article/category/7495016/2? ...

  3. 每日linux命令学习-历史指令查询(history、fc、alias)

    linux历史机制对命令行中输入的命令进行编号并依此保存,以维护命令历史.登录会话期间输入的命令保存在shell内存中,若终止命令则添加至历史文件. 1. 箭头符号方向键 使用键盘上的箭头方向键可以从 ...

  4. 机器学习笔记 1 LMS和梯度下降(批梯度下降) 20170617

    https://www.cnblogs.com/alexYuin/p/7039234.html # 概念 LMS(least mean square):(最小均方法)通过最小化均方误差来求最佳参数的方 ...

  5. 注册页面的JSON响应方式详细分析(与前端页面交互方式之一)

    控制器层 需求分析: 访问路径:`/user/reg.do` //自己根据功能需求设定的请求参数:`username=xx&password=xx&&phone=xx& ...

  6. django模型中的关系对应

    显然,关系数据库的力量在于将表相互关联.Django提供了定义三种最常见的数据库关系类型的方法:多对一,多对多和一对一. 在说明之前,首先来理解一下这三个概念: 多对一: 两个集合a,b;集合a中的多 ...

  7. bzoj2120 / P1903 [国家集训队]数颜色 / 维护队列(带修改莫队)

    P1903 [国家集训队]数颜色 / 维护队列 带修改的莫队 在原有指针$(l,r)$上又添加了时间指针$t$ 贴一段dalao的解释 带修改的莫队,和原版莫队相比,多了一个时间轴 原版莫队是将区间( ...

  8. Windows系统中设置Python程序定时运行方法

    Windows系统中设置Python程序定时运行方法 一.环境 win7 + Python3.6 二.步骤 1,在Windows开始菜单中搜索“计划任务”,并且点击打开“计划任务”: 2.点击“创建基 ...

  9. jbpm 6 vs activities 5评估(持续更新、亲测实际项目评估)

    最近我们有个使用了jbpm 6.2(6.2是一个较大的里程碑)的批处理模块,因为大BOSS一直觉得太重了,希望有更加轻量级的解决方案,因为我们基本上没有真正意义上流程的概念,只有静态的流程图,因为一直 ...

  10. shell脚本一键安装nginx

    依赖包安装包放在一起, 直接执行这个脚本就行. #!/bin/bash #--------------------------------------------------------------- ...