豆米的博客

前言

在8月份写了一篇sublimeText3编辑器使用教程，但是当我开始进入前端行业才发现，上次写的那篇所提到的插件以及一些配置开始已经赶不上时代了，加上最近需要解决项目的Eslint的代码规范，然后用之前那些插件已经不能达到我的目的，并且其中的一些插件用到的地方不是很频繁，所以打算再更新一篇文章，以达到更加完美的软件开发环境。

1、插件更新

总结上一篇的插件做了个表，仅供参考(更倾向于React+ES6)。

插件名	作用	推荐指数(1-10)
git	提供git命令可以直接在sublime上操作	6
gitGutter	GitGutter 更好的帮助开发者查看文件之前的改动和差异	6
Theme - SpaceGray	主题插件	5
SideBarEnhancements	实用的右键菜单增强插件	10
Bracket Highlighter	括号、引号、标签高亮插件	10
Alignment	代码格式的自动对齐	8
SublimeLinter	超级实用的代码审查框架插件	10
AdvancedNewFile	自动创建文件并保存	6
Emmet	代码自动生成插件	10
AllAutocomplete	会搜索所有打开的文件来寻找匹配的提示词	7
AutoFileName	自动补齐文件路径以及提示文件名称	10
DocBlockr	帮助你创造你的代码注释	8
Comment-Snippets	可以迅速地创建有用的注释	7
Sublime CodeIntel	SublimeCodeIntel 是一个代码提示、补全插件	8
TrailingSpaces	能高亮显示多余的空格和Tab，并可以一键删除它们	10
Autoprefixer	补全CSS3 私有前缀	10
Babel	支持Babel语法，自动补全Babel/React等代码	10
Oceanic Next Color Scheme	与Babel更加符合的主题	10
SublimeLinter-contrib-eslint	Eslint检查插件	10
HTMLBeautify	帮助格式化HTML代码	10
jsFormat	帮助格式化Javascript代码	10
CSScomb	帮助格式化CSS代码	10

还有剩余的那些HTML5、HTMLAttributes、JavaScript Completion、JavaScript Snippets、JSLint、ColorPicker、Hex-to-HSL-Color Converter、CSS Compact Expand、jQuery、jQuery Mobile 1.4 Snippets、Bootstrap 3 Snippets、Origami、EncodingHelper 、PlainTasks、SublimeTmpl、 Better Completion、用的很少，有些插件重复导致每次写代码的时候提示太乱，所以直接影响开发效率，索性来个一锅端，全都卸载掉了。

2、支持ES6和React

支持这两个只需要Babel这个插件就可以了，该插件可以识别React的JSX语法并且支持ES6的所有标准语法。安装完该插件Sublime中便会多出一个新的语法项：JavaScript (Babel)。

该插件推荐新的主题：Oceanic Next Color Scheme和Zeus Color Scheme，这里我们选择使用前者。另外还需要配置让.js和.jsx文件都按照JavaScript (Babel)来识别。

1. 打开任意的Js、Jsx两种类型文件
2. 打开 View > Syntax > open all with extensions as ... > Babel > JavaScript(Babel)

如果你需要一些代码补全，还可以安装babel/babel-sublime-snippets或者Babel Snippets。

为了让之前的Emmet代码补全工具支持JSX，可以在其配置文件中添加下面的配置：

{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [{
        "operand": "source.js", 
        "operator": "equal", 
        "match_all": true, 
        "key": "selector"
    },{
        "key": "preceding_text", 
        "operator": "regex_contains", 
        "operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?)", 
        "match_all": true
    },{
        "key": "selection_empty", 
        "operator": "equal", 
        "operand": true, 
        "match_all": true
    }]
  }

3、个人全局配置更新

在之前一篇文章的基础上修改一些属性以及增加一些属性，尤其使用了等宽字体、忽略node_modules、主题改变、自动换行等功能加进去，让编辑器看起来更加舒服。配置如下：

