frankwang0909.github.io/sublimetext-notes.html at master · frankwang0909/frankwang0909.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Sublimetext Intro - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="Sublime Text study notes, Sublime Text beginner’s guide, front-end engineer’s editing tool"><meta name=keywords content="Sublime Text,An editing tool for front-end engineers"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/sublimetext-notes.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/sublimetext-notes.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="Sublimetext Intro"><meta property="og:description" content="Sublime Text study notes, Sublime Text beginner’s guide, front-end engineer’s editing tool"><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2016-05-13T00:14:00+08:00"><meta property="article:modified_time" content="2016-05-13T00:14:00+08:00"><meta property="article:tag" content="Sublime Text"><meta itemprop=name content="Sublimetext Intro"><meta itemprop=description content="Sublime Text study notes, Sublime Text beginner’s guide, front-end engineer’s editing tool"><meta itemprop=datePublished content="2016-05-13T00:14:00+08:00"><meta itemprop=dateModified content="2016-05-13T00:14:00+08:00"><meta itemprop=wordCount content="760"><meta itemprop=keywords content="Sublime Text,An editing tool for front-end engineers"><meta name=twitter:card content="summary"><meta name=twitter:title content="Sublimetext Intro"><meta name=twitter:description content="Sublime Text study notes, Sublime Text beginner’s guide, front-end engineer’s editing tool"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>Sublimetext Intro</h1><div class=post-meta><span class=post-time>2016-05-13</span><div class=post-category><a href=/en/categories/tools/>tools</a></div><span class=more-meta>760 words </span><span class=more-meta>4 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#1-advantages-of-sublime-text>1. Advantages of Sublime Text</a></li><li><a href=#2-install-sublime-text>2. Install Sublime Text</a></li><li><a href=#3-recommend-several-useful-plug-ins>3. Recommend several useful plug-ins:</a></li><li><a href=#4-commonly-used-shortcut-keys-under-windows-platform>4. Commonly used shortcut keys (under Windows platform):</a></li></ul></nav></div></div><div class=post-content><p>Since changing the main code editor to <a href=https://www.sublimetext.com/>Sublime Text</a>, the efficiency of writing code has been significantly higher. Recently, I started trying to recommend this editor to my friends.</p><h2 id=1-advantages-of-sublime-text>1. Advantages of Sublime Text</h2><ol><li><p>Cross-platform;</p></li><li><p>Lightweight and scalable: There are a large number of plug-ins that users can choose to install (the <code>Emmet</code> plug-in is recommended first).</p></li><li><p>Support syntax highlighting for almost all mainstream programming languages;</p></li><li><p>Code automatic completion, supporting code snippets (Code Snippet);</p></li><li><p><code>minimap</code> in the upper right corner: used to view annotations, quickly drag, and quickly locate;</p></li><li><p>Quickly jump to different files/methods/functions: supports fuzzy matching;</p></li><li><p>Quickly switch between <code>Tab</code> and <code>Space</code>;</p></li><li><p>Format code;</p></li></ol><h2 id=2-install-sublime-text>2. Install Sublime Text</h2><ol><li>Download the installation package:</li></ol><p>Sublime Text official website address: <a href=https://www.sublimetext.com/>https://www.sublimetext.com/</a> Select the corresponding installation package to download and install according to your system. The current stable version is <code>Sublime Text 3</code>;</p><ol start=2><li>Install Package Control:</li></ol><p>Before downloading plug-ins, you need to install <code>Package Control</code>, which is a control component used to manage and download plug-ins. <code>Package Control</code> official website installation address: <a href=https://packagecontrol.io/installation>https://packagecontrol.io/installation</a></p><p><img src=/images/2016051301.jpg alt></p><ol><li>Use the shortcut key <code>ctrl+`` or the </code>View<code>></code>Show Console` menu to open the console, then press Enter to let it install.</li></ol><p><img src=/images/2016051302.jpg alt></p><ol start=2><li>Select and copy the corresponding version code according to the version of Sublime Text;</li></ol><p><img src=/images/2016051303.jpg alt></p><ol start=3><li>Paste it into the console input box and press the <code>Enter key</code>, and the plug-in management package will enter the downloading and installation state (it may take a while);</li></ol><ol start=3><li>Customize the installation of various plug-ins:</li></ol><p>At the Package Control official website address: <a href=https://packagecontrol.io/>https://packagecontrol.io/</a> you can see various plug-ins and their download rankings. If you find the one you are interested in, download it and try it out.</p><p>The download and installation method is as follows: (windows platform)</p><ol><li>Press <code>Ctrl+Shift+P</code> to bring up the command panel, enter <code>install</code>, bring up the <code>Install Package</code> option and press Enter, a screen like this will appear,</li></ol><p><img src=/images/2016051305.jpg alt></p><ol start=2><li>Then enter the name of the plug-in you want to download, such as: <code>HTML Extended</code></li></ol><p><img src=/images/2016051306.jpg alt></p><ol start=3><li>After the download and installation is completed, a file similar to this will pop up, indicating that the plug-in has been successfully installed.</li></ol><p><img src=/images/2016051307.jpg alt></p><p>Or a prompt for successful installation in the lower left corner:</p><p><img src=/images/2016051308.jpg alt></p><h2 id=3-recommend-several-useful-plug-ins>3. Recommend several useful plug-ins:</h2><ol><li><p>Emmet: Directly generate a large piece of code through simple commands.</p></li><li><p>ConvertToUTF8 (convert to utf-8 format): By default, Chinese in gbk encoding format will become garbled characters. This plug-in can implement automatic conversion.</p></li><li><p>JsFormat: Format js code. It can restore the js code that has been compressed and difficult to read on other people&rsquo;s websites.</p></li><li><p>HTMLBeautify: Format HTML.</p></li><li><p>Hasher: symbol escape.</p></li><li><p>TrailingSpaces: extra space mark.</p></li><li><p>SideBarEnhancementS: Sidebar enhancements.</p></li><li><p>ChineseLocalization: Chinese plug-in.</p></li></ol><h2 id=4-commonly-used-shortcut-keys-under-windows-platform>4. Commonly used shortcut keys (under Windows platform):</h2><ol><li><p><code>Ctrl + Shift + N</code>Create a new window;<code>Ctrl + W</code>Close the window.</p></li><li><p><code>Ctrl + N</code> creates a new label; <code>Ctrl + W</code> closes the current label; <code>Ctrl + Shift + T</code> restores the just-closed label.</p></li><li><p><code>Alt + Shift + 2</code> split the screen left and right; <code>Alt + Shift + 8</code> split the screen up and down; <code>Alt + Shift + 5</code> split the screen up, down, left and right into four screens. <code>Ctrl + Numeric Keys</code> jumps to the specified screen; <code>Ctrl + Shift + Numeric Keys</code> moves the current screen to the specified screen.</p></li></ol><p><code>ctrl+1</code> changes back to one screen display.</p><ol start=4><li><p><code>F11</code> switches to normal full screen; <code>Shift + F11</code> switches to interference-free full screen.</p></li><li><p><code>Ctrl + P</code> will list all currently opened files, click on a file to jump quickly;</p></li><li><p><code>Ctrl + R</code> For md files, the outline will be listed.</p></li></ol><p><img src=/images/2016051309.jpg alt></p><ol start=7><li><p><code>Ctrl + F</code> brings up the search box to search; <code>Ctrl + H</code> replaces</p></li><li><p><code>Ctrl + J</code> merges the selected areas into one line; <code>Ctrl + Shift + L</code> can scatter the currently selected areas and edit them simultaneously:</p></li><li><p>Multi-line cursor (can edit multiple lines of code at the same time): <code>Ctrl + D</code> selects the word where the current cursor is located and highlights all occurrences of the word, and <code>Ctrl + D</code> again selects the next position where the word appears. In the process of multiple word selection, use <code>Ctrl + K</code> to skip, use <code>Ctrl + U</code> to go back, and use <code>Esc</code> to exit multiple editing.</p></li><li><p><code>Ctrl + Enter</code> adds a new line below the current line and jumps to that line; <code>Ctrl + Shift + Enter</code> adds a new line above the current line and jumps to that line.</p></li><li><p><code>Ctrl + E</code> automatically generates code snippets (after installing the Emmet plug-in).</p></li><li><p><code>Ctrl + shift + D</code>Copy the contents of the current line to the next line and jump to that line.</p></li></ol></div><footer class=post-footer><div class=post-tags><a href=/en/tags/sublime-text/>Sublime Text</a></div><nav class=post-nav><a class=prev href=/markdonw-notes.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">Markdown Intro</span>
<span class="prev-text nav-mobile">Prev</span>
</a><a class=next href=/tab.html><span class="next-text nav-default">Tab</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>&copy;
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>