前言

在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

还有剩余的那些HTML5HTMLAttributesJavaScript CompletionJavaScript SnippetsJSLintColorPickerHex-to-HSL-Color ConverterCSS Compact ExpandjQueryjQuery Mobile 1.4 SnippetsBootstrap 3 SnippetsOrigamiEncodingHelperPlainTasksSublimeTmplBetter Completion、用的很少,有些插件重复导致每次写代码的时候提示太乱,所以直接影响开发效率,索性来个一锅端,全都卸载掉了。

2、支持ES6和React

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

该插件推荐新的主题:Oceanic Next Color SchemeZeus 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

注意

EslintSublimeLinter-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上,有需要的童鞋可以去下载。地址://download.csdn.net/detail/linxiaowu66/9637331