sublime text3 软件使用技巧及插件安装

本文详细介绍SublimeText3的个性化配置方法,包括显示文件编码、分屏操作及预览设置等。同时,提供了丰富的插件资源,涵盖语言包、代码格式化、智能补全等功能,助力提升开发效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里给出sublime text3 免安装版的绿色软件,已自带较多组件和插件,个人认为较为完善的版本。

下载下来选择对应 x86 或 x64 的版本直接使用。

下载地址:点击下载

-----------------------------------------------------

当然也可以自己去官网下载,再安装插件自行汉化:

官网地址:Sublime Text - Text Editing, Done Right

下面为对sublime text3自定义配置一些使用操作:

【1】如何显示当前文件的编码

Sublime Text的默认设置是不开启显示编码的,如果想开启,可通过菜单,首选项→设置 – User设置,在打开的配置文件里 ,在后面,增加以下内容:

"show_encoding": true,

 "show_line_endings": true

注意结尾 , (逗号)的闭合

【2】在同窗口打开新的项目(文件夹)

首选项→设置 – User设置,在打开的配置文件里 ,在后面,增加以下内容:

"open_files_in_new_window":false   (这个只针对文件起作用)

要设置对文件夹起作用,还是用下面方式打开,

项目-添加文件夹到项目

【3】关闭/开启分屏

视图-布局

【4】显示左侧目录栏

视图-侧边栏-显示侧边栏

【5】关闭单击打开标签页,覆盖前标签页

就是默认状态下,单击目录中一个文件,会打开此文件,并把之前打开的文件覆盖掉。

现在需要关闭此情况,双击打开文件在新的标签页打开。

首选项→设置 – User设置,在打开的配置文件里 ,在后面,增加以下内容:

"preview_on_click": false

===================================================

下面为我平常使用的一些设置,可以直接复制使用:

{
	"color_scheme": "Packages/Color Scheme - Default/Monokai.sublime-color-scheme",
	"ignored_packages":["Vintage"],
	"fade_fold_buttons": true, //代码折叠按钮一直显示
	"font_size": 14, //字体
	"highlight_line": false, //高亮选择当前选中代码行,关闭
	"open_files_in_new_window": false, //关闭新窗口打开
	"preview_on_click": false, //关闭单击左侧栏文件打开文件(因为单击打开会覆盖已打开文件)
	"save_on_focus_lost": true,//自动保存
	"show_encoding": true, //显示编码
	"show_full_path": true, //显示文件完整路径
	"show_line_endings": true, //显示行结束符
	"word_wrap": true, //自动换行
	"update_check": false, //关闭自动更新
     

      //如果用来编辑python代码,加下面代码

      "draw_white_space": "all" ,//显示符号和制表符,默认selection
      "tab_size": 4,  //tab为4个空格
      "translate_tabs_to_spaces": true, //在按tab键时插入空格
      "expand_tabs_on_save": true  //设置保存时自动转换
	
}

下面为一些需要安装的实用插件:

安装插件前需要sublime text3软件已安装 Package Control 组件,因为上面提供的下载版本自带这个组件,那就直接安装插件就行。

如果下载的官方版,没有安装Package Control 组件,则按下面两个步骤安装:

①打开sublime界面,按Ctrl+shift+P组合键,出现界面

②搜索install package control,然后直接点击安装。安装好后就会有弹窗提示信息。

-------------------------------------------------------------------------

下面讲解插件安装步骤:

(1)按Ctrl+Shift+P调出命令面板,输入install Package

(2)搜索需要的插件名称,安装即可。(拿Emmet举例)

(3)查看是否安装成功。

安装完成重启sublime text3,点击首选项->Package Settings->   看到有Emmet,则安装成功。

=========================================================

下面开始例举实用的插件

【1】ChineseLocalization   #各国的语言包,其实就是汉化软件的方法。安装完点击help->language->选择相应语言版本。

【2】Emmet        #命令补全插件(例如生成html代码)

【3】Convert​To​UTF8   #可以编辑并保存目前编码不被 Sublime Text 支持的文件,特别是中日韩用户使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP 等。简单说就是能打开其他编码格式的代码文件。

【4】Alignment   #代码对齐,选中要调整的行,然后按 Ctrl+ Alt + A

【5】DocBlockr   #全自动代码补全注释的插件,快捷生成注释。

【6】Ctags         #跳转到函数方法

【7】AutoFileName    #自动补全文件路径,非常方便。强烈推荐。

【8】sublimeLinter,sublimeLinter-php     #用来检测php代码错误的插件

【9】Trimmer    #自动删除代码中不必要的空格

【10】All Autocomplete    #搜索所有打开的文件来寻找匹配的提示词。

【11】BracketHighlighter   #配置文件的高亮设置,让你的代码有不同的颜色区分该插件提供配对标签,或大括号或字符引号的配对高亮显示,算是对系统高亮的加强吧。

【12】Sublimerge  #这个插件可以用来比对两个文件的不同之处,除了可以和本地文件比对还可以和git上面的历史版本对比,本人主要用于本地文件对比。选中文件右键就可以加入对比。

【13】pretty json  #这个插件可以用来格式化json代码的内容。选中内容、使用ctrl+ alt+ j快捷键转化。

【14】sublime_thinkphp5  ### 这个是个人制作的TP5语法支持插件,超级方便实用。下载压缩包后解压出来,将文件放到

   sublime text3的插件目录下就可以。下载链接:文件分享

【15】codeFormatter    ###比较重要的插件,ctrl+alt+f 就可以实现php代码格式化(俗称对齐)。安装好之后需要配置php.exe的路径信息。操作说明:preferences->Package Settings->CodeFormatter->Settings - Default。打开这个之后可以看到:

