sublime text 使用小技巧

时间:2023-03-09 00:42:06
sublime text 使用小技巧

sublime下载各个版本 官网

插件官方网站地址 https://packagecontrol.io/

一、安装设置字体及字体大小

  1、点菜单“Preferences--->Setting - User”,打开“Preferences.sublime-settings”。

  2、如下图添加所需代码,根据自己的喜好进行设置。设置字体用"font_face":"字体名称",设置字体大小用"font_size":"字体大小",注意它们之间需要用逗号隔开。

二、安装插件管理包

  1、安装Package Control

    Package Control为插件管理包,所以我们首先要安装它。有了它,我们就可以很方便的浏览、安装和卸载Sublime Text中的插件。打开Package Control的网页https://packagecontrol.io/,点击右侧的“Install Now”或“installation”按钮。进入页面后,选择“sublime text”选项卡对应的版本,复制出里面的代码段:

sublime text 使用小技巧

  打开安装的sublime Text,快捷键 Ctrl + ` 打开Sublime Text控制台,将之前复制的代码粘贴到控制台里,按下“Eenter”键。等待其安装完成后关闭程序,重新启动“Sublime Text”,点开菜单“Preferences”可见“Package Control”项,说明插件管理包已安装成功。

  2、插件的安装与删除

    a)安装插件的方式:

      点击菜单中的preferences ->Package Control 或 按下Ctrl+Shift+P调出命令面板,输入install 调出 Install Package 选项并回车,然后搜索"需要安装的插件名称"安装然后回车。

    b)删除插件的方式:

      点击菜单中的preferences ->Package Control 或 按下Ctrl+Shift+P调出命令面板,输入install 调出 Install Package 选项并回车,然后搜索"需要删除的插件名称"安装然后回车。

  3、ConvertToUTF8 插件安装

    a)功能说明:ConvertToUTF8 能将除UTF8编码之外的其他编码文件在 Sublime Text 中转换成UTF8编码,在打开文件的时候一开始会显示乱码,然后一刹那就自动显示出正常的字体,当然,在保存文件之后原文件的编码格式不会改变。

    b)安装方法一:快捷键 Ctrl+Shift+p ,打开 “Command Palette” 悬浮对话框,在顶部输入 “install”, 然后下选点击 “Package Control:Install Package”。在出现的悬浮对话框中输入 “convert”, 然后点选下面的 “ConvertToUTF8” 插件,就会自动开始安装,请耐心等待。当插件安装成功后,Sublime Text 3 编辑器底端的状态栏会有安装成功的提示。

    c)安装方法二:你还可以下载完整的插件包后解压,放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目录下,以达到安装插件的目的。下载地址:

https://github.com/seanliang/ConvertToUTF8。如何找到 Packages 目录?一个快捷的方法是:双击打开你的 “Sublime Text 3”,点菜单 “Preferences--->Browse Packages...”。它会直接打开插件包存放的目录 “Packages”。然后你就可以把下载后解压好的插件包复制到这个 Packages 目录下。

三、自定义代码

  文件在Preferences - Settings - User 里面

  1、全部的设置均为 JSON 文本

"translate_tabs_to_spaces": true,

  2、把Tab对齐转化为空格对齐,tab_size 控制转化比例

"tab_size": 2,

  3、自动移除行尾多余空格。

"trim_trailing_white_space_on_save": true,

  4、窗口失去焦后立即保存文件。

"save_on_focus_lost": true,

  5、侧栏文件夹加粗。

"bold_folder_labels": true,

  6、自动在文件末尾加入一个空行,git 用户相信知道是干嘛的。

"ensure_newline_at_eof_on_save": true,

  7、自动换行

"word_wrap": true, 

  8、禁止更新

"update_check": false

    

  综合:

        // 字体大小设置
"font_size": 13,
// 设置行间距,看起来不那么”挤“
"line_padding_bottom": 1,
"line_padding_top": 1,
// 是否打开拼写检查
"spell_check": false,
// Tab键制表符宽度
"tab_size": 4,
// 代码提示
"auto_complete": true,
// 突出显示当前光标所在的行
"highlight_line": false,
// 侧栏文件夹加粗
"bold_folder_labels": true,
// 窗口失去焦后立即保存文件
"save_on_focus_lost": true,
// 全部的设置均为 JSON 文本
"translate_tabs_to_spaces": true,
// 自动移除行尾多余空格
"trim_trailing_white_space_on_save": true,
// 自动在末尾添加一空行
"ensure_newline_at_eof_on_save": true,
// 自动换行
"word_wrap": true,
// 禁止更新
"update_check": false

  

 四、常用插件

  1、Emmet
    前端神器,相信搞前端的没有不用的
  2、JQuery
    写JQuery怎么能不用他来增强你的提示

  3、Autoprefixer

    添加CSS3各个浏览器的前缀
  4、AutoFileName
    路径提示
  5、Pretty Json
    写json不格式话怎么行
  6、CSS Format
    css格式化

  7、Color Highlighter

    css样式中color十六进制有颜色显示;

  8、Sublime CodeIntel

    代码自动提示

  9、FileHeader

    自动创建文件开头模板,并且会根据最后的保存时间修改更新时间

  10、SideBarEnhancements

    右键菜单增强插件

  11、TrailingSpaces

    这款插件能高亮显示多余的空格和Tab

  12、advancedNewFile

    快速创建文件

当我们在 Sublime Text 编辑器里我们可以通过快捷键command+n(win: ctrl+n),来新建一个文件,然后command+s(Win:ctrl+s)进行弹出保存框,填写文件名进行保存。还是老问题,麻烦!!我们接下来就通过安装advancedNewFile插件来提升我们在Sublime Text编辑器下的创建文件速度。⭐️⭐️⭐️⭐️
关乎其使用,安装完成之后,运用快捷键command+alt+n(win: ctrl+alt+n)
,Sublime Text底部会弹出输入框;我们只需在这个输入框里输入我们需要新建的文件名回车即可(我们甚至可以带路径,譬如:src/components/perfect.vue;这就会在当前项目目录下,建立该文件;需要注意的是这路径前面不可加 ‘/‘, 这会使得建立的路径成为用户目录,而非改项目目录)。默认情况下文件会存储在当前目录,如果当前没有目录,会存储在用户的家目录。

  13、SyncedSideBar

    每次打开文件,侧边栏都会同步显示该文件所在目录树中的位置(如果打开的文件是目录树的子集,还能将目录树自动展开,真是爱之不已,挺有用的一款插件)。⭐️⭐️⭐️⭐️⭐️

  14、BracketHighlighter

    显示与之对应的那个括号

  15、ChineseLocalizations

    汉化插件(安装之后重启)

  16、JavaScript Completions

    JavaScript 原生语法提示

  17、自动换算单位px => rem

    rem-unit

     配置参数

      参数配置文件:Sublime Text -> Preferences -> Package Settings -> rem-unit

  • fontsize - html元素font-size值,默认为16。
  • precision - px转rem的小数部分的最大长度,默认为8。
  • leadingzero - 是否保留前导0,默认不保留。
  • exts - 启用此插件的文件类型。默认为:[“.css”, “.scss”, “.less”, “.sass”, “.styl”]。

  18、SublimeTmpl

  模板注释文件(需要配置)

  19、A File Icon

    显示文件图标

  20、主题

    Theme - One Dark

  21、自动跳转到相关的clss类

    Goto-CSS-Declaration   快捷键 win 键 +Alt+. 跳转到 css 文件该 class 的声明处 注意对应的css文件要同时打开才行

五、其他

  

1、http://blog.csdn.net/twoto3_/article/details/52230204