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. 区块链区块的生成和链接,比特币btc的产生,UTXO的生成和消耗,比特币系统

    区块链区块的生成和链接,比特币btc的产生,UTXO的生成和消耗,比特币系统 区块链区块的生成和链接,比特币btc的产生,UTXO的生成和消耗,比特币系统

  2. double类型的数值计算

    package jiajian; public class jiajian { public static void main(String[] args) { System.out.println( ...

  3. eHR自动同步获取LDAP中的邮箱地址

    背景:公司里有eHR系统,有网域,IBM Lotus Notes邮件系统,新人入职会在eHR系统里提前建好档案,网域帐号.邮箱帐号均会在入职前提前建好,因为邮箱帐号是晚于eHR建档的,因此在eHR建档 ...

  4. AspectJ框架基于注解的AOP实现

    AspectJ的AOP实现:有两种方式,一种是基于XML配置文件,一种是基于注解的,由于注解更为常用,这里 这里只针对注解来学习. ---------------------------------- ...

  5. linux apidoc的安装和使用

    1.先去官网下载已编译好的安装包 以Centos7.4 64位为例, 下载地址: https://nodejs.org/dist/v8.1.2/node-v8.1.2-linux-x64.tar.xz ...

  6. CentOS ping: unknown host 解决方法

    如果ping命令返回如下错误,那主要的可能性就是系统的DNS设置有误 [root@CentOS5 ~]# ping www.sina.com.cn ping: unknown host www.sin ...

  7. oracle已知会导致错误结果的bug列表(Bug Issues Known to cause Wrong Results)

    LAST UPDATE:     1 Dec 15, 2016 APPLIES TO:     1 2 3 4 Oracle Database - Enterprise Edition - Versi ...

  8. js获取对象的key

    var obj = {"name":"名字","age":"18"};var temp = "";f ...

  9. 《C Elements of Style》 书摘

    <C Elements of Style> 书摘 学完C语言和数据结构后,虽然能解决一些问题,但总觉得自己写的程序丑陋,不专业.这时候看到了Steve Oualline写的<C El ...

  10. Navicat for MySQL安装工具及破解工具

    链接: http://pan.baidu.com/s/1i500eEh 密码: 9s26