【后续还会补充】Sublime Text 4 常用插件安装及配置方法

一、安装 Package Control 组件

Package Control 是 Sublime Text 插件包管理器。sublime Text 只有安装了 Package control 组件，后期才能安装各种不同的插件。

Package Control 安装方法：按『Ctrl+Shift+P』组合键，调出如下界面，搜索『install package control』点击安装。

后续插件安装方法：按下『Ctrl+Shift+P』，输入『install』，选择『Package Control: Install Package』，在输入想要安装的插件名进行搜索即可。下文就不赘述了。

二、通用的插件

1. AutoFileName

主要功能：在代码中快速录入文件路径，当要输入文件路径时，会进行提示。
无需配置，下载安装好即可。

2. Bracket Highlighter

主要功能：代码匹配，可匹配 []、()、{}、“”、”、<tag></tag> 等等，并高亮标记，便于查看起始和结束标记。
配置方法：下载安装好后，点击『preferences - Package settings - BracketHighlighter - Bracket setting』，在右边输入如下代码：

{// 这个是在成对的括号左侧显示一条竖线，表明开闭括号的范围与位置，如果不需要把true改为false"content_highlight_bar": false,// 下面不同括号的显示方式，默认是下划线，这里改成了高亮"bracket_styles": {"default": {"icon": "dot","color": "region.yellowish brackethighlighter.default","style": "highlight"},"unmatched": {"icon": "question","color": "region.redish","style": "outline"},"curly": {"icon": "curly_bracket","color": "region.purplish"// "style": "underline"},"round": {"icon": "round_bracket","color": "region.yellowish"// "style": "underline"},"square": {"icon": "square_bracket","color": "region.bluish"// "style": "underline"},"angle": {"icon": "angle_bracket","color": "region.orangish"// "style": "underline"},"tag": {"icon": "tag","color": "region.orangish"// "style": "underline"},"c_define": {"icon": "hash","color": "region.yellowish"// "style": "underline"},"single_quote": {"icon": "single_quote","color": "region.greenish"// "style": "underline"},"double_quote": {"icon": "double_quote","color": "region.greenish"// "style": "underline"},"regex": {"icon": "star","color": "region.greenish"// "style": "underline"}},// 忽视限制因素，但是当代码较多的时候可能会影响性能"ignore_threshold": true,
}

3. DocBlockr

主要功能：生成优美注释（可自行设置），包括函数名、参数、返回值等，并以多行显示，手动写比较麻烦。
配置方法：下载安装好后，点击『preferences - Package settings - DocBlockr - setting - user』，输入一下内容：（这里按需求可以自行设置）

{"jsdocs_extra_tags":["@fuction ${1:[description]}","@Author PanyCG","@DateTime {{datetime}}",],"jsdocs_function_description": false
}

三、Web 前端开发的插件

1. Emmet

主要功能：Web 前端开发的神器。它利用了类 CSS 代码的编写方式能够快速地生成对应的 HTML 代码，进一步提升编写 HTML 的效率。
无需配置，安装好直接使用。

几种基本的使用技巧：

! + Tab，可快速生成 HTML 文档常用结构代码（默认），当然也可以修改这个模板。

<!--! + Tab-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

标签名 + Tab ，自动补全标签，包括尖括号与结尾的结束标签。

<!--p + Tab-->
<p></p>

> + Tab，表示输入为标签子代。

<!--div>p>span-->
<div><p><span></span></p>
</div>

+号 + Tab ，表示输入为标签同级。

<!--多个dom元素之间用 + 号连接即可-->
<!--div+p+span-->
<div></div>
<p></p>
<span></span>

^号 + Tab ，表示输入到标签上级。

<!--div>p^span-->
<div><p></p></div>
<span></span>

*number + Tab ，表示输入多个标签。

<!--div>ul>li*3-->
<div><ul><li></li><li></li><li></li></ul>
</div>

添加标签属性
- .类名 + Tab
- #id名 + Tab
- [普通属性] + Tab
- {元素内容} + tab

<!--.nav-->
<div class="nav"></div><!--#id-->
<div id="itme"></div><!--一次添加多个属性 div#header.container[title="我是一个容器"]-->
<div id="header" class="container" title="我是一个容器"></div><!--div{我是文字内容}-->
<div>我是文字内容</div>

占位符$ + Tab，$ 的数量代表序列号的位数

