Sublime Text 3 配置

曾经终败给现在 2022-05-25 11:19 312阅读 0赞

*  1. 配置 Sublime Text 3
    
     *  清除原配置信息
     *  安装 Package Settings 和 Package Control 插件管理工具
 *  2. 常用插件扩展
    
     *  功能扩展
     *  代码补全
     *  代码格式化
     *  语法高亮
 *  3. 支持 CSS预处理语言 LESS
    
     *  安装 node.js 支持模块
     *  安装 Sublime Text 插件

# 1. 配置 Sublime Text 3 #

## 清除原配置信息 ##

*  `C:\Users\用户名\AppData\Roaming\sublime text`
 *  Sublime Text 3 安装目录下创建文件夹 `Data`

## 安装 Package Settings 和 Package Control 插件管理工具 ##

*  打开命令行  
    使用 `Ctrl` \+ `` ` `` (Esc键下方) 或者 通过 View -> Show 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())

# 2. 常用插件扩展 #

## 功能扩展 ##

*  `ChineseLocalizations`  
    语言支持：简体中文、繁体中文、日语、英语  
    ![这里写图片描述][20180514004302559]
 *  `SideBarEnhancements`  
    侧边栏增强  
    ![这里写图片描述][20180514003934124]
 *  `A File Icon`  
    文件图标标识  
    ![这里写图片描述][20180514004450617]

## 代码补全 ##

*  `Emmet`  
    html标签代码补全，多标签缩写  
    [API 文档][API]  
    ![这里写图片描述][20180514004819633]

<table> 
 <thead> 
  <tr> 
   <th>后代</th> 
   <th align="center">同级</th> 
   <th align="center">父级</th> 
   <th align="center">分组</th> 
   <th align="center">乘法</th> 
   <th align="center">自增</th> 
   <th align="center">ID和类</th> 
   <th align="center">自定义属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&gt;</code></td> 
   <td align="center"><code>+</code></td> 
   <td align="center"><code>^</code></td> 
   <td align="center"><code>()</code></td> 
   <td align="center"><code>*</code></td> 
   <td align="center"><code>$</code></td> 
   <td align="center"><code>#id.class</code></td> 
   <td align="center"><code>p[nck='1']</code></td> 
  </tr> 
 </tbody> 
</table>

*  `AutoFileName`  
    自动填充文件路径  
    ![这里写图片描述][20180514005144990]
 *  `AutoPrefixer`  
    CSS3 私有前缀自动补全  
    快捷键：Ctrl + Alt + P
 *  `Better Completion`  
    javascript ,jQuery , Bootstrap 等js库的自动补全，需自定义配置
 *  `DocBlock`  
    注释代码块  
    快捷键：`/**` \+ Enter  
    ![这里写图片描述][20180514005402701]

## 代码格式化 ##

*  `Alignment`  
    代码对齐  
    快捷键：Ctrl + Alt + A
 *  `ConvertToUTF8`  
    编码转换为UTF8
 *  `CSScomb`  
    CSS格式化及自定义排序  
    快捷键：Ctrl + Shift + C 右键 -> Run CSScomb
 *  `Js Format`  
    JS格式化  
    快捷键：Ctrl + Shift + C

## 语法高亮 ##

*  `Color Highlighter`  
    颜色高亮
 *  `LESS`  
    LESS语法高亮
 *  `jade`  
    jade语法高亮

# 3. 支持 CSS预处理语言 LESS #

## 安装 node.js 支持模块 ##

*  若还未安装 node.js ，请 [安装 node.js][node.js]
 *  安装 `less` 和 `less-plugin-clean-css` 模块

npm install -g less
    npm install -g less-plugin-clean-css

## 安装 Sublime Text 插件 ##

*  打开插件安装  
    使用 `Ctrl` \+ `Shift` \+ `P` 快捷键打开命令框，搜索`Package Control: install Package`，回车执行  
    ![这里写图片描述][20180514000504306]
 *  安装 `LESS` 代码高亮  
    ![这里写图片描述][20180514000727313]
 *  安装 `Less2Css` 编译生成  
    ![这里写图片描述][20180514000826397]
 *  配置 `Less2Css`

{
        // 自动编译
        "autoCompile": true,
    
        // 是否压缩
        "minify": false,
    
        // 私有前缀填充
        "autoprefix": false,
    
        // 创建CSS代码地图，方便定位代码位置
        "createCssSourceMaps": false,
    
        // 忽略文件的前缀
        "ignorePrefixedFiles": false,
    
        // CSS文件生成路径，默认相对同级目录
        "lessBaseDir": "./",
    
        // 是否使用lessc命令
        "lesscCommand": false,
    
        // 主文件
        "main_file": false,
        "minName": false,
    
        // 输出公共路径
        "outputDir": "./",
    
        // [example.css] if left blank uses same name of .less file
        "outputFile": "",
    
        // 显示错误窗口
        "showErrorWithWindow": true,
    
        // 禁用详细
        "disableVerbose":false,
        "silent":false
    }

> 我的配置  
> [https://github.com/wildye/sublime-config][https_github.com_wildye_sublime-config]

[20180514004302559]: /images/20220525/b691c6b1b92e4d9097b0d0f778575bf6.png
[20180514003934124]: /images/20220525/4920df690dfe443191e091d724df8913.png
[20180514004450617]: /images/20220525/6ee347525dd44aa28c09c0e3a4f67cac.png
[API]: https://www.w3cplus.com/tools/emmet-cheat-sheet.html
[20180514004819633]: /images/20220525/eb4b6f28d2c6412fb36fd3f1ed8bb664.png
[20180514005144990]: /images/20220525/d97cacc07e944a80b641e38964230271.png
[20180514005402701]: /images/20220525/0d19bf1ae17e4f919d349a05aea28024.png
[node.js]: https://blog.csdn.net/wildye/article/details/79646795#2-nodejs-%E5%AE%89%E8%A3%85
[20180514000504306]: /images/20220525/5520d8bedf2c4ecd8cc788efc3a8bb7c.png
[20180514000727313]: /images/20220525/c48fedfed1304988b3dcdb62e21aaae5.png
[20180514000826397]: /images/20220525/cc7afcf22e8c453a886138ac94cc27b1.png
[https_github.com_wildye_sublime-config]: https://github.com/wildye/sublime-config