SublimeText3(mac版)上好用的插件

本节索引

1. sublime Text3 插件的安装

2. 代码编辑非常有用的5个插件

3. 配置React 开发环境所需要的插件支持

首先 请查看你的sublime Text3 上是否安装了Package Control ,

安装 Package Ctrol： 使用 ctrl + ～ 打开控制台，输入以下代码：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

1. 代码格式化的插件 (格式化HTML+CSS+JS+JSON代码的插件)

HTML-CSS-JS Prettify 是一个可以格式化HTML、CSS、Javascript和JSON的sublime插件，有着很棒的格式化效果。不过建议大家学习常用的代码编辑格式尽量写到符合标准的代码

• 安装过程如下：

    1. 在Sublime Text中，按下Ctrl+Shift+P调出命令面板;
  
    2. 输入install 调出 Install Package 选项并回车;
  
    3. 输入pretty，并在列表中选择HTML-CSS-JS Prettify后回车即可安装

• 可能遇到的问题以及解决方案（全部安装正确但格式化不能使用）

  1、Node.js路径配置不对（首先确保安装了Node.js），修改一下HTML-CSS-JS Prettify的用户配置即可（Preferences -> Package-settings -> HTML/CSS/JS Prettify -> Set Prettify Preferences）：

  2、如果路径没有问题，查看是不是sublime打开的文件路径中有中文，由于HTML-CSS-JS Prettify不支持utf-8，打开文件路径如果有中文，也会报Node.js路径错误。

    解决办法如下：
        1、preferences->Browse Packages（打开sublime 的安装文件）  
  
        2、修改 HTML-CSS-JS Prettify 目录下的 HTMLPrettify.py 文件
  
        3、83行：node_path = PluginUtils.get_node_path() 改为：node_path = PluginUtils.get_node_path().encode("utf-8")
  
        4、85行：file_path = self.view.file_name() 改为：file_path = self.view.file_name().encode("utf-8")

2.Js和Css语法检查插件  sublimelinter以及配套的插件

启动Package Control

安装sublimelinter 插件

安装sublimelinter-jshint（备选安装 sublimelinter-jslint）

安装sublimelinter-csslint

安装node运行环境

注意不要使用jsxhint,这是针对于需要支持react语法的插件,想要安装react语法插件请参照后面的sublime 搭建react开发环境

1. 全局安装 jshint /csslint

    安装命令:sudo npm install -g jshint 注意插件名称都为小写.
    :sudo npm install -g csslint

2. 将下列代码复制到
   Preference->package Settings->SublimeLinter->Setttings-User 中

    注意下面代码中的(第五行和第六行 sublimelinter_executable_map)JS和Css的路径问题：
        mac中可以再终端用 which node命令 查看node的安装路径
        windows 中找到实际的node安装位置复制路径即可。
   
    {
    "sublimelinter": "save-only",
    "sublimelinter_popup_errors_on_save": true,
    "sublimelinter_executable_map": {
        "Javascript": "/usr/local/bin/node",
        "css": "/usr/local/bin/node"
        },
    "jshint_options": {
        "strict": false,
        "quotmark": "single", //只能使用单引号
        "noarg": true,
        "noempty": true, //不允许使用空语句块{}
        "eqeqeq": true, //!==和===检查
        "undef": true,
        "curly": true, //值为true时，不能省略循环和条件语句后的大括号
        "forin": true, //for in hasOwnPropery检查
        "devel": true,
        "jquery": true,
        "browser": true,
        "wsh": true,
        "evil": true,            
        "unused": "vars", //形参和变量未使用检查
        "latedef": true, //先定义变量，后使用
        "globals": {
            "grunt": true,
            "module": true,
            "window": true,
            "jQuery": true,
            "$": true,
            "global": true,
            "document": true,
            "console": true,
            "setTimeout": true,
            "setInterval": true
            }
        },
    "csslint_options": {
        "adjoining-classes": false,
        "box-sizing": false,
        "box-model": false,
        "compatible-vendor-prefixes": false,
        "floats": false,
        "font-sizes": false,
        "gradients": false,
        "important": false,
        "known-properties": false,
        "outline-none": false,
        "qualified-headings": false,
        "regex-selectors": false,
        "shorthand": false,
        "text-indent": false,
        "unique-headings": false,
        "universal-selector": false,
        "unqualified-attributes": false
        }
    }

   sublimelinte 支持的语言截图(后续的语言支持需要用户自行配置)
   

   
   

   sublimelinte 支持的语言截图