<!--div.container#header>p{$$排序}*3-->
<div class="container" id="header"><p>01排序</p><p>02排序</p><p>03排序</p>
</div>

2. View in Browser

主要功能：可以直接在浏览器上运行 HTML 文件。
配置方法：『preferences - Key Bindings』
- 修改快捷键为『F3』
- 修改默认浏览器为『Google 浏览器』

[// F3 - open_in_browser{"keys": ["f3"],"command": "open_in_browser"},// 设置默认浏览器为 Google{"keys": ["f2"],"command": "side_bar_files_open_with","args": {"paths": [],"application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe","extensions": ".*"}}
]

四、Markdown 插件

1. MarkdownEditing

主要功能：Markdown 写作者必备的插件，不仅可以高亮显示 Markdown 语法还支持很多编程语言的语法高亮显示。
- 颜色方案仿 Byword 及 iA writer
- 自动匹配星号（*）、下划线（_）及反引号（`）
- 选中文本按下以上符号能自动在所选文本前后添加配对的符号
- 方便粗体、斜体和代码框的输入
安装好即可以使用。

2. MarkdownPreview + LiveReload （浏览器实时预览）

主要功能：支持在浏览器中预览 markdown 文件，同时可以将 md 文件导出为 html 代码。
配置方法：
- 配置『MarkdownPreview』：使用『F1』快捷键打开浏览器预览。点击『preferences - Key Bindings』，加入以下代码；
```
{"keys": ["f1"],"command": "markdown_preview","args": {"target": "browser","parser": "markdown"}
}
```
然后打开『Preferences - Package Settings - Markdown Preview - Settings』，加入以下代码：
```
{"enable_autoreload": true
}
```
- 配置『LiveReload』：使得不用重开浏览器，保存文件后，浏览器自动刷新。点击『Ctrl + Shift + P』，输入『LiveReload: Enable/disable plug-ins』，选择『Simple Reload with delay (400ms)』或者『Simple Reload』，两者的区别仅仅在于后者没有延迟。然后，为了使配置永久生效，点击『Preferences - Package Settings - LiveReload - Settings User』，在配置文件中加入如下设置：
```
{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]
}
```

解决公式渲染的问题

参考如何在markdown中完美插入数学公式，借助『MathJax引擎』来实现。但是每次都需要在 markdown 文件首部添加一行代码，太麻烦了，且存在一定的问题。

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

解决方法：先配置『Markdown Preview - Settings』，内容如下：

{"enable_autoreload": true,"js": ["https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js","res://MarkdownPreview/js/math_config.js"],/*Markdown extension configuration.To specify a function in this JSON configuration, create an object with the key "!!python/name"and set it to the import path to the function "module.submodule.etc.function".*/"markdown_extensions": [// Python Markdown Extra with SuperFences.// You can't include "extra" and "superfences"// as "fenced_code" can not be included with "superfences",// so we include the pieces separately."markdown.extensions.smart_strong","markdown.extensions.footnotes","markdown.extensions.attr_list","markdown.extensions.def_list","markdown.extensions.tables","markdown.extensions.abbr",{"markdown.extensions.codehilite": {"guess_lang": false}},// Extra's Markdown parsing in raw HTML cannot be// included by itself, but "pymdownx" exposes it so we can."pymdownx.extrarawhtml",// More default Python Markdown extensions{"markdown.extensions.toc":{"permalink": "\ue157"}},"markdown.extensions.meta","markdown.extensions.sane_lists","markdown.extensions.smarty","markdown.extensions.wikilinks","markdown.extensions.admonition",// PyMdown extensions that help give a GitHub-ish feel"pymdownx.superfences",  // Nested fences and UML support{"pymdownx.magiclink": {   // Auto linkify URLs and email addresses"repo_url_shortener": true,"repo_url_shorthand": true}},"pymdownx.tasklist",     // Task lists{"pymdownx.tilde": {  // Provide ~~delete~~"subscript": false}},{"pymdownx.emoji": {  // Provide GitHub's emojis"emoji_index": {"!!python/name": "pymdownx.emoji.gemoji"},"emoji_generator": {"!!python/name": "pymdownx.emoji.to_png"},"alt": "short","options": {"attributes": {"align": "absmiddle","height": "20px","width": "20px"},"image_path": "https://assets-cdn.github.com/images/icons/emoji/unicode/","non_standard_image_path": "https://assets-cdn.github.com/images/icons/emoji/"}}},{"pymdownx.arithmatex":{"generic": true,"smart_dollar": false}}],
}

由于上面配置文件中设置的 js 路径是『res://MarkdownPreview/js/math_config.js』，该路径是相对于 sublime 包的保存路径而言的，因此我们需要在该目录下新建文件『math_config.js』，内容如下：

MathJax.Hub.Config({config: ["MMLorHTML.js"],extensions: ["tex2jax.js"],jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"],tex2jax: {inlineMath: [ ['$','$'], ["\\(","\\)"] ],displayMath: [ ['$$','$$'], ["\\[","\\]"] ],processEscapes: true},TeX: {extensions: ["AMSmath.js", "AMSsymbols.js"],TagSide: "right",TagIndent: ".8em",MultLineWidth: "85%",equationNumbers: {autoNumber: "AMS",},unicode: {fonts: "STIXGeneral,'Arial Unicode MS'"}},displayAlign: "center",showProcessingMessages: false,messageStyle: 'none'}
);

【后续还会补充】Sublime Text 4 常用插件安装及配置方法相关推荐

Sublime Text 3 的插件安装（完美解决插件安装出错的问题）及常用插件推荐
一.安装Package Control包 1.用Chrome插件setupvpn翻出去(只要能翻啥都行),然后打开 https://packagecontrol.io/installation 2.下 ...
Sublime Text 3 常用插件以及安装方法
安装Sublime Text 3插件的方法: 先安装sublime软件,由于sublime是收费的,以下是软件sublime注册码 -– BEGIN LICENSE -– Michael Barnes ...
Sublime Text 3 常用插件以及安装方法(转)
http://www.cnsecer.com/460.html 安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手点下页面的广告吧, ...
sublime text html5插件,Sublime Text一些常用插件
古人云:工欲善其事,必先利其器,确实利用好一些工具能快速提高我们的开发效率.今天我们就来介绍一款极度简洁.轻便.优雅的ide--Sublime Text的插件,帮助你更好更快的完成自己的编码工作. 首 ...
sublime text 一些常用插件
A File Icon 功能:美化文件前面的图标. Auto Close HTML Tags 功能:写HTML代码时,自动补全闭合标签 ConverToUTF8 功能:GBK编码兼容.就是可以打开GB ...
Sublime Text 3 python和Package Control配置方法
(如果下面的方法试了Packages control功能还是不能用参考这个方法: 1.直接把C:\Sublime Text 3x64\Data\Packages\ 目录下原有的Packages c ...
sublime html整理阶梯,sublime text 之添加插件并使用
通过package controll install 安装各种插件: 1:AdvancedNewFile,安装完毕后快捷键:ctr+alt+n:输入框中输入你要创建的文件夹和文件,就创建好了. ...
Sublime Text SVN/SFTP 插件序列号通过微信自动获取
Sublime Text SVN, SFTP插件序列自动获取方法操作步骤: 1. 关注微信号smart-host 2. 发送 sftp,邮箱或者 svn,邮箱到公众号(如下图),微信号和邮箱同时 ...
Sublime Text 3便携版下载安装和常用插件安装--顺便解决报错An error occured installing和no packages available for install
文章目录 Sublime Text 3便携版下载安装和常用插件安装 1.Sublime Text 3便携版下载: 2.sublime 插件控制器(Package Control)安装 2.1离线安装P ...

【后续还会补充】Sublime Text 4 常用插件安装及配置方法

目录

一、安装 Package Control 组件

二、通用的插件

1. AutoFileName

2. Bracket Highlighter

3. DocBlockr

三、Web 前端开发的插件

1. Emmet

2. View in Browser

四、Markdown 插件

1. MarkdownEditing

2. MarkdownPreview + LiveReload （浏览器实时预览）

【后续还会补充】Sublime Text 4 常用插件安装及配置方法相关推荐

最新文章

热门文章

【后续还会补充】Sublime Text 4 常用插件安装及配置方法

目录

一、安装 Package Control 组件

二、通用的插件

1. AutoFileName

2. Bracket Highlighter

3. Doc​Blockr

三、Web 前端开发的插件

1. Emmet

2. View in Browser

四、Markdown 插件

1. MarkdownEditing

2. MarkdownPreview + LiveReload （浏览器实时预览）

【后续还会补充】Sublime Text 4 常用插件安装及配置方法相关推荐

最新文章

热门文章

3. DocBlockr