目次
Sublime Text 2 と 3 の比較
Sublime Text 3 インストール プラグイン Sublime Text の強みは、強力なコース拡張性を備えていることです。必要に応じてさまざまなプラグインをインストールできるため、軽量でありながら非常に強力になります。
Sublime Text 3 プラグインの推奨
定制属于自己的快捷键
Sublime不可不知的实用技巧:
定制属于自己的个性化主题
Sublime锦上添花些许设置
Sublime Text内运行javascript(ES6)
首先安装nodejs
添加build system
附加说明
具体使用
更换Sublime Text程序图标
Sublime 拼写检查
写在一路更来的结语
ホームページ ウェブフロントエンド htmlチュートリアル Sublime Text3_html/css_WEB-ITnose をエレガントに使用する方法

Sublime Text3_html/css_WEB-ITnose をエレガントに使用する方法

Jun 24, 2016 am 11:20 AM

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 について知っておくべき実践的なヒント 独自のパーソナライズされたテーマをカスタマイズ 途中で結論を書きます。

Sublime Text 2 と 3 の比較

2 と比較すると、Sublime Text 3 は数秒で 1 項目しか起動できず、圧倒的に勝利です。したがって、Sublime Text 3 はその後の物語の主人公になります。 3 は継続的に改善され、更新されています。具体的な違いについては、Sublime ブログを参照してください:
  • ST3 は、プロジェクト ディレクトリ内の変数の検索をサポートします
  • タブのサポートが向上しました (より多くのコマンドとショートカット キー)
  • 速度プログラムの実行速度が向上しました
  • Python3.3 を使用して API を更新しました
友人には 3 を使用することを強くお勧めします! 速いだけで、壊れていません。説明はありません。

Sublime Text 3 インストール プラグイン Sublime Text の強みは、強力なコース拡張性を備えていることです。必要に応じてさまざまなプラグインをインストールできるため、軽量でありながら非常に強力になります。

  • プラグインのインストール方法 1: 直接インストール:
Sublime text 3 プラグインをインストールするのは非常に便利です。インストール パッケージを直接ダウンロードして、Packages ディレクトリ (menu->) に解凍できます。 ;設定->パッケージ)。

  • プラグインのインストール方法 2: パッケージ コントロール コンポーネントを使用してインストールします:
Ctrl+` を押してコンソールを表示します (注: QQ 入力メソッドがインストールされている場合、このショートカット キーは競合します。メソッド属性設定 - 入力 メソッド管理 - ホットキーをキャンセルし、QQ ピンインに切り替えます) 次のコードを一番下のコマンド ラインに貼り付けて Enter キーを押します:

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 を押し、リストからインストールするプラグインを選択します。

追記: 中国で SublimeText3 を使用している場合、利用可能なプラグインをインストールできないという問題が頻繁に発生することがあります。パッケージ コントロールさえインストールできない場合は、

パッケージ コントロール を削除して再インストールしてください。 Package Control のコピーを他の場所にコピーできます。ファイル (Package Control.sublime-package) は、インストールされたパッケージ ディレクトリに保存できます。

Sublime Text 3 プラグインの推奨

プラグインもアーティファクトも必要ありません! 自分のニーズに応じて独自の強力なプラグイン セットをカスタマイズします。モバイル側で古いゲームをプレイした後、Web で新しいゲームをプレイした人として、Wall Crack は次のプラグインをお勧めします:

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 を使用して時間を記録する を参照してください。

次のような、オンデマンドでインストールできるプラグインが他にもあります:

  • ConvertToUTF8 GBK、BIG5、EUC-KR、EUC-JP、Shift_JIS およびその他のエンコーディングをサポートするプラグイン
  • ブラケット ハイライター括弧、引用符、HTML タグの一致を確認します。非常に長いコードに役立ちます。インストール後、プラグインを設定する必要はなく、自動的に有効になります
  • DocBlockrは、PHPDocスタイルのコメントを自動的に生成できます。サポートする言語は、JavaScript、PHP、ActionScript、CoffeeScript、Java、Objective C、C、C++です
  • Emmet(Zencoding)
  • HTMLを素早く生成コード スニペット このプラグインは比類のないほど強力です。HTML/CSS/JS を非常に高速に作成できます。もちろん、このプラグインは、一般的なコンパイル環境 (Eclipse/Aptana、Coda、Notepad++) などのさまざまなコンパイル環境もサポートしています。 Adobe Dreamweaver、TextMate など、Web 開発の必需品! ! ! jsFormat
  • js コードをフォーマットします。理解できる人は理解できるでしょう。強迫性障害のプログラマーにとっては必須です。デフォルトのショートカット キーは Ctrl+Alt+F です。
  • phpFormat php コードをフォーマットします。知っている人は理解できるでしょう。強迫的なプログラマーにとっては必須です。
  • CSS Compact Expand CSS プロパティの拡張と縮小: CSS を書く友人の皆さん、CSS を複数行で書くのと 1 行で書くのはどちらが好きですか (私は個人的には複数行にフォーマットするのが好きです)。他の人のコードを読むことが自分の習慣に合わない場合は、CSS Compact Expand プラグインを使用して CSS をフォーマットし、CSS コードを 1 行に縮小し、Ctrl+Alt+] を押すことができます。 CSS コードを複数行に展開する; 疾患プログラマーの必需品です。 。
  • Autoprefixer プラグイン: これは CSS3 プライベート プレフィックス自動補完プラグインです。このプラグインは CanIUse データベースを使用します (もちろん、SublimeText には CanIUse< ;/font> プラグイン) は、どの属性にどのプレフィックスが必要かを正確に判断できます。 CssComb プラグインと同様に、このプラグインもシステムに Node.js 環境がインストールされている必要があります。 CSS3 属性を入力した後 (コロンの前) キーを押します。
  • YUI Compressor
  • : JS および CSS ファイルを圧縮します。F7 キーを押した後、現在のファイル (demo.js) が圧縮されている場合、圧縮ファイル (demo.min.js) が同じディレクトリに保存されます。レベルをファイルとして指定します。 必須 JDK for Java をインストールします。使用方法: YUI Compressor
  • ClickableURLs: クリッカブル URL
  • ファイル内の URL をクリック可能にするには、小さなプラグイン ClickableURLs を使用します。
  • 究極の方法
  • : 独自の専用の Sublime Text プラグインを作成します。モバイル端末、Web フロントエンド、サーバーサイドなどさまざまな側面で、非 Coder Writer に求められる利便性がさまざまなプラグインに統合されています。ただし、たとえば、PC 上で特定のシミュレーターをすばやく開き、特定の検証を便利に実行する必要がある場合は、基本的にプラグインに入れて、ショートカット キーを使用して思いつく限りのすべてを処理できます。 SublimeText プラグインの書き方については、ここを参照して独自の Sublime Text2 プラグインを作成してください
  • 定制属于自己的快捷键

    • 首先要会使用SublimeText内置的快捷键: 比如 Commond Shift P 打开命令面板:例如打开Package Control安装各种插件;可以可以输入Set(Snytax)来改变使用的语言环境,瞬间切换等等。
    • 设置快捷键。在SublimeText里,打开Preferences -> Key Bindings - User,我设置的快捷键:
        [      { "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

    Sublime不可不知的实用技巧:

    ---更新2015.05.21 15:50 ShenZhen@nanshan 对于这个依赖于插件的强大性感无比开源编辑器;优雅的适用之,就在于合理的使用需要的插件,走一条快准狠的键盘一刀流。这个当然可以自己用python来写,但是一般的需求基本上都已经有人完成,还是不浪费时间自己造轮子了。今儿就再赘述一些使用的经验,让使用她可以更加优雅。

    (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正则表达式风格。鉴于篇幅,加之本身就对这个不甚熟悉,这里就不再多?嗦;以下是一些可以参考的文章:

    • 开源中国~正则表达式30分钟入门教程
    • 59分钟学会正则表达式
    • MSDN~正则表达式语法
    • 月光博客~常用正则表达式

    (8) 有时我们需要对一片区域的所有行进行同时编辑,Ctrl+Shift+L可以将当前选中区域打散,然后进行同时编辑:

    SublimeText

    (9)有打散自然就有合并,Ctrl + J(mac下Command+J)可以把当前选中区域合并为一行:

    SublimeText

    (10)在Ctrl + P(Command+P)匹配到文件后,我们可以进行后续输入以跳转到更精确的位置:

    • @ 符号跳转:输入@symbol跳转到symbol符号所在的位置
    • # 关键字跳转:输入#keyword跳转到keyword所在的位置
    • : 行号跳转:输入:12跳转到文件的第12行。

    (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最新版破解方法中提供的注册码,就妥妥的哦了。

    定制属于自己的个性化主题

    SublimeText 她不仅仅是作为性感无比,强大可大编辑器的存在;要知道在如今这么靠脸吃饭的时代,她的美者这方面怎么可能不臻至完美呢?Mac和Windows都默认十多种不同风格的主题,想必会有您喜欢?的。即便没有也没关系,我们可以自己定制自己喜欢的风格主题。 在线制作专属Sublime Text主题。这个网址可以轻松按照自己的意愿制作喜欢的主题。完毕之后将生成的xx.sublime.theme文件,点开Preferences -> Browsr Packages这个,放在这个直属目录之下,即可在Theme处选择这个主题了,亲测没有问题。

    后记:作为如此便捷的她(Sublime Text3),值得分享肯定不止这些,在Coding and Writing路上,要继续去发现和发扬她的美,未完待续...--写于2015.04.17 22:49 ShenZhen@nanshan


    Sublime锦上添花些许设置

    ---更新2015.08.31 11:59 ShenZhen@nanshan---

    Sublime Text内运行javascript(ES6)

    首先安装nodejs

    当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中 (一般安装时自动添加或者询问是否添加)

    添加build system

    在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]
    ログイン後にコピー

    温馨注解:

    • (1)文件必须是存在于磁盘中的, 而不是untitled的, 否则sublime无法找到相应的文件.
    • (2)Nodejs安装目录需要加入path环境变量中,否则Ctrl+B运行 会出现:[WinError 2] 系统找不到指定的文件。

    更换Sublime Text程序图标

    不仅主题可以更换,图标也可以。在Dribbble上有大量重新设计的Sublime Text精美图标。更换方法:

    1. 下载一个图标,有.icns格式的最好。如果没有,用iConvert转换之。
    2. 终端执行:open /Applications/Sublime\ Text.app/Contents/Resources/
    3. 替换Sublime Text 3.icns或Sublime Text 2.icns文件。

      Sublime

    Sublime 拼写检查

    如果你经常使用SublimeText从事英文创作,那么启用拼写检查就非常有用处了。选择Preferences > Settings ? User菜单,添加以下代码:

    "spell_check": true,

    写在一路更来的结语

    不得不说的是此篇文章的命名,较之于内容来讲是大了很多。毕竟要优雅使用某个工具,并不是件很容易的事。一边发现学习,一边总结更新,到此已5个月整。然而,对她~SublimeText3三的使用和了解也是仅仅限于一般水平而已。只能说:每个人都工具的使用都怀有不同的态度和追求;但是, 工欲善其事,必先利其器;此一点总是没错的。因此,在投资自己这里,除学习知识之外,工具的使用大抵就是最应该投资学习的,再次可以是蓝股等等,一如Google工程师@徐宥 工具的强是无敌的所言。

    所谓,一个好汉三个帮;欲要优雅使用一个工具,辅助器具是必不可少的。而在于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/

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

See all articles