sublime text3 --前端工程师必备

时间 2019-11-16

标签 sublime text3 text 前端工程师必备栏目 HTML 繁體版

原文原文链接

sublime text3 --前端工程师必备神器

　　导读目录：

下载与Emmet插件安装
sublime text3 中cssrem安装与使用
sublime Text 3的中文文件名显示为方框的问题解决方案
如何使用自定义的快捷键快速在浏览器中打开html文件
安装jade的高亮插件
安装ejs的高亮插件
颜色样式选择
显示与修改编码
安装vue的高亮插件
解决jsx文件中的html标签没法自动补全的问题
Sublime中使用typescript(支持报错)

sublime text3 下载安装与 Emmet插件的安装

　　对于前端工程师来讲，sublime text3绝对是神器，Emmet插件经过自动补齐能够大大提升咱们的开发效率。css

　　第一步：进入官网下载sublime text3。好比对于个人64位windows系统，我选择了以下所示的一项：html

（注意：截图工具我使用的是 FastStoneCapture，百度便可，很是方便）前端

　 第二步：打开sublime text 3，按下ctrl+~ 或者 view--show Console调出命名控制行。vue

　　复制下面代码粘贴到其中：node

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)react

　　回车便可。这时能够看到preferrence下出现了Package Control.git

　　第三步：打开package control，输入install package，回车, 而后再输入Emmet,点击便可完成安装。github

　　然而，仅仅是下载仍是不够的，下面提供破解方法。typescript

　　点击help--enter lisence：复制粘贴下面三种注册码的任何一种，回车便可破解。windows

—– BEGIN LICENSE —–
Michael Barnes
Single User License
EA7E-821385
8A353C41 872A0D5C DF9B2950 AFF6F667
C458EA6D 8EA3C286 98D1D650 131A97AB
AA919AEC EF20E143 B361B1E7 4C8B7F04
B085E65E 2F5F5360 8489D422 FB8FC1AA
93F6323C FD7F7544 3F39C318 D95E6480
FCCC7561 8A4A1741 68FA4223 ADCEDE07
200C25BE DBBC4855 C4CFB774 C5EC138C
0FEC1CEF D9DCECEC D3A5DAD1 01316C36
—— END LICENSE ——

—– BEGIN LICENSE —–
Nicolas Hennion
Single User License
EA7E-866075
8A01AA83 1D668D24 4484AEBC 3B04512C
827B0DE5 69E9B07A A39ACCC0 F95F5410
729D5639 4C37CECB B2522FB3 8D37FDC1
72899363 BBA441AC A5F47F08 6CD3B3FE
CEFB3783 B2E1BA96 71AAF7B4 AFB61B1D
0CC513E7 52FF2333 9F726D2C CDE53B4A
810C0D4F E1F419A3 CDA0832B 8440565A
35BF00F6 4CA9F869 ED10E245 469C233E
—— END LICENSE ——

—– BEGIN LICENSE —–
Anthony Sansone
Single User License
EA7E-878563
28B9A648 42B99D8A F2E3E9E0 16DE076E
E218B3DC F3606379 C33C1526 E8B58964
B2CB3F63 BDF901BE D31424D2 082891B5
F7058694 55FA46D8 EFC11878 0868F093
B17CAFE7 63A78881 86B78E38 0F146238
BAE22DBB D4EC71A1 0EC2E701 C7F9C648
5CF29CA3 1CB14285 19A46991 E9A98676
14FD4777 2D8A0AB6 A444EE0D CA009B54
—— END LICENSE ——

sublime text3 中cssrem安装与使用

　　咱们在移动端开发时，使用rem布局是一个不错的选择，及将全部元素的尺寸使用rem来设置，可是咱们每次都须要先用设计稿中的值除以rem值而后才能获得最终的以rem为单位的数字，这时，cssrem插件就能够很好的解决咱们遇到的问题了。（注：对于移动端布局，见个人另外一篇博文《探究移动端开发》）

　　第一步：下载github中的cssrem，而后将名为cssrem-master文件夹移动到Preferences下的Browse Packages...

　　　　　　以下图所示：

　　第二步：重启sublime text3，便可使用。但咱们能够发现，实际上cssrem将1rem默认为40px。

面临的问题1：

