美文网首页WEB前端程序开发
神级代码编辑器Sublime_Text3的使用

神级代码编辑器Sublime_Text3的使用

作者: e20a12f8855d | 来源:发表于2018-11-08 14:16 被阅读1次

神级代码编辑器Sublime_Text3的使用

Sublime Text 是我最喜欢的一款代码编辑器,它轻量、简洁、高效、跨平台,丰富的插件为开发提供了许多的便利

它在支持语法高亮、代码补全、代码片段(Snippet)、代码折叠、行号显示、自定义皮肤、配色方案等所有其它代码编辑器所拥有的功能的同时,又保证了其飞快的速度!还有着自身独特的功能,比如代码地图、多种界面布局以及全屏免打扰模式等

可以直接点击下载我已经配置好的 Sublime Text3 程序目录,提取码:uswl ,包含以下所列出的一些插件的安装与配置

解压文件 运行文件夹下的 sublime_text.exe 文件,即可使用 Sublime Text3

下面我来介绍一下它的基本使用和一些常用插件的安装与配置

首先去 Sublime Text 官网 下载应用并安装

1. 基本操作

1.1 修改插件安装位置

插件默认安装的位置是 C 盘的 AppData 的目录

例:【C:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages】

修改位置:关闭 Sublime,找到想要安装的位置,新建一个Data的文件夹,把C盘目录下的 Packages 文件夹删除掉,再重新打开 Sublime ,References >> Browser Packages 就发现打开的文件夹就是新建的 Data 文件下的 Packages 了,再安装插件的时候就都会安装在这个路径下

之后如果将 Sublime Text 程序目录移动到其他电脑上,插件也会带着

1.2 分屏快捷键

Shift + Alt + 数字

分屏操作预览

1.3 设置文件扩展名默认语法

View → Syntax → Open all with current extension as...

1.4 常用快捷键设置

Preferences → Key Bindings

以下是我自己的一些设置,可根据需求自行配置

[
    {"keys": ["ctrl+enter"],"command": "open_in_browser"},  //在浏览器中打开
    {"keys": ["ctrl+o"],"command": "prompt_open_file"},  //打开所在文件夹
    {"keys": ["ctrl+alt+h"],"command": "htmlprettify"},  //html 格式化
    {"keys": ["ctrl+alt+j"],"command": "js_format"},  // js 格式化
    {"keys": ["ctrl+alt+c"],"command": "css_comb"},  // css 整理
    {"keys": ["ctrl+alt+shift+c"],"command": "css_format","args": {"action": "compact"}},  // css格式化
    {"keys": ["shift+ctrl+enter"], "command":"run_macro_file", "args":{"file":"Packages/User/comma.sublime-macro"} },
    {"keys": ["ctrl+alt+shift+j"], "command": "quote_html"},  // html 转 js
]

1.5 主题配色

可以去主题编辑网站 编辑主题

下载 .tmTheme 文件后,放到 Sublime_Text3\Data\Packages\Color Scheme - Default 文件夹下

打开 sublime ,Preferences → Color Scheme,选择对应配色文件

1.6 关闭更新提示

"update_check":false

1.7 常用参数设置

Preferences → Settings

以下是我自己的一些设置,可根据需求自行配置

{
    "always_show_minimap_viewport": true,
    "bold_folder_labels": true,
    "caret_style": "phase",
    "color_scheme": "Packages/Color Scheme - Default/liuzhenghe_color_scheme.tmTheme",
    "fade_fold_buttons": false,
    "font_face": "Consolas",
    "font_size": 8,
    "ha_style": "filled",
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "icons": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "line_padding_bottom": 3,
    "line_padding_top": 3,
    "open_files_in_new_window": true,
    "original_color_scheme": "Packages/User/Color Highlighter/themes/liuzhenghe_color_scheme.tmTheme",
    "overlay_scroll_bars": "enabled",
    "rulers":
    [
    ],
    "save_on_focus_lost": true,
    "scroll_past_end": true,
    "show_definitions": false,
    "show_encoding": true,
    "show_full_path": false,
    "spell_check": false,
    "tab_size": 4,
    "theme": "Boxy Solarized Dark.sublime-theme",
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": false,
    "word_wrap": true,
    "update_check":false
}

1.8 在sublime text3里面直接运行js,调试控制台(需要安装 Node.js)

Tools > Build System > New Build System...

添加代码:

{
    "cmd": ["node", "$file"],
    "selector": "source.js"
}

保存,保存名为 Node.sublime-build,保存路径为Data\Packages\User文件夹下

新建js文件,直接ctrl+b,就可以在控制台输出结果了

1.9 自定义代码片段

Tools → Developer → New Snippet

出现以下代码

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

在 CDATA[] 中添加代码片段

$ 符号表示的是代码不全后光标出现的位置和顺序。比如${1:this}:意为光标在此第一次出现,默认值为this,且该默认值被选中。如果有多个$1,则光标同时出现在此处,而默认值只按照第一个设置的值出现

下面定义了${2:snippet},所以,当修改了$1后,按tab,则直接跳转到$2的位置。另外,如果需要显示$符号,则需要在符号前面加‘\’转义

去掉<tabTrigger></tabTrigger> 的注释,在标签中间添加触发前缀

Ctrl + s 保存,为了方便代码片段的管理,最好在当前目录下新建一个 Snippets 文件夹,将文件保存到该目录下

