目前使用的一些IDE和編輯器：
myeclipse idea
webstorm
sublime vscode(這兩款算是編輯器，但是可以安裝插件使之成為自己的專屬IDE)【使用這兩款頻率較高】
搭配使用：
githhub
coding
git
node.js
svn(棄用，版本管理工具)
maven（在用，但是沒有自己搭建過）
技術博客：
- github+hexo （好用，但是目前因為自己配置搞亂了，不想去倒騰了）
- 簡書（在用）
- CSDN
下面介紹一些
1. git 版本管理工具
2. webpack（前端必備神器）
- 學會了最初的打包功能，config.js配置好入口和出口就能webpack命令打包好。
- 由于打包好不利于調試，so 配置source-map利于調試。
- 使用webpack構建本地服務器
需要使用npm轉門下載server組件，然后進行配置.
功能：
瀏覽器監測你的代碼的修改，并自動刷新修改后的結果 - Loaders
常用的功能：- json 轉換成js文件
- es6 es7轉換成js文件
- 就react而言，可以將JSX轉換成js文件
Loaders需要單獨安裝并且需要在webpack.config.js下的modules關鍵字下進行配置，Loaders的配置選項包括以下幾方面：
test：一個匹配loaders所處理的文件的拓展名的正則表達式（必須）
loader：loader的名稱（必須）
include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
query：為loaders提供額外的設置選項（可選）
//安裝可以裝換JSON的loader
npm install --save-dev json-loader
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名
},
module: {//在配置文件里添加JSON loader
loaders: [
{
test: /\.json$/,
loader: "json-loader" // "json"
}
]
},
devServer: {
contentBase: "./public",//本地服務器所加載的頁面所在的目錄
colors: true,//終端中輸出結果為彩色
historyApiFallback: true,//不跳轉
inline: true//實時刷新
}
}
-
Babel
Babel其實是一個編譯JavaScript的平臺，它的強大之處表現在可以通過編譯幫你達到以下目的：
- 下一代的JavaScript標準（ES6，ES7），這些標準目前并未被當前的瀏覽器完全的支持；
- 使用基于JavaScript進行了拓展的語言，比如React的JSX
Babel其實是幾個模塊化的包，其核心功能位于稱為babel-core的npm包中，不過webpack把它們整合在一起使用，但是對于每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
// npm一次性安裝多個依賴模塊，模塊之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
module: {
loaders: [
{
test: /\.json$/,
loader: "json" //替換成json-loader
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',//在webpack的module部分的loaders里進行配置即可
//替換成babel-loader
query: {
presets: ['es2015','react']
}
}
]
},
現在你的webpack的配置已經允許你使用ES6以及JSX的語法了。繼續用上面的例子進行測試，不過這次我們會使用React，記得先安裝 React 和 React-DOM
npm install --save react react-dom
引用的文件使用ES6的語法，更新Greeter.js并返回一個React組件
import React, {Component} from 'react'
import config from './config.json';
class Greeter extends Component{
render() {
return (
<div>
{config.greetText}
</div>
);
}
}
export default Greeter
mian.js文件需要使用這個。入口文件
使用ES6的模塊定義和渲染Greeter模塊
import {render} from 'react-dom';
import Greeter from './Greeter';
render(<Greeter />, document.getElementById('root'));
剩下還未看完
http://www.lxweimin.com/p/42e11515c10f
3. vscode 常用插件
必備插件
功能性
Auto Close Tag : 匹配標簽，關閉對應的標簽。很實用【HTML/XML】
Auto Rename Tag : sublime和webstorm也有這個內置功能，改變標簽的時候同時改動開閉合標簽；【HTML/XML】
beautify : 良好的拓展性，可以格式化JSON|JS|HTML|CSS|SCSS
,比內置格式化好用
Code Runner : 代碼編譯運行看結果，支持眾多語言
colorize : 會給顏色代碼增加一個當前匹配代碼顏色的背景，非常好
Document This : JSDOC注解調用，值得易用
Git History : 不得不贊的插件，誰用誰知道，功能很贊
HTML CSS Support : 這個也是必備插件之一
Path Autocomplete : 路徑智能補全
Path Intellisense ： 路徑智能提示.
SCSS IntelliSense Preview : SCSS智能提醒，配置強大
Syncing: 這個同步插件要比官方市場那個最高下載量的要好，支持刪除同步！！！
Version Lens : 可以及時看到package.json
內部版本的變動，很實用
Output Colorizer : 可以終端日志輸出著色，實用
代碼片段插件
JavaScript (ES6) code snippets : ES6的代碼片段，實用
JavaScript Snippet Pack : ES5及以下的代碼片段，實用
語法校驗
stylelint : 比內置的要全，更智能
主題
Panda:用了相當久的一套顏色高亮，個人感覺很耐看
Enki Theme (Material Design Inspired) : 當前用的代碼高亮，個人感覺很贊
Material Icon Theme : 一套扁平化的文件圖標，內置的seti
也很優秀，還有simple icon
和vscode-icons
總結
這次推薦的都是必備的，下一波是NG2+TS2推薦插件
