——工欲善其事必先利其器
以下工具部分是windows和macOS通用，如，sublimeText，webStorm等；部分只使用于macOS。
MarkDown
那就先讲一下写这篇文章的编辑器好了。
现在无论是github
还是gitee(码云，之前叫做git.os.china),
随便新建项目还是打开一个知名的项目，都会有MarkDown文件，就是通常的README.md，后缀是.md，如下图：
还有很多牛逼的社区,如segmentfault、stackoverflow也都支持这种格式的在线编辑，
对那些经常写技术博客的的人是超级方便的，本文也是采用这种形式。
常用的编辑器如Mou、MacDown、MWeb等。
当然喜欢折腾的你，也可以集成到Atom、webstorm、sublimeText等你喜欢的编辑器中去。
基本语法如下：
mac上有一个很好的编写工具Mou,也可以使用强大的SublimeText,Webstorm
1.'#'语法
this is h1，#'多少决定层级大小，相当于HTML的H标签
this is h2，#'多少决定层级大小，相当于HTML的H标签
this is h3，#'多少决定层级大小，相当于HTML的H标签
this is h4，#'多少决定层级大小，相当于HTML的H标签
this is h5，#'多少决定层级大小，相当于HTML的H标签
this is h6，#'多少决定层级大小，相当于HTML的H标签
2.插入图片
3.强调
强调 或者 强调 (示例：斜体)
加重强调 或者 加重强调 (示例：粗体)
特别强调 或者 特别强调 (示例：粗斜体)
4.代码
我们经常需要在博客中添加代码，可以使用如下两种方式
a.三个反引号（键盘左上角波浪键)开始,回车，代码区域，再回车，例：
File UpLoad
Uploadify Demo
b.方法二，制表符（tab键）或者4个空格（注意所有代码都需要制表符或4个空格），回车键；若没有，则会展现文件预览效果；
正确的方式
File UpLoad
Uploadify Demo
5.换行
如果我们想把一行文本进行换行，我们可以在需要换行的地方输入至少
两个空格，然后回车即可，
注意，如果不回车，是没有效果的。
6.引用
k可以使用'>'来引用，一个'>'表示一级引用，两个'>>',表示二级引用，如下
这是一级引用
这是二级引用
7.超链接
这个太常用了，明明自己是抄袭别人的，但又不能说，所以只好链的超链接上去了，比如我现在这样
8.分割线
如果我们想用分割线对内容进行分割，我们可以在单独一行里输入3个或以上的短横线、星号或者下划线实现。短横线和星号之间可以输入任意空格。
——————
9.列表标记
如果我们的内容需要进行标记，那么我们可以使用下面的方式
有序列表"1."+Space;
- order list 1;
- order list 2;
- order list 3;
无序列表"*"+Space或者"-"+Space
- order list 1;
- order list 2;
- order list 3;
- order list 1;
- order list 2;
- order list 3;
编辑器
程序猿找不到”对象(undefined)“，种类繁多，基本都可以归为一个原因——活该。
先放一段视频，这是HBO(对，就是那个制作了《权利的游戏》、《西部世界》等神剧的公司)《硅谷》里面的片段，主要讲述一群逗逼程序猿创业的故事，相当励志。
Tab VS Space
Tab VS Space02
编辑器，这玩意几天几夜也说不完，谁好谁不好，什么编辑器之神(Vim)，神的编辑器(Emacs),据说还有“圣战”，当然是大神之间的事情，我等凡夫俗子就不要去凑热闹了，因为神的战争，你一个凡人去凑什么热闹，一上场就领饭盒了，有兴趣的可以自己google(百度)。编辑器好不好，还是看你怎么用。 当然有些编辑器熟练使用之后的确能很大程度上提高你的工作效率，早早完成工作，少加班，有老婆孩子的，提前回家配老婆孩子；单身猿还是老老实加班，提前回去只能自己陪自己，。我们选择一个最适合自己的就好了。据说，编码方式，也有圣战，典型的是使用“tab"键格式代码还是”space“。差不多就是上面视频里面说的意思。
扯了这么多，下面讲一下几个比较常用的几个。
-
- SublimeText
这个几乎大家都知道，轻巧，秒开，随用随开，自动保存，无论你是有内涵的人还是注重表面（主题)的人，都可以根据自己的需要进行定制，没有做不到，只有想不到，基本可以定制化所有你需要的功能。windows和mac，通用，免费，前后端也通吃。如下图，
- SublimeText
- 2.前端JS开发神器——Webstorm
由JetBrains开发的一款软件，被称为前端JS开发神器，虽然社区没有SublimeText活跃，但是也可以配置很多插件、主题，功能也很强大，和SublimeText一样，可以无限免费用。唯一的缺点————大，不是一般的大，非常占内存，尤其index的时候，能把电脑卡到哭，基本打开之后，就不用再关了。
如下图，
webstorm的git管理也很方便，可以进行版本合并，对比，切换等等，超级好用
- 3.Atom
是大名鼎鼎的github专门为程序猿搞的一款编辑器，支持 Windows、Mac、Linux 三大桌面平台,完全免费,并且已经在 GitHub 上开放了全部的源代码。一款非常漂亮的编辑器，当然，功能也很强大。现在用的人也越来越多，老爸牛逼，前途一片光明。如下图，
- 4.HBuilder(Window/Mac)免费
两年前我第一款APP就用它写的，个人觉得不好用，现在不清楚什么情况。之所以列出来，因为，就像别人说的，这是国人自己搞的，支持一下国货吧！如下图，
- 5.其他
还有很多其他牛逼的编辑器 ，找一款适合自己的就行。
命令行工具
1.iTerm
在业内口碑很高，已经封神，被称为mac下最好用的终端工具，注意，没有之一。集成git，版本管理超级方便。
官网：iTerm
具体使用可参考
http://www.open-open.com/lib/view/open1439560980661.html
https://www.zhihu.com/question/274473702.oh-my-zsh
我也很喜欢，可以和iTerm、mac自带Terminal、webstorm一起使用，主题可以很多，堪称装逼神器。具体配置和使用就不展开讲了，大致讲一下怎么集成到webstorm中去。
首先
根据http://www.cocoachina.com/ios/20160302/15372.html，安装配置好zsh，包括装逼字体Powerline，不了解Powerline，猛戳这里,配置好iterm之后效果如下图：
其实就是目录不同结构用不同的颜色区块显示，具体有没有用，那再说，至少证明我们有一颗爱钻研（ZB）的心。
但是，光这样还不行。因为像我们这使用用集成terminal工具编辑器的人，比如webstorm，为嘛我还需要再开一个程序，一个窗口去使用本来就不需要的操作呢？从用户体验（现在是个人都会说用户体验）来说（主要我们自己），这是极不友好的，所以，为了提升使用体验，还是必须把这种字体集成到webstorm的terminal中去。
具体操作也很简单，把terminal的字体设置一下就OK了。
- a.首先，设置teminal的shell
-
b.然后，command+',',找到Font设置，并保存如下
powerline-webstorm02.png c.再找到Console Font，如下设置
- d.再将.bash_profie中路径输出，粘贴到.zshrc文件中，否则一些配置可能用不了，比如安卓打包adb命令。
- e.最后，打开webstorm的terminal，开启装逼模式
Chorme
不会合理用Chrome的前端不是个好前端，个人认为Chrome浏览器是最牛逼、最好用的浏览器，没有之一。Chrome之所以牛逼，除去本身速度快，性能好，稳定，兼容性好，很大原因也在于它强大的扩展功能。Chrome强大的控制台调试这次就不讲了，下面讲一下我常用的几个Chrome扩展程序。
先大致讲一下如何安装(需和谐上网)
查看已安装的扩展程序，
和谐上网之后，打开Chrome应用商店
可以搜索安装你想要的扩展程序，安装很简单。 如下图，
安装之后，在Chrome右上角会有你安装成功的各个扩展程序，如下图
1.印象笔记·剪藏
印象笔记网页剪切功能是我最早使用的Chrome扩展程序之一。登录印象笔记之后，可以将整个网页、文章区域、特定区域保存到你的印象笔记中，很方便。 如下图，
2.JSON-handle
JSON数据是前端工作中最常接触的了，虽然现在一般最新的浏览器会默认有格式化JSON数据的功能，只是不同浏览器效果不一样，有时候会有乱码等奇怪问题，装一个JSON格式化的插件还是很有必要的。
3.FeHelper
前端比较常用的功能，什么字符串转码了，JSON格式化，图片Base64啦等等，它都有了，对于调试之类的还是很好用的，真正项目中，不会用到，因为比较二，需要手动一个个去点，蛋疼不行，真正项目中都是使用各种npm包，一个命令行全部搞定。如下图，
4.Octotree
终于不用github项目，一层层往里面点了，然后不断返回，跳来跳去，网络好，那还好。还是上图吧，一图胜万言，客观请看图，
5.React Developer Tools
若项目是用react写的，那这是必备的，可以查看组件树，就类似html的dom结构一样。
如下图，
6.Vue.js devtools
当然，有React就有Vue的，功能类似。
7.Charset
修改网站的默认编码
8.Code Cola
Code Cola是一个可视化编辑在线页面css样式的chrome插件。
前端数据处理
大家都知道，由于现如今前后端分离已是大势所趋，
而前端的很大一部分工作就是数据处理了。
大部分时候，我们需要和后台小伙伴联合调试，可是有时候时间、资源有限，
前端工作不能完全依赖于后台，所以有时候我们需要自己模拟数据；
常见方式我知道的有如下三种：
- 1.直接在文件中定义，简单粗暴——当然也最二；如下
function fetchUserList() {
}
var isDev = true;
var data = {
"status": 3,
"message": "hello world",
"string": "★★★",
"number": 69,
"boolean": true,
"object": {
"110000": "北京市",
"120000": "天津市",
"130000": "黑龙江省"
},
"array": [
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
},
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
}
],
"regexp": "6288712123-",
"time": "2014-01-16 21:21:22",
"color": "rgba(121, 242, 135, 0.94)",
"word": "jztuqwmur",
"text": "而风气究及。",
"name": "崔杰",
"url": "news://imkpjsnq.ev/dhthtrgqy"
};
if (isDev) {
fetchUserList(data);
} else {
$.ajax({
url: '/list',
type: 'GET',
dataType: 'json',
success: function(data) {
fetchUserList(data);
}
});
}
- 2.自己搞一个json文件，调试的时候引入这个文件；
- 3.使用mockjs等处理；
直接在文件中定义和使用json文件比较简单，在此不再啰嗦。
下面讲一下比较装逼的一种方式——使用mockjs的方式
安装
yarn add mockjs --dev
//or
npm i mockjs --save
路径配置
let host = YOUR URL;
需要模拟的接口地址，如
export const API_URL = {
host,
login: `${YOUR}/login`,
store_lists: `${YOUR}/store/search/`,
};
使用
a.引入
import Mock from 'mockjs'
import {API_URL} from '../config'
b.随机数据定义
let Random = Mock.Random;//引用
Random.cname();//随机产生中文名
Random.csentence(4);//随机产生4个中文字符
c.生成数据
export default const mock = {
StoreLists: Mock.mock(API_URL.store_lists, {
'msg|40': [//生成40条数据
{
'id|+1': 1,//从1开始生成id，累计增加
'name': '@csentence(4)',//随机产生4个中文字符
'lat|30.10': 1.4918,//生成浮点数
'lng|119.10': 1.5240,
'create_time|+1': 1502678783,//从1502678783开始生成id，累计增加
'update_time|+1': 1502678783,
'aid|+1': 0,
'version|1': ['production', 'debug'],//随机设置version的值production or debug
'uid|+1': 0,
}
],
'err': 0,//模拟返回成功参数
'count': 40,//定义总的数据长度
}),
}
d.模拟处理mock数据，使用reqwest，当然也可以使用ajax等方式
reqwest({
url: API_URL.store_lists,
type: 'json',
method: 'get',
success: (response) => {
console.log('啦啦啦~mock数据是', response);
let data = response;
if (data.err === 0) {
if (data.count !== 0) {
const pagination = {..._this.state.pagination};
pagination.total = data.count;
_this.setState({
listData: data.msg,
pagination: pagination,
loading: false,
})
} else {
_this.setState({
listData: [],
pagination: 0,
loading: false,
});
}
} else {
_this.setState({
listData: [],
pagination: 0,
loading: false,
});
}
},
error: (err) => {
console.log('Ops,发生错误了', err)
},
});
注意：目前Mock不支持fetch方法
参考链接:
https://www.cnblogs.com/Leo_wl/p/6001952.html
https://www.cnblogs.com/Leo_wl/p/6693211.html
http://highsea90.com/t/mock/
https://github.com/nuysoft/Mock
http://mockjs.com/