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. foreach 语句

    foreach  语句很适合用来枚举   如数组.列表.集合之类的数据结构中的元素.  不必准确知道元素个数.如果基数据不包含任何元素,则foreach循环不执行 foreach(<元素> ...

  2. XmlDocument操作

    一.基本操作:XmlDocument 写 class Program { static void Main(string[] args) { // 使用DOM操作,常用的类:XmlDocument.X ...

  3. linux 系统监控和进程管理

    1.命令top,查看cpu和内存使用,主要进程列表和占用资源. 2.内存使用命令foree -g 3.查询所有java进程:pgrep -l java     ------ps aux|grep .j ...

  4. hive 用户行为分析(活跃。启动,留存,回访,新增)的一些经典sql

    很简单的sql 用户分析语句 :只要自定义简单的udf函数 获取统计时间createdatms字段的使用的日历类 add方法 和simpledateformat 将long类型的 定义多个重载方法 获 ...

  5. msyql -3m架构详解

    我们先来回顾一下mmm的概念,它是一套灵活的基于perl编写的脚本程序,自己本身不提供mysql服务的功能,它是用来对mysql replication 进行监控和故障迁移,并能管理mysql Mas ...

  6. Kattis之旅——Number Sets

    You start with a sequence of consecutive integers. You want to group them into sets. You are given t ...

  7. 管理mycat命令详解

    mycat监听两个端口,分别为8066和9066:mycat服务默认的数据端口是8066,而9066端口则是mycat管理端口,用于管理mycat的整个集群状态.监听的端口可以在server.xml配 ...

  8. bzoj4566 / P3181 [HAOI2016]找相同字符

    P3181 [HAOI2016]找相同字符 后缀自动机 (正解应是广义后缀自动机) 并不会广义后缀自动机. 然鹅可以用普通的后缀自动机.   我们先引入一个问题:算出从一个串内取任意两个不重合子串完全 ...

  9. kali linux fuzz工具集简述

    模糊测试是一种自动化软件测试技术,涉及提供无效,意外或随机数据作为计算机程序的输入. 然后监视程序是否存在异常,例如崩溃,内置代码断言失败或潜在的内存泄漏. 通常,模糊器用于测试采用结构化输入的程序. ...

  10. Node.js初探

    1, 设计高性能.Web服务器的几个要点:事件驱动.非阻塞I/O 2,常见Web服务器架构: Web服务器的功能: 接受HTTP请求(GET.POST.DELETE.PUT.PATCH) 处理HTTP ...