目前使用的一些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"//打包后输出文件的文件名
},
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.jianshu.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推荐插件
网友评论