整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
sublime-text当中，如果文件类型为HTML时，当输入！或html:5之后，再键入Tab键即可生成默认的基本骨架的代码段。我们也可以在基本骨架上修改出我们常用的一些自定义代码段，保存之后，下次需要使用时，我们用指定的快捷键也可以快速生成。
下面由sublime入门教程栏目给大家介绍在sublime当中创建自定义代码段的步骤。
1、生成基本骨架
打开sublime之后，新建一个文件，确保把右下角的文件类型由默认的Plain Text改为HTML。然后再用 ! 或 html:5 配合Tab键快速生成默认的基本骨架代码段。
2、编辑出自定义代码段
jquery的入口函数当中用到关键字$,由于$是代码段的一个语法关键字，若在自定义代码段当中直接使用 "$" ，会出现语法错误，导致无法生成该代码段。可以选择用 "$" 来代替代码段当中的 "$" 。之后在使用快捷键生成代码段时，不会出现 "\" 这个转义符号的。
3、设置参数并保存该自定义代码段
选择点击菜单栏的Tools->Developer->New Snippet。此时会新生成一个XML格式的界面，如下所示。
Hello, ${1:this} is a ${2:snippet}.
这个部分只是为了提示我们设置并控制代码段当中光标停留位置的语法。记下之后可删除这一行代码，然后把我们刚刚编辑好的自定义代码段复制粘贴进去。（如下图所示，在第3行的位置当中进行插入）。
我们可以根据之前提示的语法来控制生成的代码段当中光标提留位置，更方便之后的编辑。
如我们在原代码段上修改为。
<title>${1:01}-jquery案例-${2:}</title>
<body> ${3:} </body>
表示当完成代码段创建之后，用快捷键快速生成之后，关标首先出现在01的前面，并选中01这个字段，方便修改编辑。之后再按下Tab键，光标就出现在jquery-之后，在这里并没有选中内容，方便插入内容。再按下Tab键，光标就会出现在body的标签对当中，在这里也是方便插入内容。
之后再对<!-- <tabTrigger>hello</tabTrigger> -->，去掉注释，并再标签对当中输入自定义快捷命令的名字。如下所示。
表示之后我们在新建的HTML文件当中，输入myjquery，再键入Tab即可快速生成我们自定义的代码段。
完成编辑之后，进行保存。直接用ctri+s默认保存至sublime的安装目录的Packages->User当中。为了便于我们自定义代码段的管理，在其中新建一个snippets文件夹，把自定义代码段文件都保存至这个文件夹当中。
文件名可以自定义命名，但后缀名必须为 .sublime-snippet，否则会出错。
这样就完成了自定义代码段的创建了，接下去，再在sublime当中新建一个HTML文件，再输入myjquery,配合Tab键即可快速生成指定的自定义代码段啦！
以上就是sublime当中创建自定义代码段的详细内容，更多请关注其它相关文章！
更多技巧请《转发 + 关注》哦！
TML编辑器是一种用于创建、编辑和预览HTML（超文本标记语言）代码的工具或应用程序。它提供了一个直观的界面，使用户能够轻松地编写和设计网页内容。本文主要介绍HTML 常用编辑器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。
参考文档：https://www.cjavapy.com/article/3299/
Visual Studio Code（简称VS Code）是一款由微软开发的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。VS Code是一款轻量级的代码编辑器，启动迅速，占用资源少。VS Code提供了丰富的扩展和插件，可以根据需求安装插件来增强编辑器功能。
1）安装和配置
官网地址：Visual Studio Code - Code Editing. Redefined
根据操作系统下载并安装相应版本的VS Code。打开VS Code后，可以根据自己的喜好配置编辑器设置，如主题、字体等。
2）新建HTML文件
在 VS Code 安装完成后，选择" 文件(F)->新建文件(N) "，在新建的文件中输入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>3）编辑HTML文件
在VS Code中，点击左上角的"文件"菜单，选择"打开文件"，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。
在编辑器中可以直接修改HTML文件的内容。VS Code会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。
4）插件推荐
HTML CSS Support：提供对HTML和CSS的支持，包括代码片段、自动补全等功能。
Live Server：启动一个本地开发服务器，实时预览HTML页面的效果。
Prettier：格式化HTML代码，使代码结构更整洁。
Auto Close Tag：自动闭合HTML标签，提高编码效率。
Bracket Pair Colorizer：对成对的括号进行着色，方便识别代码块。
Sublime Text是一款流行的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。
Sublime Text的界面非常简洁，没有多余的菜单和工具栏，更便于专注于代码编辑。Sublime Text支持多种编程语言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text拥有强大的插件系统，用户可以根据需要安装插件来扩展编辑器功能。用户可以自定义快捷键、主题、颜色方案等，以满足个性化需求。Sublime Text启动迅速，响应快速，适合于快速编辑代码。
1）安装和配置
官网地址：Sublime Text - Text Editing, Done Right
根据操作系统下载并安装相应版本的Sublime Text。打开Sublime Text后，可以根据自己的喜好进行编辑器设置，如字体、主题等。
2）新建HTML文件
在Sublime Text 安装完成后，选择" File->New File "，在新建的文件中输入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>3）编辑HTML文件
在Sublime Text中，点击左上角的"File"菜单，选择"Open File"，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。在编辑器中可以直接修改HTML文件的内容。Sublime Text会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。
4）插件推荐
Emmet：提供HTML/CSS快速编写和自动完成功能，可以大大提高编码效率。
Sublime Linter：对代码进行实时语法检查，帮助发现潜在的错误和警告。
Color Highlighter：对CSS中的颜色进行高亮显示，方便调试和修改样式。
SideBarEnhancements：增强侧边栏功能，提供更多文件操作选项。
Dreamweaver是由Adobe公司开发的一款全球知名的网页设计和开发工具。它为开发人员和设计师提供了一个可视化的界面，可以直观地创建和编辑网页内容，同时也支持手动编辑代码。Dreamweaver提供可视化界面，可以直观地拖拽和编辑网页元素，无需手动编写代码。除了可视化界面，Dreamweaver也支持手动编辑代码，适合于开发人员和设计师。Dreamweaver可在Windows和macOS等多个平台上运行。Dreamweaver集成了代码编辑器、预览窗口、文件管理器等功能，提供全面的开发环境。
1）安装和配置
官网地址：Website design software | Adobe Dreamweaver
根据操作系统下载并安装相应版本的Dreamweaver。打开Dreamweaver后，，根据需要进行编辑器设置，如界面语言、字体、代码颜色等。
2）编辑HTML文件
在Dreamweaver中，点击左上角的"File"菜单，选择"New"，然后选择"HTML"，即可新建一个空白的HTML文件。内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>使用可视化界面，可以直接拖拽页面元素、调整布局、插入图片等。若需要手动编辑HTML代码，可以在下方的代码编辑器中进行修改。Dreamweaver会自动提供代码补全和语法高亮功能。在Dreamweaver中，可以实时预览网页效果，点击右上角的"Live View"按钮即可。
3）CSS和JavaScript支持
Dreamweaver也支持CSS和JavaScript的编辑和预览，可以帮助创建更丰富的网页效果。在编辑器中可以直接编辑CSS样式和JavaScript代码，并实时查看效果。
4）网页上传和发布
Dreamweaver集成了FTP功能，可以直接将编辑好的网页上传到服务器。点击"Site"菜单，选择"Manage Sites"，配置好站点设置，即可进行上传和发布。
5）Dreamweaver模板和库
Dreamweaver提供模板和库功能，可以保存和复用常用的网页元素和样式，提高开发效率。
参考文档：https://www.cjavapy.com/article/3299/
功能：安装包管理
简介：sublime插件控制台，提供添加、删除、禁用、查找插件等功能
使用：https://sublime.wbond.net/installation
安装方法：
CTRL+` ，出现控制台
粘贴以下代码至控制台
ST2：
| 1 | import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read());print('Please restart Sublime Text to finish installation') |
ST3：
| 1 | importurllib.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()) |
其他方法：
如果以上方法不能安装，请使用下面的方法
选择菜单：Preferences > Browse Packages
打开sublime插件安装包文件夹
下载文件并复制到打开的文件夹
重启sublime
功能：编码快捷键，前端必备
简介：Emmet作为zen coding的升级版，对于前端来说，可是必备插件，如果你对它还不太熟悉，可以在其官网（http://docs.emmet.io/）上看下具体的演示视频。
使用：教程-http://docs.emmet.io/cheat-sheet/、http://peters-playground.com/Emmet-Css-Snippets-for-Sublime-Text-2/
功能：Javascript的代码格式化插件
简介：很多网站的JS代码都进行了压缩，一行式的甚至混淆压缩，这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理，包括换行和缩进等等，是代码一目了然，更快读懂~
使用：在已压缩的JS文件中，右键选择jsFormat或者使用默认快捷键（Ctrl+Alt+F）
功能：LESS高亮插件
简介：用LESS的同学都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们
使用：打开.less文件或者设置为less格式
功能：编译Less
简介：监测到文件改动时，编译保存为.css文件
使用：打开.less文件，编写代码保存即可看到同时生成.css的文件，如果没有则需要安装node。不推荐用这种方法编译，要么用koala，要么就用grunt编译。
功能：”=”号对齐
简介：变量定义太多，长短不一，可一键对齐
使用：默认快捷键Ctrl+Alt+A和QQ截屏冲突，可设置其他快捷键如：Ctrl+Shift+Alt+A；先选择要对齐的文本
功能：CSS添加私有前缀
简介：CSS还未标准化，所以要给各大浏览器一个前缀以解决兼容问题
使用：Ctrl+Shift+P，选择autoprefixer即可。需要安装node.js。
其他设置如快捷键请参考：https://sublime.wbond.net/packages/Autoprefixer
功能：粘贴板历史记录
简介：方便使用复制/剪切的内容
使用：
Ctrl+alt+v：显示历史记录
Ctrl+alt+d：清空历史记录
Ctrl+shift+v：粘贴上一条记录（最旧）
Ctrl+shift+alt+v：粘贴下一条记录（最新）
功能：代码匹配
简介：可匹配[], (), {}, “”, ”, <tag></tag>，高亮标记，便于查看起始和结束标记
使用：点击对应代码即可
功能：git管理
简介：插件基本上实现了git的所有功能
使用：https://github.com/kemayo/sublime-text-git/wiki
功能：jQ函数提示
简介：快捷输入jQ函数，是偷懒的好方法
功能：生成优美注释
简介：标准的注释，包括函数名、参数、返回值等，并以多行显示，手动写比较麻烦
使用：输入/*、/**然后回车，还有很多用法，请参照
https://sublime.wbond.net/packages/DocBlockr
功能：调色板
简介：需要输入颜色时，可直接选取颜色
使用：快捷键Windows: ctrl+shift+c
功能：文件转码成utf-8
简介：通过本插件，您可以编辑并保存目前编码不被 Sublime Text 支持的文件，特别是中日韩用户使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。
使用：安装插件后自动转换为utf-8格式
功能：快捷输入文件名
简介：自动完成文件名的输入，如图片选取
使用：输入”/”即可看到相对于本项目文件夹的其他文件
功能：node代码提示
教程：https://sublime.wbond.net/packages/Nodejs
功能：sublime中文输入法
简介：还在纠结 Sublime Text 中文输入法不能跟随光标吗？试试「IMESupport 」这个插件吧！目前只支持 Windows，在搜索等界面不能很好的跟随光标。
使用：Ctrl + Shift + P →输入pci →输入IMESupport →回车
功能：检测并一键去除代码中多余的空格
简介：还在纠结代码中有多余的空格而显得代码不规范？或是有处女座情节？次插件帮你实现发现多余空格、一键删除空格、保存时自动删除多余空格，让你的代码规范清爽起来
使用：安装插件并重启，即可自动提示多余空格。一键删除多余空格：CTRL+SHITF+T（需配置），更多配置请点击标题。快捷键配置：在Preferences / Key Bindings – User加上代码（数组内）
| 1 | {"keys":["ctrl+shift+t"],"command":"delete_trailing_spaces"} |
功能：强大的比较代码不同工具
简介：比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。可配置为显示差别在外部比较工具，精确到行。
使用：右键标签页，出现FileDiffs Menu或者Diff with Tab…选择对应文件比较即可
功能：中文识别
简介：Sublime Text 2可识别UTF-8格式的中文，不识别GBK和ANSI，因此打开很多含中文的文档都会出现乱码。可以通过安装插件GBK Support,来识别GBK和ANSI。
使用：
Open a GBK File
Save file with GBK encoding
Change file encoding from utf8 to GBK or GBK to utf8
本文转自：W3C中文教程/中文网（w3schools.wang），如果你是IT从业者，它也许会对你有帮助！
*请认真填写需求信息，我们会在24小时内与您取得联系。
