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. Fiddler4入门--手机抓包工具安装和使用说明

    Fiddler4入门--手机抓包工具安装和使用说明.电脑最好是笔记本连同一个wifi,这样能和手机保持统一局域网内. 很多区块链dapp项目方风控做的很差,利用fiddler抓包分析找一些漏洞,然后利 ...

  2. UART接口与COM口的区别

    原文地址:https://blog.csdn.net/wordwarwordwar/article/details/78883732 简单的讲:(UART与COM) 嵌入式里面说的串口,一般是指UAR ...

  3. hashcat使用命令简介

    1.指定HASH类型 在HashCat中--hash-type ?参数可以指定要破解的HASH类型,运行hashcat主程序加上--help参数,在* Generic hash types:中可以看到 ...

  4. MyEclipse中项目运行时发生了Tomcat报错:[java.lang.OutOfMemoryError: PermGen space]

    Tomcat内存溢出,异常信息如下: 十一月 26, 2017 1:52:26 下午 org.apache.catalina.core.ContainerBase$ContainerBackgroun ...

  5. Kattis之旅——Fractional Lotion

    Freddy practices various kinds of alternative medicine, such as homeopathy. This practice is based o ...

  6. 虚拟机下Linux系统如何设置IP地址

    虚拟机下Linux系统设置IP地址三种方法 文章来源:https://jingyan.baidu.com/article/ea24bc399ffeb9da62b3318f.html 工具/原料   V ...

  7. socket编程-阻塞和非阻塞

    转自:https://www.cnblogs.com/sunziying/p/6501045.html 建立连接 阻塞方式下,connect首先发送SYN请求道服务器,当客户端收到服务器返回的SYN的 ...

  8. 看起来像是break的考量

    代码运用了if+break: package day20181008; import java.util.Scanner; public class ZuoYe01 { public static v ...

  9. 02: djangorestframework使用

    1.1 djangorestframework登录.认证和权限 1.认证与权限相关模块 # -*- coding: utf-8 -*- from django.utils import six fro ...

  10. k8s build new API

    apiserver-builder git hub api conventions storage api arch step by step,   we can follow it. api con ...