Sublime Text的使用代码块安装的模块

Posted 2020-08-16 cygnet

在众多的开发工具IDE当中。作者现在唯独深爱sublime text(以下简称st)。以前做后台开发使用visual studio(以下简称vs),以及实行前后端分工也是配合后台使用vs.这里要讲述两个概念：前后端分离与前后端分工。分离是指：前端独立完成搭建前端系统。数据只需要后端提供API接口调用即可。前端渲染html页面（俗称前端开发工程师）。分工是指按照设计切成静态页面，写一些交互js,配合后端完成项目开发。服务端渲染HTML页面（俗称页面仔）。在全职做前端的时候，也尝试使用webstorm(以下简称ws)，在学校偶尔用过dreamweaver(以下简称dw)。个人感觉dw的界面丑陋不堪。一点都没有逼格。作为一名前端开发工程师，当然要选用逼格高一点的开发工具。目前前端开发工具比较出名的使用比较普遍的也就是st和ws了。现在说说st的优点：1.界面炫酷。2.高亮颜色好看。3.轻量小巧。作者语录：装逼从点滴开始，从现在开始。从开发工具开始。写代码一定要风骚。作为一名逼格高的程序猿，必须要有好的开发工具。正如高手都有一把属于自己的武器。惊羽的斩龙剑。小凡的摄魂棍，雪琪的天琊神剑。书书的武器那是百宝箱啊。青云f4.

一、Package Control的安装

在st所有的插件当中。一定要先安装package control。可以理解为插件安装包的管理器吧。所有的插件都是通过这这里面下载安装的。

1.按下Ctrl + ~ 调出st的控制台

2.复制以下代码到控制台

   a.适合st3:

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

 

  b.适合st2:

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

3.按下Ctrl + Shift + p 输入pci选中Install Package回车。会弹出一个输入框。以后的插件都在这里面安装。有时候调出输入框的时候很久。注意下面状态栏的=符号来回跑动说明正在处理当中

二、SVN插件的安装

在项目开发当中怎么少得了svn的使用。除非你一个人能开发完成项目

1.前提是你电脑当中已安装svn。这里相当于设置快捷键调用svn

2.复制以下代码到控制台（Ctrl + ~）

   a.适合st3:

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(‘ ‘,‘ ‘)).read())

   b.适合st2:

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(‘ ‘,‘ ‘)).read());print(‘Please restart Sublime Text to finish installation‘)

3.在网上下载SubLime Texe2/3的SVN插件

4.点击Preferences - 浏览资源包

5.在文件资源管理器中。新建svn文件夹。将下载好的svn插件放入到svn文件夹里面

6.在项目文件右键插件是否有svn commit ，svnupdate 检验是否安装成功

三、代码语法检查插件

1.按下 Ctrl + Shift + p输入pci选中Install Package回车

2.输入sublimeLinter进行安装

3.安装完成后继续按下 Ctrl + Shift + p输入pci选中Install Package回车。

4.输入SublimeLinter-jshint进行安装

5.由于jshint组件依赖于nodejs里面的jshint.所以在nodejs环境下必须全局安装jshint.  在cmd窗口执行 npm install -g jshint  使用jshint -v 查看其版本检验是否安装成功

6.如果没有安装nodejs环境，上面第五点是运行不起的。接下来简要说明一下安装nodejs环境。如果已安装可忽略直接下一步

   a.进入官网下载相应的系统。下面以window为例

   b.进行傻瓜式的下一步操作直到完成。

   c.记住要配置环境变量

   d.使用node -v && npm -v 查看其版本检验是否安装成功

7.安装css代码校验也是同样。进入插件库里面安装sublimeliter-csslint插件

8.nodejs环境下也要安装csslint。在cmd窗口执行 npm install -g csslint

9.配置：在preferences-Pageckage Settings-SublimeLinter-Settings-User粘贴下面代码就OK

{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
            "jshint": {
                "@disable": false,
                "args": [],
                "excludes": []
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        "paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "javascript (babel)": "javascript",
            "magicpython": "python",
            "php": "html",
            "python django": "python",
            "pythonimproved": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

 四、定制一段代码块

 1.tools - 新建代码片段(New Snippet)

 2.你会看到以下代码，首先不要懵逼

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- 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> -->
</snippet>

 解释以上代码

1 <snippet>
2     <content><![CDATA[ 你需要插入的代码片段${1:name},test,${2} ]]></content>
3     <!-- 可选：快捷键，利用Tab自动补全代码的功能 -->
4     <tabTrigger>cygnet</tabTrigger>
5     <!-- 可选：使用范围，不填写代表对所有文件有效。附：source.css和test.html分别对应不同文件。 -->
6     <scope>source.js</scope>
7     <!-- 可选：在snippet菜单中的显示说明（支持中文）。如果不定义，菜单则显示当前文件的文件名。 -->
8     <description>My Fancy Snippet</description>
9 </snippet>

${1:name}表示代码插入后，光标所停留的位置，可同时插入多个。其中:name为自定义参数（可选）

${2}表示代码插入后，按Tab键，光标会根据顺序跳转到相应位置（以此类推）。

3.保存在\Packages\User目录下（例 X:\Sublime Text 2.0\Data\Packages\User），文件命名为cygnet-code，后缀名.sublime-snippet。

4.打开一个HTML文件。输入cygnet按下tab会自动生成你定制的代码块