您的位置 首页 > 娱乐休闲

sublime3注册码、安装插件方法及前端开发必备插件推荐

对于前端开发来说,推荐使用JetBrains WebStorm编辑器(简直是神器)或者vim(超级神器),但是有时我们写个小demo时可以考虑使用Sublime Text,毕竟JetBrains WebStorm有时打开太慢了而且挺占内存的。我之前装的是Sublime Text2,今天装了Sublime Text3,把相关的知识整理了下,适合新手看。非新手可以直接看第四部分------四、插件推荐 (里面是我精心挑选的插件)看有你需要的插件不,或者您可以留言推荐其他好的插件。:-)

一、Sublime Text 3 注册码

1、Sublime Text 3 3126 注册码

2、

二、包管理器安装方法

打开sublime text 3,按ctrl+~

或者菜单View > Show Console

打开命令窗口,粘贴这个网站中的代码并回车即可。

Pa

三、安装插件

1、快捷键 Ctrl+Shift+P(菜单 – Tools – Command Paletter),输入 install 选中Install Package并回车;

Pa

2、输入或选择你需要的插件回车就安装了(注意左下角的小文字变化,会提示安装成功)。

Pa

四、插件推荐

1、Browser Refresh 将写好的代码通过打开浏览器预览

有一点需要注意的是安装完该插件后,点击如下图红色方框所圈出的地方后

Pa

在里面输入

[

{ "keys": ["ctrl+shift+enter"], "command": "open_in_browser" }

]

以后就可以直接ctrl+shift+enter预览写好的代码了。

2、HTML-CSS-JSPrettify 格式化代码

具体介绍可看这里:使用SublimeText3的HTML-CSS-JSPrettify插件格式化代码

不过在这里补充一点就是格式化代码可使用快捷键ctrl+shift+H,不需要像文章中介绍的那么麻烦;

3、Better Completion

javascript ,jquery , Bootstrap 等js库的自动补全。该插件的特点就是可以自定义配置需要自动补全的库。安装完以后它的配置文件可以配置自己需要补全的库;

官网说明:

这里提醒下,安装完后需打开用户自定义设置(见下图红色圆圈圈出的部分)并粘贴

Pa

如下代码:

{ // --------------------

// sublime-better-completions-Package (sbc package)

// --------------------

// API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).

// After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.

//

// Your own setting file `` need to place in `/packages/User/` and contains all your api setting property that you want to enable.

//

// --------------------

// APIs Setup

// --------------------

// `true` means enable it.

// `false` means disable it.

"completion_active_list": { // build-in completions

"css-properties": false, "gruntjs-plugins": false, "html": false, "lodash": false, "javascript": true, "jquery": true, "jquery-sq": true, // Single Quote

"php": false, "phpci": false, "sql": false, "twitter-bootstrap": false, "twitter-bootstrap-less-variables": false, "twitter-bootstrap3": false, "twitter-bootstrap3-sass-variables": false, "underscorejs": false, "react": false, // Your own completions?

// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User

"my-angularjs": false, // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User

"my-glossary": false, // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User

"my-html": false, // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User

"my-javascript": false

}

}

上面如果你觉得用的到,可以将对应的false改成true;

4、BracketHighlighter 高亮显示[], (), {}, "", '', #!xml <tag></tag>甚至是自定义的字符,方便查找;

Pa

官方地址:

官方文档:

另外这个插件我安装几次都失败了,刚开始报 pygments' is not currently installed错误,后来又安装几次发现 pygments又安装成功了,但又 报Unable to download python-markdown错误;这个应该是网络不好,大家可以开代理进行安装下载;我后来重新安装几次又好了。

5、AutoFileName

快捷输入文件名,文件路径自动提示的。自动完成文件名的输入,如图片选取,输入”/”即可看到相对于本项目文件夹的其他文件

6、SublimeLinter 代码校验工具

具体可看这篇文章:代码校验工具 SublimeLinter 的安装与使用

里面介绍了javascript语法检查SublimeLinter-jshint及css语法检查 SublimeLinter-csslint;

7、Emmet 必备的神器插件

Pa

输入“!”或“html:5”,然后按Tab键便可自动生成模版;

Pa

输入h1{foo}和a[href=#],就可以自动生成上述代码;

大家具体可看这篇文章:Emmet:HTML/CSS代码快速编写神器

8、sublimeCodeIntel 代码自动补全

直接安装即可(我的直接安装重启即可使用),如正常安装后还是使用不了可以参考只针对sublimecodeintel安装好之后不能正常完成补全的问题

9、livereload 解放F5(刷新)的开发工具

具体可见这篇文章: LiveReload一款解放F5的开发工具

以前我在这篇文章中提到过browser-sync也能实现该功能(它其实不光只有实时刷新功能,还有BrowserSync会在多个浏览器中同步滚动条位置,表单行为和点击事件功能具体见BrowserSync,迅捷从免F5开始),但是感觉它太麻烦了,需要打开node,当然有其他更好的单独软件( 【F5】 Web开发免刷新)可以实现实时刷新的功能(F5使用示范);

10、livestyle sublime text3和chrome双向实时编辑预览CSS

具体可见sublime text3和chrome双向实时编辑预览CSS

当然使用chrome的Workspace也能够实现该功能,具体见:使用chrome的Workspace实现js、css文件调试即时保存

我装的插件汇总

文/该帐号已被查封 (简书)

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“sublime3注册码,安装插件方法及前端开发必备插件推荐”边界阅读