{
	"binary_file_patterns":
	[
		"generated/*",
		"*.tbz2",
		"*.gzip",
		"*.jpg",
		"*.jpeg",
		"*.png",
		"*.gif",
		"*.ttf",
		"*.tga",
		"*.dds",
		"*.ico",
		"*.eot",
		"*.pdf",
		"*.swf",
		"*.jar",
		"*.zip"
	],
	"bold_folder_labels": true,
	"caret_style": "phase",
	"color_scheme": "Packages/User/SublimeLinter/Oceanic Next (SL).tmTheme",
	"default_line_ending": "LF",
	"draw_minimap_border": true,
	"draw_white_space": "all",
	"ensure_newline_at_eof_on_save": true,
	"fade_fold_buttons": false,
	"file_exclude_patterns":
	[
		"*.pyc",
		"*.pyo",
		"*.exe",
		"*.dll",
		"*.obj",
		"*.o",
		"*.a",
		"*.lib",
		"*.so",
		"*.dylib",
		"*.ncb",
		"*.sdf",
		"*.suo",
		"*.pdb",
		"*.idb",
		".DS_Store",
		"*.class",
		"*.psd",
		"*.db",
		"*.sublime-workspace"
	],
	"folder_exclude_patterns":
	[
		".svn",
		".git",
		".hg",
		"CVS",
		"node_modules"
	],
	"font_face": "Consolas",
	"font_size": 14,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"line_padding_bottom": 1,
	"line_padding_top": 1,
	"rulers":
	[
		80,
		100
	],
	"show_encoding": true,
	"tab_size": 2,
	"theme": "Oceanic Next.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true,
	"word_wrap": true
}

4、支持Eslint

支持Eslint需要一个框架以及eslint子插件，框架便是SublimeLinter，子插件便是 SublimeLinter-contrib-eslint。

注意

Eslint和SublimeLinter-contrib-eslint是不一样的，如果你使用的是Eslint的话，请参考其网站的介绍，但是因为该插件检查文件的时候都需要敲一次Ctrl+Alt+E，所以肯定比SublimeLinter-contrib-eslint麻烦。因此强烈推荐使用后者！！

4.1、Eslint坑

4.1.1、第一个坑

也不知道是不是真的坑，至少我这边配置出来是一直错的，因为我想使用的本地的eslint命令来执行(按照官网指示，根目录下已经有package.json、.eslintrc等文件)，但是一直报错：(打开sublimeLinter的Debug模式)

SublimeLinter: WARNING: eslint deactivated, cannot locate local or global binary 
SublimeLinter: ERROR: eslint cannot locate 'eslint'

这个问题可以查看：https://github.com/roadhump/SublimeLinter-eslint/issues/23

不知道后面解决了没有？

最后的解决方法只能使用全局配置的方法，全局安装Eslint，以及那些Eslint插件比如eslint-plugin-react等。

4.1.2、第二个坑

如果按照我之前第一篇安装所有的插件然后再安装这个插件Eslint，之后在控制台可以看到没有打印任何错误，但是Eslint并没有执行，也就是没有任何反应，按照官网的说明并没有什么用：

There are no errors in console, but plugin does nothing.

ESLint >2.0.0 does not enable any default rules and you should have config file for your code. Run in your console:

eslint --init # if eslint is global
./node_modules/.bin/eslint --init # if eslint is installed locally

最后的解决方法重新安装Sublime，然后把那些基本必备的插件直接拷贝到SublimeText的安装目录下的Data/Installed Package目录下即可，暂时不知道哪个插件导致冲突的。

5、福利

记得上一节说过Sublime可以当做绿色版使用的，所以针对这次的更新，自己把sublime整个软件打包上传到CSDN上，有需要的童鞋可以去下载。地址：http://download.csdn.net/detail/linxiaowu66/9637331

sublimeText3编辑器支持ES6的开发

前言