sublime 编辑器学习(学习使用随笔)

sublime 编辑器学习

对比了不少的文本编辑工具,也接触过很多的编辑工具 例如:nodpad++,editplus,sublimetext3,visual studio code ,等工具,发现各有利弊,因为在考虑往全栈方向发展 故也开始向前端迈进。下面主要是在网上翻阅博客整理的相关知识。主要贴了一下其他博友的网址,和一些自己在使用sublime时遇到的一下问题和记的一些笔记。便于自己后面查阅。

start

离线安装 package controll

https://www.cnblogs.com/luoshupeng/archive/2013/09/09/3310777.html

markdown实时预览

https://blog.csdn.net/github_32886825/article/details/52930195

emmet(补齐html代码等)无法生效原因 ,PyV8安装

https://blog.csdn.net/yanzi1225627/article/details/51069420

快捷键和插件参考

https://blog.csdn.net/huohao_blogs/article/details/76120756

AutoFileName

快速列出你想引用的文件夹里面所有文件的名字,比如想引用test/img/1.png。只需要输入/img,该插件就会自动提示/img下面的所有文件名,如图

JsFormat

JsForma可以自动帮助你格式化JavaScript代码,形成一种通用的格式,比如对压缩、空格、换行的js代码进行整理,使得js代码结构清晰,易于观看。在已压缩的JS文件中,右键选择jsFormat或者使用默认快捷键(Ctrl+Alt+F),如果该热键被占用了,可以在Preferences→Key Bindings-User中配置: { “keys”: [“ctrl+shift+alt+j”], “command”: “js_format”,“context”: [{“key”: “selector”, “operator”: “equal”, “operand”: “source.js,source.json”}]},

sublime 常用快捷键

https://blog.csdn.net/free_xiaochen/article/details/78181125
侧边栏增强插件SideBarEnhancements

这个也没有什么好说的,谁用谁知道,大大增强右键列表的功能,装上就能用。s

控制台呼出插件Terminal

用node,Grunt等等要调出控制台的娃知道的,简直神奇有木有,装上就能用。

Tips:快捷键 ctrl+shift+T呼出当前文件路径的控制台

代码提示插件SublimeCodeIntel

这个也没什么废话吧,支持多语言的高速编码的代码提示工具。
然后打开Sublime创建个文件试一下,如果还不行就按下 ctrl+shift+space 开启提示功能

以前用的是什么TAG,CssComb和JSFormat,但是某一天发现这款集成prettify的插件后就一直没换过了,不要被插件的HTML迷惑,这是一款可以用于HTML,CSS,Javascript的集成排版插件

Tips:安装完快捷键ctrl+shift+h 一键格式化代码

一键浏览文件

Preferences->Key Bindings - User打开用户快捷键设置,copy下面的设置

[
//firefox
{
“keys”: [“f1”],
“command”: “side_bar_files_open_with”,
“args”: {
“paths”: [],
“application”: “C:\Program Files\Mozilla Firefox\firefox.exe”,
“extensions”: “."
}
},
//chorme
{
“keys”: [“f2”],
“command”: “side_bar_files_open_with”,
“args”: {
“paths”: [],
“application”: “C:\Users\manfr\AppData\Local\Google\Chrome\Application\chrome.exe”,
“extensions”: ".

}
},
//IE
{
“keys”: [“f3”],
“command”: “side_bar_files_open_with”,
“args”: {
“paths”: [],
“application”: “C:\Program Files\Internet Explorer\iexplore.exe”,
“extensions”: “."
}
},
//safari
{
“keys”: [“f4”],
“command”: “side_bar_files_open_with”,
“args”: {
“paths”: [],
“application”: “C:\Program Files (x86)\Safari\Safari.exe”,
“extensions”: ".

}
}
]
稍微解释下,keys是按键,application是浏览器应用程序路径,注意反斜杠的要转义。extensions是匹配所有的文件后缀格式。

Tips:查了下默认的快捷键,SublimeText3中f1-f12中只有f11被默认为全屏命令,其他的没设置。也就是说,你可以装十个八个浏览器一字排开按过去测试。

CSS3前缀补充插件Autoprefixer

ctrl+shift+P输入install Package等待读取服务器列表,输入autoprefixer第一个就是了
要装Node.js,没有的话去下载安装吧
插件使用CanIUse资料库,能精准判断哪些属性需要什么前缀

Tips:使用方法:在输入CSS3属性后(冒号前)按Tab键

Trailing spaces

可以检测和一键删除代码的空格,保存时自动删除多余空格,让你的代码更加紧凑规范。功能入口:Edit→
Trailing Spaces→
Delete,也可以自己设置快捷键,我通常设置成ctrl+shift+alt+t,以下粘贴到Key-Bindings-User里面:{ “keys”: [“ctrl+shift+alt+t”], “command”: “delete_trailing_spaces” },

DocBlockr

安装该插件后,可以快速生成各种注释格式,当需要生成注释符号时,输入/*、/然后回车系统即帮你自动生成,如果/后面刚好是一个函数的定义,注释格式会根据函数的参数生成。

目前使用到的插件

{
“bootstrapped”: true,
“in_process_packages”:
[
],
“installed_packages”:
[
“3024 Color Scheme”,
“AdvancedNewFile”,
“auto-save”,
“AutoFileName”,
“Autoprefixer”,
“DocBlockr”,
“Emmet”,
“jQuery”,
“JsFormat”,
“MarkdownEditing”,
“MarkdownPreview”,
“Nodejs”,
“Package Control”,
“Python 3”,
“SideBarEnhancements”,
“SublimeCodeIntel”,
“Terminal”,
“TrailingSpaces”
]
}

插件补充

SyncedSideBar 定位打开文件到左侧目录结构

配置快捷键

在key binds中自定义快捷键中配置如下信息即可
{ “keys”: [“ctrl+shift+c”], “command”: “copy_path” }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章