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. activiti 报 next dbid

    记录一下吧. 今天将生产环境的几个服务节点改成集群模式,其中包含activiti审批服务节点,其中各个服务几点间数据通信采用MQ(与本文无关). 然后报出如题错误. 究其原因就是,在启动activit ...

  2. Codeforces 237A - Free Cash

    题目链接:http://codeforces.com/problemset/problem/237/A Valera runs a 24/7 fast food cafe. He magically ...

  3. 远程获得乐趣的 Linux 命令

    今天是我们为期 24 天的 Linux 命令行玩具日历的最后一天.希望你一直有在看,但如果没有,请从头开始,继续努力.你会发现 Linux 终端有很多游戏.消遣和奇怪之处. 虽然你之前可能已经看过我们 ...

  4. spark读取hbase形成RDD,存入hive或者spark_sql分析

    object SaprkReadHbase { var total:Int = 0 def main(args: Array[String]) { val spark = SparkSession . ...

  5. zabbix 监控项(key)

    Key 描述 返回值 参数 详细说明 agent.hostname 返回被监控端名称 字符串 - 返回配置文件中配置的被监控端的名称 agent.ping 检测被监控端是否存活 1 - 运行中 其他 ...

  6. 怎样从外网访问内网Linux系统?

    本地安装了一个Linux系统,只能在局域网内访问到,怎样从外网也能访问到本地的Linux系统呢?本文将介绍具体的实现步骤. 1. 准备工作 1.1 启动Linux系统 默认Linux系统ssh服务端端 ...

  7. MyEclipse如何清除废弃的工作空间

    1.MyEclipse如何清除废弃的工作空间Windows--->Preferences--->General--->Startup and Shutdown--->Works ...

  8. springMVC之一(页面<--->控制器 互相传值,转发和重定向)

    #页面--->控制器1.request:不建议使用2.使用属性传值(建议使用)@RequestParam("name") String username3.使用Bean对象传 ...

  9. LSTM算法原理理解

    神经网络 模拟人类大脑神经网络结构,每个神经元和其他的神经元相互连接,当它兴奋的时候会向相连的神经元发送化学物质,从而改变神经元的电位,当神经元的电位超过阈值,它会被激活,向其他神经元发送化学物质.其 ...

  10. 动态规划之91 decode ways

    题目链接:https://leetcode-cn.com/problems/decode-ways/description/ 参考:https://www.jianshu.com/p/5a604070 ...