"codeformatter_php_options":
    {
        "syntaxes": "php", // Syntax names which must process PHP formatter
        "php_path": " ",

        .......省略

  }

需要在php_path里面填入你本地电脑装的php程序的运行文件php.exe的目录。

比如我的是phpstudy,这个插件只支持php5.6版本及以上,但是测试发现php7版本又报错,所以选择了php5.6版本。

我的路径为:"php_path": "C:/phpStudy/PHPTutorial/php/php-5.6.27-nts/php.exe",

使用的时候ctrl+alt+f6,会对整个文件进行格式化。

【16】EditorConfig  编码规划化,统一格式

------------------------(如果是后端程序员,基本安装以上16个插件就行了)------------------------------------------

【17】Autoprefixer    #主要应用css的浏览器兼容书写,自动分析你的css文件,解析出新的css文件,可以配置你要兼容的浏览器,不过这个插件要在之前安装nodejs

【18】SublimeCodeIntel  #一个全功能的 Sublime Text 代码自动完成引擎,主要用于代码自动补全,函数追踪。

【19】HTML-CSS-JS Prettify  #一键格式化HTML,CSS,Javascript代码

【20】HTML5  #支持hmtl5规范的插件包,与Emmet插件配合使用,效果更好

【21】jQuery  #支持JQuery规范的插件包

【22】JSFormat    #主要用于javascript代码格式化。快捷键:ctrl+alt+f

【23】ColorPicker    #取色板。快捷键:ctrl+shift+c ,会和Convert​To​UTF8按键冲突。(改键:导航栏点击首选项->浏览插件目录->打开ColorPicker  文件夹, 打开Default (Windows).sublime-keymap文件,编辑按键,保存重启软件即可 )

【24】Color Highlighter    #css中如果用了颜色代码,会自动显示该代码的颜色

下面为一些实用快捷键说明

【1】代码注释

”Ctrl+/”                使用//对代码进行每行或多行注释

“Ctrl+Shft+/”       使用/*  */对代码进行注释

【2】快速打开项目中文件

"ctrl + P "                输入文件名称即可切换打开了

【3】使用" ! " + " Tab " 键进行生成html5初始代码,使用tab键补全代码。

首先要安装Emmet插件,安装插件前需要sublime text3软件已安装 Package Control 组件,因为上面提供的下载版本自带这个组件,那就直接安装Emmet插件就行。

下面为Emmet插件快捷生成标签代码的技巧:

[1] 生成html5代码

!或者 html:5  + tab键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

[2] utf-8编码

meta:utf    + tab

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

[3] 生成移动端标签

meta:vp  + tab

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

[4]兼容 IE

meta:compat  + tab  

<meta http-equiv="X-UA-Compatible" content="IE=edge">

[5] css调用

link + tab

[6] script 调用

script:src + tab 

[7] p标签  div标签   a标签 

p.red  + tab     <p class="red"></p>

div.blue +tab   <div class="blue"></div>

div#yy  +tab     <div id="yy"></div>

a:link + tab      <a href="http://"></a>

[8]重复生成

ul>li*5    

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

[9] 快速生成导航栏列表

ul.list>li.item*8>a{导航}

<ul class="list">
    <li class="item"><a href="">导航</a></li>
    <li class="item"><a href="">导航</a></li>
    <li class="item"><a href="">导航</a></li>
    <li class="item"><a href="">导航</a></li>
    <li class="item"><a href="">导航</a></li>
    <li class="item"><a href="">导航</a></li>
    <li class="item"><a href="">导航</a></li>
    <li class="item"><a href="">导航</a></li>
</ul>

ul.list>li.item*8>a{导航$}

<ul class="list">
    <li class="item"><a href="">导航1</a></li>
    <li class="item"><a href="">导航2</a></li>
    <li class="item"><a href="">导航3</a></li>
    <li class="item"><a href="">导航4</a></li>
    <li class="item"><a href="">导航5</a></li>
    <li class="item"><a href="">导航6</a></li>
    <li class="item"><a href="">导航7</a></li>
    <li class="item"><a href="">导航8</a></li>
</ul>

ul.list>li.item*8>a{导航$$}

<ul class="list">
    <li class="item"><a href="">导航01</a></li>
    <li class="item"><a href="">导航02</a></li>
    <li class="item"><a href="">导航03</a></li>
    <li class="item"><a href="">导航04</a></li>
    <li class="item"><a href="">导航05</a></li>
    <li class="item"><a href="">导航06</a></li>
    <li class="item"><a href="">导航07</a></li>
    <li class="item"><a href="">导航08</a></li>
</ul>

ul.list>li.item*8>a{导航$@-}

<ul class="list">
    <li class="item"><a href="">导航8</a></li>
    <li class="item"><a href="">导航7</a></li>
    <li class="item"><a href="">导航6</a></li>
    <li class="item"><a href="">导航5</a></li>
    <li class="item"><a href="">导航4</a></li>
    <li class="item"><a href="">导航3</a></li>
    <li class="item"><a href="">导航2</a></li>
    <li class="item"><a href="">导航1</a></li>
</ul>

ul.list>li.item*8>a{导航$@50}

<ul class="list">
    <li class="item"><a href="">导航50</a></li>
    <li class="item"><a href="">导航51</a></li>
    <li class="item"><a href="">导航52</a></li>
    <li class="item"><a href="">导航53</a></li>
    <li class="item"><a href="">导航54</a></li>
    <li class="item"><a href="">导航55</a></li>
    <li class="item"><a href="">导航56</a></li>
    <li class="item"><a href="">导航57</a></li>
</ul>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值