Sublime for Web

越飞鸾

2023-12-01

部分转载自：
一个前端程序猿的Sublime Text3的自我修养
Sublime Text 3 前端开发常用优秀插件介绍
JavaScript 开发者必备的10款 Sublime Text 插件
Sublime Text 配置Python,Java,Markdown

设置

当前命令面板设置的值

使用 Ctrl+`调出console面板输入sublime.log_commands(True)，可以得到当前使用的命令面板进行设置的值。方便进行快捷键的绑定。
下面这些都可以通过命令面板快捷查找
Settings-User：个人对于sublime_text的定制。使用JSON格式，会直接覆盖掉Settings-Default默认设置中的内容。

实现保存自动刷新网页显示

Subliem 默认没有HTML的Build System
tools:工具下的Build System选择新建一个选项后，进行如下设置（注意后缀），保存到user目录下：

//这样设置。。地址是你的浏览器位置
//保存到F:\application\Sublime Text Build 3083 x64\Data\Packages\User目录下就行
//执行HTML的时候直接按Ctrl + B就可以在浏览器里显示了
{
    //"cmd" :["E:\\Program Files (x86)\\360 chrome\\360Chrome\\Chrome\\Application\\360chrome.exe","$file"],
    "cmd" :["/usr/bin/google-chrome","$file"],
    "selector":["text.html"]
}

而且选择第一个auto，修改内容后按Ctrl+B，可以看到自动打开了chrome并且是修改后的内容。

安装主题

先使用Ctrl+Shift+P 输入PCI，回车选择 Install Package 。需要等待一会加载时间，输入Theme-Spacegray。其实不输入完也会模糊匹配出来的。
回车等待安装就好，成功后会弹出一个使用设置的页面，把其中的如下代码拷贝到Settings-User，保存，你会发现，默认的主题已经变成了刚刚我们查看过的主题了。

    "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",
    "theme": "Spacegray Eighties.sublime-theme"

当然，你也可以通过菜单栏，进行主题的选择。会有相同的效果。它会自动在Settings-User进行设置。

常用插件

IMEsupport

让你的搜狗输入法可以定位到你的光标需要新建一个文件才能用

Emmet：不解释

前端开发必备！Emmet使用手册
Emmet速查表

There is no packages available for installation. Package Control无法安装Emmet

直接在Preferences->Browse Packages中，git clone https://github.com/sergeche/emmet-sublime.git
安装完成后，当我使用”ctrl+e”自动补全快捷键时，出现了一个这样的错误信息

Please wait a bit while PyV8 binary is being downloade

原来原因是缺少PyV8（一个Python封装V8引擎的壳，提供了简单可用的API，利用python来构建出JavaScript的运行时环境）二进制文件。
下载当前系统对应的PyV8文件
解压至Sublime Text安装目录下”Packages”文件夹(Preferences=>Browse Packages…)下的PyV8文件夹中（如没有则自己创建）
重启Sbulime Text

Emmet插件tab键无法使用的解决办法

package control升级屏蔽掉了Emmet，所以删掉屏蔽的Emmet重新启动就可以正常使用
解决办法：package control 中 remove emmet插件，remove pyv8 binary（若无此操作，重装emmet的时候则不会安装新的pyv8 binary）；
再install emmet插件，sublime text会同时安装相匹配的pyv8 binary，安装结束之后重启sublime text。
如果提示pyv8安装失败，会给出一个链接，关键的一步就在这里，把那个链接复制下来
把下载的文件解压后放到以下目录。C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Installed Packages\PyV8
如果没有PyV8这个目录的话就新建一个。
最终就是这样一个目录 C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Installed Packages\PyV8\pyv8-win64-p3
至此，emmet插件恢复使用。

解决Emmet安装后，PyV8自动，手动安装都不行的问题

手动安装Emmet
将解压后的emmet-sublime-master 放到Browse Package文件夹中
pcr中删除原来的Emmet
手动安装PyV8
在Packages文件夹中新建PyV8的文件夹
将下载的PyV8解压到pyv8-win…….，然后放到PyV8文件夹中
一定要按这个格式来装官方格式
在Ubuntu上可以这样试试，用Package Control安装的都在Installed Packages目录中，在这里将下载的PyV8放进去也行
输入一个”!”，再按回车，就会补全一个简单的html

AdvancedNewFile：快速新建文件

假设有文件夹file。我们正在输入代码，又想在新的子目录下新建html文件的话用传统方式得很多步，新建目录，新建文件，保存等等等。
但是有了该插件之后，事情就变得简单了许多，只需要按下Ctrl+Shift+Alt+N，输入文件夹以及文件名，你就会看到如下效果:（回车，你会发现已经子目录下的文件已经新建完成了！）
test.html 实在当前文件夹先建立
file/text.html 会新建立一个file的文件夹，里面还多了一个.py的文件
默认的保存路径是在左侧侧边栏的第一个文件夹里

ConvertToUTF8

解决Windows中的GBK乱码问题

Nettuts+ Fetch：管理类库

安装成功后输入Ctrl+Shift+P打开命令面板，输入Fetch，可以看到以下：
选择file可以看到设置的文件。选择下载和设置，自己可以设置文件的下载地址
配合刚刚上面的插件 AdvancdeNewFile 使用，简直完美..

必装插件，无比强大，就不过多介绍了。可以在浏览器中打开，还可以配置不同文件的打开方式。
单单下面这一个功能就必须安装了:快捷在不同浏览器打开文件
SideBarEnhancements本是增强侧边栏的插件，这里将教大家如何用来做sublime text 3浏览器预览插件，并可自定义浏览器预览的快捷键。
安装此插件，点击工具栏的 Preferences -> Package Setting -> Side Bar > Key Building-User，键入以下代码，这里设置按Ctrl + Shift + C复制文件路径，按F1~F5分别在firefox，chrome，IE，safari，opera浏览器预览效果，当然你也可以自己定义喜欢的快捷键，最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。
换成自己的浏览器路径

[
    { "keys": ["ctrl+shift+c"], "command": "copy_path" },
    //firefox
    { "keys": ["f1"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "C:\\software\\Browser\\Mozilla Firefox\\firefox.exe",
                "extensions":".*" //匹配任何文件类型
            }
    },
    //chrome
    { "keys": ["f2"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "C:\\Users\\Mr.DenGo\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
                "extensions":".*"
            }
     },
    //ie
     { "keys": ["f3"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
                "extensions":".*"
            }
    },
    //safari
    { "keys": ["f4"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "C:\\software\\Browser\\Safari\\safari.exe",
                "extensions":".*"
            }
     },
     //opera
     { "keys": ["f5"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "C:\\software\\Browser\\opera\\opera.exe",
                "extensions":".*"
            }
    }
]

DocBlockr：代码块注释

可以快速的对函数进行注释。保存代码规范
支持多种语言。（个人觉得brackets的这个插件比Sublime Text做得好多了。）
/* : 回车创建一个代码块注释
/** : 回车在自动查找函数中的形参等等。
它会生成 JSDoc 格式的注释。如果你从没有使用过类似的工具，DocBlockr 会让你觉得以前没有它是如何写代码的。帮助你创造你的代码注释，通过解析功能，参数，变量，并且自动添加基本项目。

Git :版本控制

可视化的操作：帮助你与你的Git repo协议进行交互。它支持很多命令像init, push, pull, branch, stash,等等。了解更多关于你在Sublime Text里面究竟能使用哪些Git功能，以提高您的工作流程。

GitGutter: Sublime Text 查看文件之前的改动和差异

有了 Git 插件之后，GitGutter 更好的帮助开发者查看文件之前的改动和差异，提升开发效率。
会在行的前面显示绿色的加号

HTML-CSS-JS Prettify 格式化HTML、CSS、JSON、JS代码

快捷键是Ctrl + Shift + H
用prettify搜索安装
要先安装好Node.js，如果提示路径错误，先检查路径，再看看当前编辑的文件路径是否有中文名
如果还是无法使用，还是安装Tag吧
Tag最好用手动安装的，这样快捷键才能用，否则只能通过Edit -> Tags -> Format

JsFormat：JavaScript 和 JSON 代码格式化

JsFormat 基于 JS Beautifier，可以帮助你自动格式化 JavaScript 和 JSON。这对于阅读代码是非常有用的。
可在JS文件中通过鼠标右键->JsFormat 或快捷键：Ctrl + Alt + f 或者，你也可以使用菜单栏。
一定是在JS文件中
可定制喜欢的格式：在 SublimeText 3 中 Preferences -> Package Settings -> JsFormat -> Settings - Default 可以调整这些配置。

jQuery：JQuery的API代码片段

我知道目前在很多地方 jQuery 看似已经落伍了，但是如果你不是建立一个交互性很强的网站或者你只是想在已有应用上添加功能，它仍然是非常有用的。
比如，输入 $.a就可以让我选择$ .ajax()，然后自动扩展成以下代码：

    $.ajax({
      url: '/path/to/file',
      type: 'default GET (Other values: POST)',
      dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
      data: {param1: 'value1'},
    })
    .done(function() {
      console.log("success");
    })
    .fail(function() {
      console.log("error");
    })
    .always(function() {
      console.log("complete");
    });

Monokai Extended

Monokai Extended比较喜欢Soda Dark和Monokai，这里有Monokai Extended。这个 color scheme 是 Monokai Soda 的增强。
如果再配合 Markdown Extended，将大大改善 Markdown 的语法高亮。
Monokai Extended.sublime-package添加的代码，这个我添加了以后会报错！！！，有时间再改

    <!-- BEGIN Bracket Highlighter plugin color modifications -->
    <dict>
        <key>name</key>
        <string>Bracket Default</string>
        <key>scope</key>
        <string>brackethighlighter.default</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#FFFFFF</string>
            <key>background</key>
            <string>#A6E22E</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>Bracket Unmatched</string>
        <key>scope</key>
        <string>brackethighlighter.unmatched</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#FFFFFF</string>
            <key>background</key>
            <string>#FF0000</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>Bracket Curly</string>
        <key>scope</key>
        <string>brackethighlighter.curly</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#FF00FF</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>Bracket Round</string>
        <key>scope</key>
        <string>brackethighlighter.round</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#E7FF04</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>Bracket Square</string>
        <key>scope</key>
        <string>brackethighlighter.square</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#FE4800</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>Bracket Angle</string>
        <key>scope</key>
        <string>brackethighlighter.angle</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#02F78E</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>Bracket Tag</string>
        <key>scope</key>
        <string>brackethighlighter.tag</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#FFFFFF</string>
            <key>background</key>
            <string>#0080FF</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>Bracket Quote</string>
        <key>scope</key>
        <string>brackethighlighter.quote</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#56FF00</string>
        </dict>
    </dict>
    <!-- END Bracket Highlighter plugin color modifications -->

BracketHighlighter:符号高亮

该插件提供行数列高亮的各种配对的语法符号，显示在行号上
行前面会显示当前的括号形式
可以使括号高亮匹配，这个需要自己来配置配色方案。我的配置方案（Bracket settings-User和主题文件Monokai Extended.sublime-package添加的代码）。
Bracket settings-User

{
    "bracket_styles": {
        // This particular style is used to highlight
        // unmatched bracket pairs. It is a special
        // style.
        "unmatched": {
            "icon": "question",
            "color": "brackethighlighter.unmatched",
            "style": "highlight"
        },
        // User defined region styles
        "curly": {
            "icon": "curly_bracket",
            "color": "brackethighlighter.curly",
            "style": "highlight"
        },
        "round": {
            "icon": "round_bracket",
            "color": "brackethighlighter.round",
            "style": "outline"
        },
        "square": {
            "icon": "square_bracket",
            "color": "brackethighlighter.square",
            "style": "outline"
        },
        "angle": {
            "icon": "angle_bracket",
            "color": "brackethighlighter.angle",
            "style": "outline"
        },
        "tag": {
            "icon": "tag",
            "color": "brackethighlighter.tag",
            "style": "outline"
        },
        "single_quote": {
            "icon": "single_quote",
            "color": "brackethighlighter.quote",
            "style": "outline"
        },
        "double_quote": {
            "icon": "double_quote",
            "color": "brackethighlighter.quote",
            "style": "outline"
        },
        "regex": {
            "icon": "regex",
            "color": "brackethighlighter.quote",
            "style": "outline"
        }
    }
}

JavaScript Next：完美支持ECMAScript 6

JavaScript Next 提供了比默认JavaScript Package更好的语法高亮，而且他完美支持ECMAScript 6。
建议完全使用 JavaScript Next代替JavaScript Package。

CSS3:CSS3语法高亮

默认安装的Sublime Text对CSS3的支持让人抓狂，帧动画？别开玩笑了你只会看到一片白色的纯文本一样的代码。
事实上不光CSS3，我建议用CSS3 Package完全替代原来的CSS Package来完成语法高亮。把原来的禁用了吧

Color Highlighter ：CSS颜色高亮

这个插件我等了很久了（在使用breakets的时候发现的，好用到爆），我最早用Sublime Text写CSS时候就在想“这堆颜色码谁知道是什么颜色”。。
Color Highlighter这个插件会检测CSS文件中的颜色码，不论是Hex码或者RGB码都能很好的显示。
Color Highlighter能够设置成用背景色或者边框提示颜色，我一般在Settings里做这样的设置：

    {
      "ha_style": "filled",
      "icons": false
    }

SublimeLinter 检查代码语法是否有错误，并提示

用于高亮提示用户编写的代码中存在的不规范和错误的写法，支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言
打开 SublimeLinter 的配置文件，Preferences->Package Settings->SublimeLinter->Settings - User，进行如下配置：

运行模式

    "sublimelinter": "save-only",

SublimeLinter 的运行模式，总共有四种，含义分别如下：
true - 在用户输入时在后台进行即时校验；
false - 只有在初始化的时候才进行校验；
“load-save” - 当文件加载和保存的时候进行校验；
“save-only” - 当文件被保存的时候进行校验；
推荐设置为 “save-only”，这样只在编写完代码，保存的时候才校验，Sublime Text 运行会更加流畅。

校验引擎

    "sublimelinter_executable_map":
    {
        "javascript":"C:\\Program Files\\nodejs\\node.exe",
        "css":"C:\\Program Files\\nodejs\\node.exe"
    } //配置 JavaScript 和 CSS 校验的 JS 引擎（这里用的是 Node.js）安装路径

这里是配置 JavaScript 和 CSS 校验需要用到的 JS 引擎（这里用的是 Node.js）的安装路径。

JSHint 选项

SublimeLinter 使用 JSHint 作为默认的 JavaScript 校验器，也可以配置为 jslint 和 gjslint（closure linter）。下面我使用的 jshint 校验选项，大家可以根据自己的编码风格自行配置，选项的含义可以参考这里：http://www.jshint.com/docs/#options

    "jshint_options":
    {
        "strict": true,
        "noarg": true,
        "noempty": true,
        "eqeqeq": true,
        "undef": true,
        "curly": true,
        "forin": true,
        "devel": true,
        "jquery": true,
        "browser": true,
        "wsh": true,
        "evil": true
    }

CSSLint 选项

SublimeLinter 使用 CSSLint 作为 CSS 的校验器，下面是默认配置的校验选项，可以根据个人编码风格修改：

    "csslint_options":
    {
        "adjoining-classes": "warning",
        "box-model": true,
        "box-sizing": "warning",
        "compatible-vendor-prefixes": "warning",
        "display-property-grouping": true,
        "duplicate-background-images": "warning",
        "duplicate-properties": true,
        "empty-rules": true,
        "errors": true,
        "fallback-colors": "warning",
        "floats": "warning",
        "font-faces": "warning",
        "font-sizes": "warning",
        "gradients": "warning",
        "ids": "warning",
        "import": "warning",
        "important": "warning",
        "known-properties": true,
        "outline-none": "warning",
        "overqualified-elements": "warning",
        "qualified-headings": "warning",
        "regex-selectors": "warning",
        "rules-count": "warning",
        "shorthand": "warning",
        "star-property-hack": "warning",
        "text-indent": "warning",
        "underscore-property-hack": "warning",
        "unique-headings": "warning",
        "universal-selector": "warning",
        "vendor-prefix": true,
        "zero-units": "warning"
    }

SublimeLinter-jshint: JavaScript 代码有语法检查

需先安装SublimeLinter
通过 SublimeLinter-jshint 的说明我们可以看到，这个组件依赖于 nodeJS 下的 jshint，所以我们安装 nodeJS 环境和 nodeJS 下的 jshint。
安装 Node.js
通过 npm 安装jshint
在cmd命令行下输入”npm install -g jshint”，完成安装jshint
通过 jshint -v 可以查看当前版本
安装成功后，重启就可以测试代码的风格了。
当然还可以自定义校验规则，在该目录下使用Ctrl+Shift+N创建文件.jshintrc，在其中使用JSON格式配置校验风格。
并且在左下角会有错误提示。需要注意的是内容有更改时，才会立即生效。

Colorpicker：使用一个取色器改变颜色

使用方法: ctrl + shift + w，快捷键有冲突，需修改。可以通过ctrl+shift+p：来搜索调用
打开Sublime Text –> Preferences –> Browse Packages，找到Colorpicker文件夹并进入，找到对应操作系统的Default.sublime-keymap文件

Sublime for Web

设置

当前命令面板设置的值

实现保存自动刷新网页显示

安装主题

常用插件

IMEsupport

Emmet：不解释

There is no packages available for installation. Package Control无法安装Emmet

Please wait a bit while PyV8 binary is being downloade

Emmet插件tab键无法使用的解决办法

解决Emmet安装后，PyV8自动，手动安装都不行的问题

AdvancedNewFile：快速新建文件

ConvertToUTF8

Nettuts+ Fetch：管理类库

Sidebar Enhancements：增强侧边栏，浏览器预览插件

Doc​Blockr：代码块注释

Git :版本控制

GitGutter: Sublime Text 查看文件之前的改动和差异

HTML-CSS-JS Prettify 格式化HTML、CSS、JSON、JS代码

JsFormat：JavaScript 和 JSON 代码格式化

jQuery：JQuery的API代码片段

Monokai Extended

BracketHighlighter:符号高亮

JavaScript Next：完美支持ECMAScript 6

CSS3:CSS3语法高亮

Color Highlighter ：CSS颜色高亮

SublimeLinter 检查代码语法是否有错误，并提示

运行模式

校验引擎

JSHint 选项

CSSLint 选项

SublimeLinter-jshint: JavaScript 代码有语法检查

Colorpicker：使用一个取色器改变颜色

AutoFileName：文件路径自动提示

CSScomb : CSS属性排序

JavaScript Completions和Java​Script & Node​JS Snippets 输入提示，代码补全

SyncedSidebarBg:自动同步侧边栏底色为编辑窗口底色

相关阅读

相关文章

相关问答

DocBlockr：代码块注释

JavaScript Completions和JavaScript & NodeJS Snippets 输入提示，代码补全