3. JSFormat 插件(只是针对于js文件有效,想要格式化HTML等文件,请参照第一点)

1. 按下快捷键 Ctrl+Alt+p 打开Package Control命令面板

2. 输入 jsformat 回车安装即可.

3. 在你写Javascript代码时,选中需要格式化的代码，按下 Ctrl+Alt+f 快捷键后,js代码自动格式化对齐,赶快试一试吧!

4. 如果上面的快捷键使用无效可以使用命令格式化代码,你可以选中要格式化的代码 ,然后按下 Ctrl+Alt+P (mac 系统 command + shift +p) 输入命令: Format:Javascript 回车即可格式化.

4. Emmet 是一个前端开发的利器 用于自动完成HTML的代码书写

1. Emmet 的基本用法是：输入简写形式，然后按 Tab 键。

2. 关于 Emmet 的更多用法，请看官方文档，这份速查表可以帮你快速记忆简写形式。

3. Emmet安装：在Package Control中 install Package -> Emmet 安装Emmet.

4. 使用：输入特定含义的字符 按 Tag 自动完成

5. Theme – Soda + sublime Text3 主题修改

1. 安装：
   Theme – Soda

2. 配置：

    在 Preferences ->Setting - User 中的[]中括号中添加,(注意配置文是数组的形式)
   
    "theme": "Soda Light.sublime-theme"  或 
    "theme": "Soda Dark.sublime-theme"

6.Sublime Text 3安装React 开发环境插件

1. babel-sublime 支持ES6，React.js, jsx代码高亮，对 Javascript, jQuery 也有很好的扩展

   • 安装：PC上ctrl+shift+p（MacCmd+shift+p）打开面板输入babel安装

   • 配置：打开.js, .jsx 后缀的文件;

       打开菜单view，
       Syntax -> Open all with current extension as... -> Babel -> Javascript (Babel)，
       选择babel为默认 Javascript 打开syntax

2. sublimeLinter-jsxhint JSX 代码审查，实时提示语法错误, 帮助快速定位错误

   • 安装PC上 ctrl+shift+p（MacCmd+shift+p）打开面板输入sublimeLinter-jsx安装(请先确保sublimeLinter安装成功)

   • 必须有node.js环境支持 安装node.js

   • 安装node中安装jsxhint
     npm install -g jsxhint

3. 修改Emmet兼容jsx 文件(使用Tag 快速完成react 代码书写)

   
   

   JSX语法书写

   • 安装PC上 ctrl+shift+p（MacCmd+shift+p）打开面板输入emmet安装

   • 使用方法 打开preferences -> Key bindings - Users，把下面代码复制到[ ]中括号内部(注意配置文件为数组形式)。

       {
           "keys": [
               "super+e"
           ],
           "args": {
               "action":"expand_abbreviation"
           },
           "command":"run_emmet_action",
           "context": [{
               "key":"emmet_action_enabled.expand_abbreviation"
           }]
       },
       {
           "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*)?({FNXX==XXFN}*?}$)?)",
               "match_all": true
           }, {
               "key":"selection_empty",
               "operator":"equal",
               "operand": true,
               "match_all": true
           }]
       }

     • 使用super+e触发 emmet；
     • 正则判断用 a，div，span，p，button标签默认tab 触发；
     • 默认 class 修改为 className 注 supre+e 在 PC 上指的是win+e（pc 建议修改为emmet 默认按键 ctrl+e）,在 mac 上指的是cmd+e
     • 详细请参考规则来源StackOverflow，正则小有修改