sublime 经典入门

最新推荐文章于 2023-10-09 13:13:51 发布

omlys

最新推荐文章于 2023-10-09 13:13:51 发布

阅读量413

点赞数 2

本文链接：https://blog.csdn.net/omlys/article/details/52784147

版权

sublime 教程

关于本文

如果你收到了这篇文章，想必不用我说`sublime`的强大了吧，那么你肯定也是一个对 `sublime` 不是很了解的人，当然我对 `sublime` 也不是很了解，不过由于查了大量资料和平常时间的使用本人还是积累了 `sublime` 的一些很实用的技巧。下面就和大家分享一下，有很多不足之处，望读者不喜勿喷，喜欢点个赞。

sublime 入门

下载 sublime 相信大家已经下载啦，我这里就不给下载连接啦，不过下载之后怎样配置成为很多初识 sublime 的人苦恼，我们都是看见很多大牛在很熟练的使用 sublime 各种炫酷功能，不过我们怎样配置才可以向其他人一样呢？废话不多说，直接上代码吧。

-下载（Package Control）包管理工具是必不可少的也是必须的。所以第一步就要下载 Package Control，只需要在 sublime 按住 Ctrl + 既是Ctrl+ Tab 键上面的那个 "~" 键，此时会调出sublime` 的控制台，只需在控制台输入以下内容

-sublime Text3

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())

安装完成后会在Preferences菜单下看到Package Settings和Package Control两个菜单了，此时表明安装成功。

sublime Text2


import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; 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')

如果安装失败则可以进入 [sublime Package Control](Package Control.sublime-package) 下载安装包后复制到 packages 目录下，通过菜单栏的 Preferences > Browse Packages 找到对应的文件夹，把下载后的文件复制到该文件夹即可。

注意上面讲的两种方法都可以安装，也是为了告诉他家，其实两种安装方式都是对的，很多初学者会把自己的包里面的内容和其他人比较，这里说明就是为了告诉读者你的安装方式不一样就会导致文件夹下面的内容不一样，但是只要是安装了相应的包都会具有相应的功能。

第一步安装好后接下来就是要下载各种相应的扩展包。 sublime 之所以强大也就是因为它有很强的扩展性，以及强大的扩展仓库。那么那些插件才是我们实用的呢。sublime默认是英文的，如果有需要者可以使用 包管理工具 就行汉化下载，只需要按住 Ctrl +shift +p 既可以调出搜索栏，在里面输入 “package install” 之后 sublime 会在内部执行命令你会看到坐下角的位置有运行来回的状态，等转态停止后会自动跳出刚才的搜索框，这时你只要输入你想要的插件 sublime 会自动给你下载。现在我们可以输入 Chinese 等关键字就会出现相应的条目供你下载，你只需要上下移动选择点击 Enter 系统便会自动下载。现在我们输入 ChineseLocalization 便可下载汉化插件。
现在我们基本的操作已经完成，包管理工具和汉化之后保证了我们操作的便捷，接下来就给大家介绍几款实用的插件。
- Eumum
- 什么是Eumum？前身就是以前大名鼎鼎的Zen Coding,他具体有什么有呢？相信大家都看过别人用 sublime 吧，当你看见别人很快的数几个字母，或是很快的生成代码块那着就是 Eumum的功能，当然它和自定义代码块是有却别的。所有你只需要知道你平时的那些快捷的功能是Eumum产生的功效就可以啦。接下来就是说他的安装，安装很简单你只需要重复上面的步骤“ctrl + shift + p” 调出管理工具，然后输入 “package install ”后再输入“Eumum” 关键字查找相应的插件就可以啦。一下的其他插件也是这样，下面的插件我们就直结束即可，安装依然是这样的步骤。
注意，安装好的插件在 Perference 下面的 Package Setting 里面会显示
- SublimeLinter
- 最直接的功能就是可以检测代码语法错误，
- SublimeEnhancements
- 这个插件可以给SublimeText的边栏菜单带来扩充的功能，包括：在当前工程文件夹中新建文件，移动文件或文件夹，产生文件或文件夹的副本，在新窗口或浏览器中打开，刷新等。这只是概括地说，安装后探索它更多的功能吧
- PackageResourceViewer
- 通过这个特殊的插件，会给你查看和编辑SublimeText附带的不同的包带来很多方便。您也可以提取任何给定的包。这一行动将其复制到用户文件夹，以便您可以安全地对其进行编辑。
- CSSComb
- css代码格式化，注意快捷键的冲突（后面会介绍快捷键的相关问题）。
- Alignment
- 对其代码
- Trmmer
- 删除一些代码间多余的空白
- ColorPicker
- 可以使用快捷键取色便于Css样式的调节
- MarkDown Editing
- Markdown 编译环境，相信很多人都知道Markdown吧，这就是为其提供的环境。
- 订制主题
- 相信很多人都会有个性的偏好设置吧，这里也提供了主题插件。可自行下载。如：SpaceGray、Centurion。网上有很多，自己去找你喜欢的吧。
- Snippets
- 快速代码块，上面有提到Eumum的使用，但是很多时候我们重复书写一些很长的代码会很繁琐，我们能不能输入特点的几个字母 自后就可以生成相应的代码块呢？那这就是 Snippets 的作用。
- Tools > Developer > New snippets 自后会出现下面代码

<snippet>
    <content><![CDATA[Hello, ${1:this} is a ${2:snippet}.]]></content>
    上面是要书写的代码部分，代码块均写在content里面 在Hello的位置
    **[CDATA[Hello, ${1:this} is a ${2:snippet}.]]**
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->

**上面是模板 下面是我写的一个输入  clg  后按 Tab 生成 console.log的代码块**
**${1:this} 是指代码生成后光标出现的位置 ${2:snippet} 是指按下 tab 后光标跳到的位置可以设置N个这样的属性**
**tabTrigger 这里是触发器及时你的'快捷字母'**
**scope 表示运行在哪一种格式的内容下 本列是在js的代码中生效**
    <snippet>
    <content><![CDATA[console.log(${1:});]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>clg</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    ${2:snippet}<scope>source.js</scope>
</snippet>


</snippet>