Sublime text实用总结（全部亲测有效）

最新推荐文章于 2024-05-13 21:21:27 发布

FED_AF

最新推荐文章于 2024-05-13 21:21:27 发布

阅读量994

点赞数

分类专栏：工具文章标签： sublime text

本文链接：https://blog.csdn.net/FED_AF/article/details/105720117

版权

工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、安装

下载：https://www.sublimetextcn.com/Sublime%20Text3_64.exe

二、首选项优化

1、Preferences->Setting - User

{ // 实际环境不要有注释
	"auto_indent": true, // 开启自动缩进
	"default_encoding": "UTF-8",//默认编码
	"dpi_scale": 1.0, // 覆盖操作系统设置的DPI，主要解决文件名的中文乱码问题
	"font_size": 15.0,
	"tab_size": 4,
	"ignored_packages":
	[
		"auto-save",
		"AutoFileName",
		"Vintage"
	],
	"open_files_in_new_window": false, // 多标签模式
	"save_on_focus_lost": true, // 失去焦点自动保存
	"spell_check": false, // 关闭拼写检查
	"theme": "Soda Dark 3.sublime-theme",
	"update_check": false,
	"word_wrap": true
}

2、Preferences->Key binding - User

[
	{ "keys": ["alt+f"], "command": "reindent" },//设置代码自动缩进快捷键
	{
		"keys": ["ctrl+alt+v"], "command": "sublime_tmpl",
		"args": {"type": "vue"}
	}//创建vue文件
]

三、自定义代码片段

通过Tools->New Snippet新建

*\Packages\User\snippets\vue.sublime-snippet（vue对象）