tab + 触发前缀,代码段自动补全,例:

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


2. 常用插件推荐

部分插件通过 package control 可能安装不了,可以点击插件包下载对应的插件
提取码:8xe5

也可以去 packagecontrol 官网地址 查询下载

下载后,将文件解压并放到 Sublime_Text 安装目录下的 Data\Packages 中

例:D:\Sublime_Text3\Data\Packages


安装package control组件

按Ctrl+`,调出console

粘贴以下代码并回车

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

重启sublime

Ctrl+Shift+P 调出命令面板,查询并选择插件进行安装

2.1 emmet

html,css代码快速编写

方法:

  1. 安装emment插件
  2. Ctrl+N 新建一个文件
  3. 右下角有一个 plain text 标志,选择文件类型为HTML
  4. Ctrl+S保存文件
  5. 输入 “!” + tab

2.2 terminal

快捷键执行终端操作

ctrl + shift + t

2.3 html5

生成 html5 的页面结构

html5 + tab

2.4 AdvancedNewFile

快速新建文件

2.5 JSFormat

Javascript的代码格式化插件

用法:选中 js 代码,ctrl + alt + f (可自定义快捷键)

2.6 HTML-CSS-JS Prettify(安装包)

代码格式化

方法:选中代码,右键,Prettify Code

2.7 Minifi

该插件基于Google Closure compiler,自动压缩js文件

2.8 jQuery

jQuery代码提示

2.9 DocBlockr

生成优美注释

用法:输入/、/*然后回车

2.10 AutoFileName

快捷输入文件名

2.11 FileDiffs

强大的比较代码不同工具

右键标签页,出现 FileDiffs Menu 或者 Diff with Tab… 选择对应文件比较即可

2.12 SideBarEnhancements

侧栏右键功能增强,不需手动保存文件

2.13 Autoprefixer(安装包)

自动补全 css3 属性前缀

属性名 + tab

2.14 SFTP

直接编辑 FTP 或 SFTP 服务器上的文件

2.15 Markdown Preview

预览 md 文件

用法:ctrl + b ,生成 html 文件

2.16 cssrem(安装包)

px 转换为 rem

Preferences → Package Settings → cssrem → Settings-Default

会出现下面代码

{
    "px_to_rem": 40,
    "max_rem_fraction_length": 6,
    "available_file_types": [".css", ".less", ".sass"]
}

"px_to_rem": 40, // px转rem的单位比例,默认为40

"max_rem_fraction_length": 6, // px转rem的小数部分的最大长度,默认为6

"available_file_types": [".css", ".less", ".sass"] // 启用此插件的文件类型,默认为 [".css", ".less", ".sass"]

一般只需要修改单位比例,单位比例 = 设计稿实际宽 / 10

2.17 sublime serve

在本地服务器打开 html 文件

Tools –> SublimeServer –> Start SublimeServer

右键 –> View in SublimeServer

2.18 AllAutocomplete

可以搜索全部打开的标签页

2.19 ColorPicker

调色盘 Ctrl + Shift + C

2.20 ColorHighlighter

css 显示颜色值的实际颜色

2.21 PlainTasks

待办事项表

Preferences → Package Settings → PlainTasks → Tutorial

在标题后加冒号,新建项目

ctrl + i 新建待办事项

2.22 TrailingSpaces

去除代码末尾的空格键

修改空格高亮色/保存时自动删除空格:

Preferences → Package Settings → Trailing Spaces → Settings - User ,添加:

{
    "trailing_spaces_highlight_color" : "#fff",
    "trailing_spaces_trim_on_save": true,
}

2.23 CSScomb

css 整理

功能很强大,能够整理css规则的顺序,比如把宽高、颜色、边距规则用空行分隔开,方便修改还能防止样式重复

选中 css 代码,右键 Run CSScomb(也可自行配置快捷键)

2.24 CSS Format

css 代码格式化

选中 css 代码,右键 CSS Formate –> Compact (也可自行配置快捷键)

2.25 SublimeLinter

错误提示插件

2.26 CSSLint

能检查CSS错误,提示重复什么的

2.27 Pretty JSON

格式化 json

自定义快捷键:打开 Preference –> Key Bindings-User,添加格式化代码快捷键为 ctrl + alt + j

{"keys": ["ctrl+alt+j"],"command": "pretty_json"}

2.28 IMESupport

中文输入法跟随光标

2.29 Alignment

js 等号对齐

自定义快捷键:打开 Preference –> Key Bindings-User,添加格式化代码快捷键为 ctrl + alt + t

{"keys": ["ctrl+alt+t"], "command": "alignment"}

2.30 QuoteHTML

把 HTML 拼接成 js 插入字符串

自定义快捷键:打开 Preference –> Key Bindings-User,添加格式化代码快捷键为 ctrl + alt + h

{"keys": ["ctrl+alt+t"], "command": "quote_html"}

2.31 Markdown Editing

markdown 编辑插件

2.32 OmniMarkupPreviewer

markdown 实时预览

配置:Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > Settings - User

快捷键:ctrl + alt + o

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    }
}

2.33 Table Editor

markdown 自动完成表格并格式化,快捷键:tab

2.34 ConvertToUTF8

解决 .txt 文件乱码问题

相关文章

网友评论

    本文标题:神级代码编辑器Sublime_Text3的使用

    本文链接:https://www.haomeiwen.com/subject/pvnixqtx.html