　　可是若是咱们不但愿使用这样的默认项呢？下面介绍方法：

　　进入preference--browse packages,而后进入cssrem-master，并以记事本的方式打开cssrem.sublime-settings，发现下面数据：

　　也就是说，默认px到rem的转化为40，数字的最大长度为6位等等。因而咱们在这里编辑就可使用本身想要的rem了，是否是很简单呢！！

面临的问题2：

　　若是咱们不须要移动端rem布局，那么每次输入px都会重复的提醒，这是使人厌烦的，这时咱们能够将preference--browse packages里的cssrem-master加一个后缀名，好比.txt，这样重启sublime text就会发现不会有这种状况了。当咱们再须要使用时就把这个后缀删去便可。

面临的问题3：

　　若是咱们在html文件中的style标签下写css而不是在后缀名为.css的文件下写css那个这个工具就是没有用的。

　　结论：必须在 css文件中使用cssrem插件才有效。

解决问题3

　　在问题3中，咱们说过必须在css文件中使用cssrem才有效果，但这是由于咱们的availabel_file_types选项中只添加了.css、.less、.sass，而没有添加.html等。在vue的开发中，若是咱们但愿在.vue中使用，就能够在数组中添加.vue文件，这样咱们就能够直接在vue中进行转化了。

{
"px_to_rem": 72,
"max_rem_fraction_length": 4,
"available_file_types": [".css", ".less", ".sass", ".vue"]
}

sublime Text 3的中文文件名显示为方框的问题解决方案

　　问题状况以下所示，中文文件名被修改为了方框：

　　解决方法：

　　　　进入 Preferences --settings。

　　　　获得下面的结果：

在右边的settings-user，下面添加

　　　　"dpi_scale":1.0

它相似于JSON数据格式，注意：这个名值对的上一句结束应当再加一个英文状态下的逗号，以下所示：

按下 Ctrl+s保存，重启Sublime Text 3编辑器。效果以下所示；

成功显示中文文件名，可是对比发现，下面代码的字体变小了，只要按下 Ctrl+鼠标滚轮便可缩放字体，或在 setting-user下本身修改font-size的值便可。以下所示：

如何使用自定义的快捷键快速在浏览器中打开html文件

　　打开一个html文件有至少三种方式。

　　第一种：在目录中找到该文件，而后点击在浏览器中打开便可，这无疑是最麻烦的。

　　第二种：直接在sublime的html文件右击，点击open in browser ，便可打开，这个也是十分方便的。

　　第三种：设置快捷键，使用快捷键打开，方法以下：

　　第一步：在没有文件打开的状况下进入（不会出现问题）Preference--package control（若没有此项，请参看博文第一部分的介绍），并输入：Install Package,这时能够发现编辑器左下角正在处理此请求，一分钟左右处理完毕。输入View In Browser，片刻便可安装完成。（注意：对于你以前安装过的插件，再次搜索时是找不到的。）

　　第二步:进入Preference--KeyBuildings，打开下面的对话框。

在右边的user框的【】中输入下面的JSON数据：

1	`{` `"keys": ["ctrl+b"],` `"command":` `"open_in_browser"` `}`

这句话是说，按下ctrl+b,便可在浏览器中打开文件，快捷键能够根据你的习惯修改。注意：这里的浏览器是默认浏览器（能够在设置－－系统－－默认应用－－默认浏览器下进行修改默认浏览器）。

安装jade的高亮插件

　　在使用node时，咱们每每要使用模板引擎，其中jade就是比较经常使用的一种模板引擎，可是写jade时，是没有高亮语法的，因此咱们就须要使用相关插件了。

　　步骤：先 ctrl + shift + p 调用package control，而后找到install package回车，等到库出来以后，输入jade，回车，看左下角的提示（=来回闪），同时能够观察右下角的安装进度。 jade安装了以后，在一样的操做安装jade Build。最后重启sublime便可。

　　下面就是使用了Jade高亮插件的样子：

　能够发现，对于关键字都会高亮显示，而且在输入的时候能够发现也有自动提示功能，另外在换行的时候也很是智能，它会在合适的时候自动缩进。

安装ejs语法高亮插件

在使用node时，咱们每每要使用模板引擎，其中jade就是比较经常使用的一种模板引擎，可是写ejs时，是没有高亮语法的，因此咱们就须要使用相关插件了。