<snippet>
	<content><![CDATA[
var $1 = new Vue({
	el: '$2',
	data: {
		$3
	},
	methods: {
		$4
	}
	//, router: {  }
	//, watch: {  }
	//, filters: {  }
	//, directives: {  }
	//, components: {  }
	//, beforeCreate() {  }
	//, created() {  }
	//, beforeUpdate() {  }
	//, updated() {  }
	//, beforeMount() {  }
	//, mounted() {  }
	//, beforeDestroyed() {  }
	//destroyed() {  }
})
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>vue</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

*\Packages\User\snippets\vue-filter.sublime-snippet（Vue过滤器）

<snippet>
	<content><![CDATA[
Vue.filter('$1', function($2) { $3 })
]]></content>
	<tabTrigger>v-f</tabTrigger>
</snippet>

*\Packages\User\snippets\vue-directive.sublime-snippet（Vue指令）

<snippet>
	<content><![CDATA[
Vue.directive('$1', {
	bind: function (el, binding) {	}
	, inserted: function (el, binding) {  }
	, update: function (el, binding) {  }
	//, componentUpdated: function (el, binding) {  }
	//, unbind: function (el, binding) {  }
})
]]></content>
	<tabTrigger>v-d</tabTrigger>
</snippet>

*\Packages\User\snippets\vue-component.sublime-snippet（Vue全局组件）

<snippet>
	<content><![CDATA[
Vue.component('$1', {
	template: '#$2'
	//, data: function(){ return {  } }
	//, methods: {  }
	//, props: [  ]
	//, created() {  }
})
]]></content>
	<tabTrigger>v-c</tabTrigger>
</snippet>

*\Packages\User\snippets\vue-component-data.sublime-snippet（Vue组件体）

<snippet>
	<content><![CDATA[
{
	template: '#$2'
	//, data: function(){ return {  } }
	//, methods: {  }
	//, props: [  ]
	//, created() {  }
}
]]></content>
	<tabTrigger>v-co</tabTrigger>
</snippet>

*\Packages\User\snippets\vue-router.sublime-snippet（Vue路由对象）

<snippet>
	<content><![CDATA[
var $1 = new VueRouter({
	routes: [ 
		{ path: '$2', component: $3 }
	]
})
]]></content>
	<tabTrigger>v-r</tabTrigger>
</snippet>

*\Packages\User\snippets\axios-get.sublime-snippet（axios发送get请求）

<snippet>
	<content><![CDATA[
axios.get(url, { params: data }).then(response => {
	$1
}).catch(function (error){$2})
]]></content>
	<tabTrigger>ax-get</tabTrigger>
</snippet>

*\Packages\User\snippets\axios-post.sublime-snippet（axios发送post请求）

<snippet>
	<content><![CDATA[
axios.post(url, data).then(response => {
	$1
}).catch(function (error){$2})
]]></content>
	<tabTrigger>ax-post</tabTrigger>
</snippet>

四、常用插件

1、Package Control

（1）安装

从https://packagecontrol.io/Package%20Control.sublime-package下载到*/Installed Packages，重启st

（2）配置

在C:\Windows\System32\drivers\etc\hosts中添加：

127.0.0.1    license.sublimehq.com

在Win+R或cmd中运行inetcpl.cpl：

在*/Packages下新建文件channel_v3.json，从https://packagecontrol.io/channel_v3.json复制代码进去，然后在Preferences->packages setting->packages control->Setting - User中添加：

	"channels":
	[
		"C:\\Program Files (x86)\\Sublime Text3\\Data\\Packages\\channel_v3.json"
	],

在*/Packages/channel_v3.json中找到"schema_version"，将值改为: "2.0",

在Preferences->packages setting->packages control->Setting - Default中修改：

    ...
    "channels": [
    	"https://packagecontrol.io/channel_v3.json"
    ],
    ...
    "submit_url": "https://packagecontrol.io/submit",
    ...

2、Emmet

（1）安装

st中按快捷键Ctrl+Shift+p，执行Package Control:Install Package回车，输入Emmet回车

（2）配置

自定义tab补全内容：

文件：*/Packages/Emmet/emmet/snippets.json

*注意：不要有注释

variables：

"charset": "UTF-8",

html.abbreviations：

"link": "<link rel=\"stylesheet\" href=\"$1\"  charset=\"${charset}\"/>",
"script": "<script type=\"text/javascript\" charset=\"${charset}\">",
"script:src": "<script type=\"text/javascript\" src=\"$1\" charset=\"${charset}\">",
"inp:t|input:t|input:text": "<input placeholder=\"$1\" type=\"text\" name=\"\" id=\"\" />",
"inp:p|input:p|input:password": "<input placeholder=\"$1\" type=\"password\" name=\"\" id=\"\" />",
"inp:n|input:number": "inp[type=number]",
"inp:c|input:c|input:checkbox": "inp[type=checkbox]",
"inp:r|input:r|input:radio": "inp[type=radio]",
"text|textarea": "<textarea name=\"\" id=\"\" cols=\"${1:30}\" rows=\"${2:10}\">",
"label": "<label>",
"rv|router-view": "<router-view>",
"rl|router-link": "<router-link to=\"\">",
"ts|transition": "<transition>",
"tsg|transition-group": "<transition-group>",
"tem": "<template id=\"$1\">",
"cpn": "<component :is=\"$1\">",

3、ConvertToUTF8

（1）安装

参考Emmet

（2）配置

解决快捷键冲突：

文件：*/Packages/ConvertToUTF8/Default (Windows).sublime-keymap

[
	{ "keys": ["ctrl+shift+alt+c"], "command": "convert_to_utf8", "args": {"encoding": "GBK", "stamp": "0" } }
]

4、ColorPicker

（1）安装

参考Emmet

（2）配置

设置“颜值”的大小写：

路径：Preferences->packages setting->ColorPicker->Setting - Default

{
    // For upper-case output (#ABCDEF), set "color_upper_case" to true
    // For lower-case (#abcdef), use false
    "color_upper_case": true
}

5、Color Highlighter

（1）安装

参考Emmet

（2）配置

设置颜色显示：

复制Preferences->packages setting->Color Highlighter->Setting - Default中的代码到Preferences->packages setting->Color Highlighter->Setting - User，然后修改Preferences->packages setting->Color Highlighter->Setting - User：

...
        "all_content": {
            "enabled": true,
            "color_highlighters": {
                "color_scheme": {
                    "enabled": true,
                    "highlight_style": "filled"
                },
                ...
            }
        },
...

设置文件过滤：

修改Preferences->packages setting->Color Highlighter->Setting - User：

...
    "file_extensions": [".css", ".less", ".scss", ".sass", ".styl", ".html", ".js"],
...

6、AutoFileName

（1）安装

参考Emmet

（2）禁用

该插件可能会影响st的性能，导致卡顿，禁用方法：

快捷键Ctrl+Shift+p
输入Packages Control: Disable Package回车
输入AutoFileName回车

7、InsertNums

（1）安装

参考Emmet

（2）用法

作用：纵向插入等差数列，支持十进制整数或小数以及英文大小写字母序列（但大写和小写不能混合），其中z后是aa，ZZ后是AAA，以此类推
快捷键：Ctrl+Alt+n
格式：
插入数字时: [<start>][:<step>][~<format>][::<expr>][@<stopexpr>][!]
插入字母时: <start>[:<step>][~<format>][@<stopexpr>][!]
start
插入数字时（可选）：可以是合乎Python语法规则的十进制整数或小数，前面可以带+号或-号。默认值：1
插入字母时（必需）：必须是纯小写字母(a-z)序列或纯大写字母(A-Z)序列
step（可选）
插入数字时：可以是合乎Python语法规则的十进制整数或小数，前面可以带+号或-号。默认值：1
插入字母时：可以是合乎Python语法规则的十进制整数或小数，前面可以带+号或-号。默认值：1
format（可选，用来格式化输出结果）
插入数字时：符合Python的Format Specific Mini-Language语法规则的字符串
插入字母时：和插入数字时一样，但只能使用上述语法规则中对字符串的操作
expr (可选)
仅在插入数字时有效
n：选中的行数
i: 强制从0开始，步长为1
stopexpr (可选)
举例：
1 1 0 ==> 1 2 3
2 3 0 ==> 2 5 8
e 3 0 ==> e h k
e -1 0 ==> e d c
1 0 0 ==> 1 1 1
1 1 1 ==> 01 02 03
1 1 2 ==> 001 002 003
1 1 2 ==> 001 002 003

8、SublimeCodeIntel

（1）安装

下载：https://codeload.github.com/SublimeCodeIntel/SublimeCodeIntel/zip/master

解压到：*/Packages，重启st

（2）配置

9、Html5

（1）安装

参考Emmet

10、jQuery

（1）安装

参考Emmet

11、JavaScript Completions

（1）安装

参考Emmet

12、Auto-save

（1）安装

参考Emmet

（2）配置

开启自动保存及设置时间间隔

Preferences->packages setting->Auto-save->Setting - User：

// AutoSave's default settings.

{
  "auto_save_on_modified": true,
  "auto_save_delay_in_seconds": 10,
  "auto_save_all_files": true,
  "auto_save_current_file": "",
  "auto_save_backup": false,
  "auto_save_backup_suffix": "autosave"
}

（3）禁用

参考AutoFileName

13、SublimeTmpl

（1）安装

参考Emmet

（2）配置

设置变量，添加vue模板

Preferences->packages setting->SublimeTmpl->Settings - User：

...
    "vue": {
        "syntax": "Packages/HTML/HTML.tmLanguage"
        // ,"extension": "html" # default_extension
    },
...
    "attr": {
        "charset": "UTF-8",
        "title": "欢迎使用xx系统" 
    }
...

Preferences->packages setting->SublimeTmpl->Settings - Menu：

...
                    {
                        "caption": "Vue",
                        "command": "sublime_tmpl",
                        "args": {
                            "type": "vue"
                        }
                    },
...

Preferences->packages setting->SublimeTmpl->Settings - Commands：

...
    {
        "caption": "Tmpl: Create vue", "command": "sublime_tmpl",
        "args": {"type": "vue"}
    },
...

编辑html模板

*\Packages\SublimeTmpl\templates\html.tmpl

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="${charset}">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>${title}</title>
	<link rel="shortcut icon" type="image/x-icon" href="icon/icon.icon">
	<link rel="stylesheet" href="css/css.css" charset="${charset}">
	<link rel="stylesheet" href="css/lib.css" charset="${charset}">
	<link rel="stylesheet" href="css/animate.min.css" charset="${charset}">
	<script type="text/javascript" src="js/lib.js" charset="${charset}"></script>
	<script type="text/javascript" src="js/vue.js" charset="${charset}"></script>
	<script type="text/javascript" src="js/axios.js" charset="${charset}"></script>
	<script type="text/javascript" src="js/vue-router.js" charset="${charset}"></script>
</head>
<body>
	$0
	<script type="text/javascript" src="js/js.js" charset="${charset}"></script>
</body>
</html>

编辑css模板

*\Packages\SublimeTmpl\templates\css.tmpl

@charset "${charset}";
$0

编辑vue模板

*\Packages\SublimeTmpl\templates\vue.tmpl

<template>

</template>

<script>
	
</script>

<style scoped>

</style>

14、GitGutter

（1）卸载

st中按快捷键Ctrl+Shift+p，执行Package Control:Remove Package回车，输入GitGuttert回车

15、Bootstrap 3 Autocomplete

（1）安装

参考Emmet

16、Sass和Sass Build

（1）安装

参考Emmet

五、配置python3.7环境

1、安装python3.7和Sublime Text3.2.2

2、新增编译器

在Tools->Build System->New Build System...新建的文件中：

{
	"cmd": ["D:/Python37/python.exe", "-u", "$file"],
	"file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
	"selector": "source.python",
	"encoding": "utf-8"
}

保存为python37.sublime-build

3、测试

新建py文件用sublime打开，输入代码后按Ctrl+b运行，底端会出现控制台显示运行结果

4、安装相关的package

（1）Anaconda

自动匹配关键字等实用功能，有效提高开发效率。安装参考Emmet

（2）AutoPep8

按python开发规范pep8自动格式化代码。安装参考Emmet

配置保存时自动格式化：

在Peferences->Package Settings->AutoPep8->Settings-User中：

{
    //保存时自动格式化
    "format_on_save": true
}

（3）SublimeREPL

提供交互式运行环境。安装参考Emmet

配置运行快捷键：

在Perferences->Key Bindings的User中：

[
	{
		"keys":["ctrl+B"],
		"caption":"SublimeREPL: Python - RUN current file",
		"command":"run_existing_window_command",
		"args":{
			"id": "repl_python_run",
			"file": "config/Python/Main.sublime-menu"
		}
	}
]

配置单窗口交互（不在新窗口交互）：

在*\Packages\SublimeREPL\config\Python\Main.sublime-menu中：

...
                    {"command": "repl_open",
                     "caption": "Python - RUN current file",
                     "id": "repl_python_run",
                     "mnemonic": "R",
                     "args": {
                        "type": "subprocess",
                        "encoding": "utf8",
                        "cmd": ["python", "-u", "$file_basename"],
                        "cwd": "$file_path",
                        "syntax": "Packages/Python/Python.tmLanguage",
                        "external_id": "python",
                        "view_id": "*REPL* [python]",//添加这一条就可实现单窗口交互
                        "extend_env": {"PYTHONIOENCODING": "utf-8"}
                        }
                    },
...

在*\Packages\SublimeREPL\sublimerepl.py中：

...
                if view.id() == view_id:
...

改为：

...
                if view.name() == view_id:
...

（4）SublimeCodeIntel

自动补全代码。安装参考Emmet

添加python语法的提示：

在Perference->Package Settings->SublimeCodeIntel->Settings-User中：

{
    "codeintel_language_settings": {
        "Python3": {
            "python3": "D:\\Python37",//python.exe的路径
            "codeintel_scan_extra_dir": [
                // 在
                // import sys
                // print(sys.path)
                // 的输出结果中将第一个元素改为空即为此[]中的内容：
                "",
                "D:\\Python37\\python37.zip",
                "D:\\Python37\\DLLs",
                "D:\\Python37\\lib",
                "D:\\Python37",
                "D:\\Python37\\lib\\site-packages"
            ],
            "codeintel_scan_files_in_project": true,
            "codeintel_selected_catalogs": []
        },
    }
}

设置快捷键：

在Perference->Key Bindings-User中：

[
	{
		"keys":["ctrl+b"],
		"caption":"SublimeREPL: Python - RUN current file",
		"command":"run_existing_window_command",
		"args":{
			"id": "repl_python_run",
			"file": "config/Python/Main.sublime-menu"
		}
	},
	//手动提示
	{
		"keys": ["alt+z"],
		"command": "code_intel_auto_complete"
	},
	//跳转到函数定义
	{
		"keys": ["alt+right"],
		"command": "goto_python_definition"
	},
	//返回到跳转位置
	{
		"keys": ["alt+left"],
		"command": "back_to_python_definition"
	}
]

设置点击函数名跳转到函数定义

在 Perference->Package Settings->SublimeCodeIntel->Mouse Bindings-User中：

[
        //ctrl+鼠标左键跳转函数
        { 
            "button": "button1", 
            "modifiers": ["ctrl"], 
            "command": "goto_python_definition", 
            "press_command": "drag_select"
        }
]