ホームページ > 記事 > ウェブフロントエンド > Sublime Text3_html/css_WEB-ITnose をエレガントに使用する方法
Sublime Text: コードのハイライト表示、構文プロンプト、オートコンプリート、高速応答を備えたエディター ソフトウェアは、ゴージャスなインターフェイスを備えているだけでなく、プラグイン拡張メカニズムもサポートしています。これを使用してコードを書くのは間違いなく楽しいです。 。使いにくいVim、肥大化して重いEclipse、軽量で起動が早いVS、Editplus、Notepad++に比べれば見劣りするこの極めてセクシーなエディターが最良の選択であることは間違いありません。コーディングとライティングにはどれも必要ありません。
原文の最初のリンクについては、Sublime Text をエレガントに使用する方法を学ぶためにここにアクセスしてください。最終更新日は 2015 年 12 月 15 日の夜です (短い本の記事にディレクトリを追加できませんか?、ええ、できます)。酔っ払っているのでわかりません) が、ディレクトリ構造はまだそこにある可能性があります:
Sublime Text のディレクトリ構造をエレガントに使用する方法
Sublime Text 2 と 3 の比較 Sublime Text 3 のインストールプラグイン Sublime Text 3 プラグインの推奨 独自のショートカット キーをカスタマイズ Sublime について知っておくべき実践的なヒント 独自のパーソナライズされたテーマをカスタマイズ 途中で結論を書きます。
友人には 3 を使用することを強くお勧めします! 速いだけで、壊れていません。説明はありません。
- ST3 は、プロジェクト ディレクトリ内の変数の検索をサポートします
- タブのサポートが向上しました (より多くのコマンドとショートカット キー)
- 速度プログラムの実行速度が向上しました
- Python3.3 を使用して API を更新しました
Sublime text 3 プラグインをインストールするのは非常に便利です。インストール パッケージを直接ダウンロードして、Packages ディレクトリ (menu->) に解凍できます。 ;設定->パッケージ)。
Ctrl+` を押してコンソールを表示します (注: QQ 入力メソッドがインストールされている場合、このショートカット キーは競合します。メソッド属性設定 - 入力 メソッド管理 - ホットキーをキャンセルし、QQ ピンインに切り替えます) 次のコードを一番下のコマンド ラインに貼り付けて Enter キーを押します:追記: 中国で SublimeText3 を使用している場合、利用可能なプラグインをインストールできないという問題が頻繁に発生することがあります。パッケージ コントロールさえインストールできない場合は、
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 Text 3 を再起動します。 「環境設定」->「パッケージ設定」にパッケージ制御項目が表示されれば、インストールは成功しています。 Ctrl+Shift+P を押してコマンド パネルを表示し、「install」と入力して、「パッケージのインストール」オプションを表示して Enter を押し、リストからインストールするプラグインを選択します。
パッケージ コントロール を削除して再インストールしてください。 Package Control のコピーを他の場所にコピーできます。ファイル (Package Control.sublime-package) は、インストールされたパッケージ ディレクトリに保存できます。
MarkDown Editing SublimeTextは、Markdown ファイルを表示および編集できるだけでなく、それらのファイルを正しくフォーマットされていないプレーン テキストとして扱います。このプラグインは、適切な色の強調表示やその他の機能を使用して、これらのタスクをより適切に実行します。 SublimeText下で効率化する方法について詳しくは、以前書いたSublimeText下でのMarkdownライティング2(3)や効率的な仕事を追求する旅を参照してください㈡
SideBarFolders 開いているフォルダーが多すぎませんか?これを使ってフォルダーを管理すると、世界はとても美しくなります。
SideBarFolders
Sublime Terminal このプラグインを使用すると、ターミナルを使用して Sublime でプロジェクト フォルダーを直接開くことができ、ショートカット キーの使用がサポートされます。
ColorPicker 通常、カラーピッカーを使用したい場合は、Photoshop または GIMP を開くと思います。また、Sublime Text では、組み込みのカラー ピッカーを使用できます。インストールが完了したら、Ctrl/Cmd + Shift + C ショートカット キーを押すだけです。
SublimeREPL これはプログラマーにとって便利なプラグインかもしれません。 SublimeREPL を使用すると、Sublime Text でさまざまな言語 (NodeJS、Python、Ruby、Scala、Haskell など) を実行できます。
Ctags插件有童鞋抱怨Sublime Text不能支持函数的跳转(比如像Eclipse那样,按住Control点击该方法或者对象,即可跳转到定义的地方; Alt+←即可回到原处)。其实Sublime Text也可以借助插件实现之(当然,有些情况下:Can not find defination)毕竟这个也是借助正则来匹配完成的。因此这个也就要求代码很规范。这个插件相对来讲会有些麻烦,具体的可以参见:Sublime Text ctags 的配置.
SublimeLinter插件SublimeLinter 是前端编码利器??Sublime Text 的一款插件,用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。比如写例如像lua这样的弱语言脚本代码,有这个可以规避掉很多不该有的低级错误吧?当然这也需要你SublimeLinter安装完毕之后再安装一个SublimeLinter-lua即可。具体的使用可以参见:借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码
SideBarEnhancements插件SideBarEnhancements是一款很实用的右键菜单增强插件;在安装该插件前,在Sublime Text左侧FOLDERS栏中点击右键,只有寥寥几个简单的功能;安装了就相当于给其丰了大胸一般。更强大的是,该插件还能让我们自定义快捷键呼出某个浏览器以预览页面!这样就不用到项目目录下寻找和拖动到特定浏览器中预览了。安装此插件后,点击菜单栏的preferences->package setting->side bar->Key Building-User,键入以下代码:
[ { "keys": ["ctrl+shift+c"], "command": "copy_path" }, //chrome { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\\Users\\jeffj\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe", "extensions":".*" } }]
这里设置按Ctrl+Shift+C复制文件路径,按F2即可在Chrome浏览器预览效果(如果需要的话,也可以根据自己的需要为Firefox,Safari,IE,Opera等加上),当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。
HTML-CSS-JS Prettify一款集成了格式化(美化)html、css、js三种文件类型的插件,即便html,js写在PHP文件之内。插件依赖于nodejs,因此需要事先安装nodejs,然后才可以正常运行。插件安装完成后,快捷键ctrl+shift+H完成当前文件的美化操作。插件对html、css文件的美化不是非常满意,但还可以,后面将说明如何修改css美化脚本。本人用起来超级爽的,鉴于篇幅,就不赘述,可以参见这篇介绍。
CSScomb CSS属性排序:有时候看看自己写的CSS文件,会不会觉得属性很乱查找不易维护难?CSScomb可以按照一定的CSS属性排序规则,将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码,按Ctrl+Shift+C,即可对CSS属性重新排序了,代码从此简洁有序易维护,如果不款选代码则插件将排序文件中所有的CSS属性。当然,可以自己自定义CSS属性排序规则,打开插件目录里的CSScomb.sublime-settings文件,更改里面的CSS属性顺序就行了。因为这个插件使用PHP写的,要使他工作需要在环境变量中添加PHP的路径,具体请看github上的说明。
SublimeTmpl 快速生成文件模板一直都很奇怪为什么sublime text 3没有新建文件模板的功能,像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了,SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定义编辑文件模板。SublimeTmpl默认的快捷键:
ctrl+alt+h htmlctrl+alt+j javascriptctrl+alt+c cssctrl+alt+p phpctrl+alt+r rubyctrl+alt+shift+p python
如果想要新建其他类型的文件模板的话,先自定义文件模板方在templates文件夹里,再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型,这里就详细介绍了,请各位自己折腾哈~
Javascript-API-Completions:支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件,是少数支持sublime text 3的后缀提示的插件,HTML5标签提示sublime text3自带,不过JQuery提示还是很有用处的,也可设置要提示的语言。
sublime-jq-plugin
SFTP: リモート サーバー ファイルをすばやく編集します Win で Xftp と WinScp を使用すると、切り替えてクリックするか F5 キーを押して更新する必要がある手動操作に言葉を失いました。そこで、この SFTP に出会ったとき、世界がずっと良くなったと突然感じました。 。もちろん、Sublime には FtpSnyc などの他の同期プラグインもありますが、設定時のエラー プロンプトがまったくユーザーフレンドリーではないため、それらは容赦なく破棄されました。 Sublime には SFTP があり、Ctrl+S だけでローカル コンピュータをサーバーに同期できます。設定方法については、「Sublime Text で SFTP プラグインを使用してリモート サーバー ファイルをすばやく編集する」を参照してください。FtpSync を使用する場合は、「Sublime の使用方法と FtpSync のリモート同期は簡単であることが最善の方法です」を参照してください。幸せなコーディングには苦労する価値があります。
WakaTime -- コード時間を記録します。WakaTime は特定のプロジェクトに費やした時間を正確にカウントします。WakaTime にはさまざまな IDE 用のさまざまなプラグインがあり、Sublime にプラグインをインストールすると、 Sublime を使用するすべてのプロジェクトの動作。コーディング時間を効率的に管理して知ることができ、完全な統計情報を備えているため、(必要に応じて) 自慢するためのモーメントに投稿するのに適しています~
Waka の基本的なデザインはレスキュータイムに似ています。全員が登録すると、キーを取得し、クライアントをインストールし、キーを入力します (ログインの場合も同様です)。その後、キーを含むすべてのローカル動作が統計のためにサーバーにスローされ、その後レポートが提供されます。一定の期間。しかし、Waka が行うことは、各ファイルに何秒かかるか、各言語にかかる時間に至るまで非常に正確です。
インストールと使用は簡単です。ここを参照してください。別の詳細な記事: RescueTime と wakaTime を使用して時間を記録する を参照してください。
次のような、オンデマンドでインストールできるプラグインが他にもあります:
[ { "keys": ["ctrl+f9"], "command": "build" }, { "keys": ["f10"], "command": "build", "args": {"variant": "Run"} }, { "keys": ["ctrl+shift+x"], "command": "toggle_comment", "args": { "block": true } }, ]具体可参见这边文章Sublime Text3 快捷键汇总及设置快捷键配置环境变量
定制属于自己的专属快捷键: 比如就拿定制Sublime Text(2/3)编译lua 的快捷键来说:
首先:下安装lua环境(MAC)
curl -s https://raw.githubusercontent.com/rudix-mac/rpm/2014.10/rudix.py | sudo python - install rudix或者:curl -O https://raw.githubusercontent.com/rudix-mac/rpm/2014.10/rudix.pysudo python rudix.py install rud
安装IED:SublimeText3;完毕后上面选择:Build System--New Build System 输入:
{ "cmd": ["/usr/local/bin/lua", "$file"], "file_regex": "^(...*?):([0-9]*):?([0-9]*)", "selector": "source.lua" }
保存为Lua.sublime-build,然后Tools-Build System上就能选择lua来编译脚本了)PS:网上找到的大多数都是 "cmd": ["lua", "$file"]可能我是用rudix自动来安装lua的,需要改一下路径。
新建一个xx.lua文件,随便写个语句,选择lua为build system,按一下command+b,就能跑出来了。 如下图所示:
LuaShortCutSublimeText
WindowS下面的定制请参看这里Sublime Text(2/3)编译lua
(1) Ctrl+O(Command+O)可以实现头文件和源文件之间的快速切换(2) 通过 View -> Side bar 可在左侧显示当前打开的文件列表
(3) ST3虽然不像notepad++可以在sidebar上显示函数列表,但是可通过Ctrl+R查看
(3) 通过 Preference -> Key binding user 可根据个人操作习惯自定义快捷键(包括ST3自带的和插件的)
(4) 双击可选中光标所在单词,三击可选中光标所在行(等同于Ctrl+L(Command+L));
(5) Ctrl+Shift+T可以打开之前关闭的tab页,这点同chrome是一样的
(6)Ctrl+R定位函数;Ctrl+G定位到行;
(7) 单个文件批量修改:纯相同的内容:选中需要修改的内容Alt+F3(Mac下默认的是Ctrl+Command+G) , 或者连续 Ctrl+D(Win) /连续 Command+D(Mac)之后重新写即可,使用Ctrl + U进行回退,使用Esc退出多重编辑。不纯相同却有一定规律可循的内容:这个就需要借助SublimeText强大正则的支持了。可以使用Ctrl+H(Mac下是Alt+Command+F)调出:
SublimeText
正则表达式是非常强大的文本查找&替换工具,Sublime Text中使用Alt + R切换正则匹配模式的开启/关闭。Sublime Text的使用Boost里的Perl正则表达式风格。鉴于篇幅,加之本身就对这个不甚熟悉,这里就不再多?嗦;以下是一些可以参考的文章:
(8) 有时我们需要对一片区域的所有行进行同时编辑,Ctrl+Shift+L可以将当前选中区域打散,然后进行同时编辑:
SublimeText
(9)有打散自然就有合并,Ctrl + J(mac下Command+J)可以把当前选中区域合并为一行:
SublimeText
(10)在Ctrl + P(Command+P)匹配到文件后,我们可以进行后续输入以跳转到更精确的位置:
(11)Ctrl + Enter(Mac~Command+Enter)在当前行下面新增一行然后跳至该行;Ctrl + Shift + Enter在当前行上面增加一行并跳至该行。
(12)Sublime Text的查找有不同的模式:Alt + C切换大小写敏感(Case-sensitive)模式,Alt + W切换整字匹配(Whole matching)模式,除此之外Sublime Text还支持在选中范围内搜索(Search in selection),这个功能没有对应的快捷键,但可以通过以下配置项自动开启。
"auto_find_in_selection": true
这样之后在选中文本的状态下范围内搜索就会自动开启,配合这个功能,局部重命名(Local Renaming)变的非常方便:
SublimeText
(13)Windows下Ctrl + ←/→进行逐词移动,相应的,Ctrl + Shift + ←/→进行逐词选择。
SublimeText
而Mac下的Command+←/→是从一端移动到另一端;相应的,Command + Shift + ←/→是从一端选择到另一端。
(14) Windows下Ctrl + ↑/↓移动当前显示区域,Ctrl + Shift + ↑/↓移动当前行。
SublimeText
而Mac下的Command + ↑/↓是从当前行移动到头/尾;相应的,Command + Shift + ↑/↓是从当前行选择到头/尾;
(15)使用Ctrl + N在当前窗口创建一个新标签,Ctrl + W关闭当前标签,Ctrl + Shift + T恢复刚刚关闭的标签。
(16)编辑代码时我们经常会开多个窗口,所以分屏很重要。Windows下:Alt + Shift + 2进行左右分屏,Alt + Shift + 8进行上下分屏,Alt + Shift + 5进行上下左右分屏(即分为四屏)。
(17)Sublime Text基本的手动格式化操作包括:Ctrl + [向左缩进(等同于将一块选中Shift+Tab),Ctrl + ]向右缩进(等同于将一块选中后Tab键),注解: Ctr+[ 和 Ctr+[ 针对一块连续内容使用,无需选中;此外Ctrl + Shift + V可以以当前缩进粘贴代码(非常实用)。
(18) Ctrl+Shift+V(好吧,尝试了下Windows下的这个,目测不行,看来须得安装下Clipboard-history插件~(粘贴板历史记录)才行啊)(Mac下Command+Shift+V),粘贴之时可以调出之前粘贴过的内容(以一个轻量弹框显示以供选择),哇哦,才发现这个功能,感觉棒棒哒??。
SublimeText
(19) Sublime text 删除插件步骤:“Ctrl+Shift+P”?“Remove Package”?“找到需要删除的插件,并点击即可删除”;
(20) 作为强大而小巧,性感且快捷的SublimeText,怎么能够允许不时弹个框提醒你购买或者别的,并且顶部有未注册这样破坏美感的存在呢?OK,输入Sublime text 3最新版破解方法中提供的注册码,就妥妥的哦了。
后记:作为如此便捷的她(Sublime Text3),值得分享肯定不止这些,在Coding and Writing路上,要继续去发现和发扬她的美,未完待续...--写于2015.04.17 22:49 ShenZhen@nanshan
当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中 (一般安装时自动添加或者询问是否添加)
在sublime text中依次打开Tools -> Build System -> New Build System... 粘贴以下代码后保存(如Node.sublime-build), 然后把Build System设成Automatic{ "cmd": ["node", "--use-strict", "--harmony", "$file"], "selector": "source.js"}
在以上的build文件中(Node.sublime-build), node是执行命令, --harmony和--use-strict是执行参数, $file是当前文件名, 所以一次build操作实际上相当于在命令行中执行了node --use-strict --harmony filename. --harmony表示启用ES Harmony features, 而这些features目前只能在strict模式下运行, 所以需要同时添加use-strict参数(详见what-is-extended-mode).如果不想启用es6的特性,把build文件更改成以下代码保存即可.{ "cmd": ["node", "$file"], "selector": "source.js"}
在sublime test中新建一个test.js文件, 然后输入你的测试代码, 比如:
for (let i = 0; i < 3; i++) { console.log('i:', i);}
使用快捷键 ctrl + b, 将得到以下执行结果:
i: 0i: 1i: 2[Finished in 0.1s]
温馨注解:
不仅主题可以更换,图标也可以。在Dribbble上有大量重新设计的Sublime Text精美图标。更换方法:
Sublime
如果你经常使用SublimeText从事英文创作,那么启用拼写检查就非常有用处了。选择Preferences > Settings ? User菜单,添加以下代码:
"spell_check": true,
所谓,一个好汉三个帮;欲要优雅使用一个工具,辅助器具是必不可少的。而在于Win下以SublimeText来编程或者写作,譬如AutoHotKey,__Listary__等对个人来讲着实已成必备工具(在Mac下,有Alfred在手,可以说是天下我有);其给人带来的方便快捷和意想不到的惊喜,足以可以令其称为Win下小众软件中实用最。当然,像AutoHotKey这种在乎于人强,其功能愈发强的工具,其修行之路漫漫,还当上下以求索之(15.09.17更)。
当然,也不能盲目停留在SublimeText这孤傲的世界里。虽性感强大如斯,毕竟也已逝老牌儿范儿了。新的时代总会崛起些新秀,比如Github出品的Atom许有赶超Sublime之势,目测充盈着些许不同的理念;有时间定当去学习下,知乎有话题:如何评价 Github 发布的文本编辑器 Atom?,可预先了解下。
---2016-03-06日更新:一直以来特别钟爱Sublime的。可插件安装多了的SublimeText日益感觉微微有些卡顿感了。并且最近一次更新之后,频繁弹出的购买提示框也是很令人不舒服(以前网搜的注册码也显得力不从前)。而对Atom的近期试用情形来看,用的还蛮舒适,现在两者兼用之。前两天有随记下Atom使用感受:新编码神器Atom使用纪要有兴趣爱尝试下Atom的看官们,可供参考。
---2016-03-13日更新之前提到优雅使用SublimeText,也须结合如AutoHotKey,Listary这样一些小工具,方更见神奇 。使用AutoHotKey也有段日子了,虽没拿她来助我完成一些高大上复杂的事情,却无时无刻不帮着我节省一秒秒时间。趁着小闲,周五有将使用她的一些粗浅经验,凑成 Win下最爱效率神器:AutoHotKey一文,与诸君分享,希望有用,如此,足慰我心,善莫大焉。
最后寄语:工欲善其事,必先利其器!公欲善其事,必先利其器!
参考文章出处:Sublime Text 全程指引 by LucidaSublime Text 3能用支持的插件推荐Wakatime 测试工作时间Sublime Text3插件:增强篇20个强大的SublimeText插件
原文首贴链接:http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/