　　步骤：先 ctrl + shift + p 调用package control，而后找到install package回车，等到库出来以后，输入ejs2，回车，看左下角的提示（=来回闪），同时能够观察右下角的安装进度。ejs安装了以后，会有下面的提示：

Package Control Messages
========================

EJS 2
-----

  Thanks for installing EJS 2 :)
  
  Here are some tips to help you get started with this package:
  
  
  ### Color Scheme
  
  EJS 2 comes with the "Dracula EJS" color scheme which you can select from:
  `Preferences` -> `Color Scheme` -> `EJS 2`.
  
  Oceanic Next (https://github.com/voronianski/oceanic-next-color-scheme) is also a
  good color scheme for EJS that works right out of the box.
  
  
  ### Setting the default syntax
  
  By default, files with the extension `.ejs` are opened with the `EJS (<% %>)` syntax.
  
  If you'd like to open files with a different extension as EJS or you want to use delimiters
  other than "<% %>", follow these steps to set the default EJS syntax for an extension:
  
  1. Open an EJS file
  2. Select `View` from the menu
  3. Then `Syntax` -> `Open all with current extension as...` -> `EJS 2` -> `EJS (<delimiter>)`
  4. Repeat this for each extension you want to open as EJS
  
  This package includes syntax definitions for the following additional delimiters: `<? ?>`, `<$ $>`, `<@ @>`.
  
  
  ### Snippets
  
  In the HTML scope:
  
  + `if`+`TAB` - Inserts EJS `if` statement
  + `for`+`TAB` - Inserts EJS `for` loop

根据以上提示，咱们就能够作出配置了。

颜色样式选择

在sublime中，咱们能够经过 preference -> Color Scheme - Default 来选择不一样的主题颜色。

只能说sublime太强大，若是你以为哪里很差的话，必定是你没有充分发掘它的魅力。

显示与修改编码

　在sublime中，默认是不会显示一个文件的编码格式的，可是咱们可让他显示并进行设置。

　　可经过菜单Perference → Settings – User，在打开的配置文件中添加下面几行代码（必定要添加在{}里面）：

    // Display file encoding in the status bar
    "show_encoding": true,

    // Display line endings in the status bar
    "show_line_endings": true

　　这样，就能够在编辑器的右下角显示编码类型了，咱们点击它，就能够修改编码类型。

　　另外，咱们还能够直接以你但愿的编码类型从新打开这个文件：

　　是否是很是方便呢!

安装vue的高亮插件

　　首先 ctrl + shift + P ，而后选择install package，接着输入vue , 会匹配hignlight相关插件，点击安装便可。

解决jsx文件中的html标签没法自动补全的问题

这篇文章： http://react-china.org/t/sublime-text-jsx/11430 中的其中的一个回答是有效的，具体实现方式为：

1. 安装emmet
2. 配置 perferences——》Package Settings——》Emmet——》Key Binding-User，修改成以下配置

Sublime中使用typescript(支持报错)

　　install package -> typescript 安装 -> 重启

sublime text3 --前端工程师必备

sublime text3 --前端工程师必备神器

导读目录：

下载与Emmet插件安装

sublime text3 中cssrem安装与使用

sublime Text 3的中文文件名显示为方框的问题解决方案

如何使用自定义的快捷键快速在浏览器中打开html文件

安装jade的高亮插件

安装ejs的高亮插件

颜色样式选择

显示与修改编码

安装vue的高亮插件

解决jsx文件中的html标签没法自动补全的问题

Sublime中使用typescript(支持报错)

sublime text3 下载安装与 Emmet插件的安装

sublime text3 中cssrem安装与使用

面临的问题1：

面临的问题2：

面临的问题3：

结论：必须在 css文件中使用cssrem插件才有效。

解决问题3

sublime Text 3的中文文件名显示为方框的问题解决方案

如何使用自定义的快捷键快速在浏览器中打开html文件

安装jade的高亮插件

安装ejs语法高亮插件

颜色样式选择

显示与修改编码

安装vue的高亮插件

解决jsx文件中的html标签没法自动补全的问题

Sublime中使用typescript(支持报错)

　　导读目录：

　　结论：必须在 css文件中使用cssrem插件才有效。