Sublime Text3(mac版)上好用的插件

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

本节索引

sublime Text3 插件的安装
代码编辑非常有用的5个插件
配置React 开发环境所需要的插件支持

首先请查看你的sublime Text3 上是否安装了Package Control ,

安装 Package Ctrol：使用 ctrl + ～打开控制台，输入以下代码：

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())

1. 代码格式化的插件 (格式化HTML+CSS+JS+JSON代码的插件)

HTML-CSS-JS Prettify 是一个可以格式化HTML、CSS、Javascript和JSON的sublime插件，有着很棒的格式化效果。不过建议大家学习常用的代码编辑格式尽量写到符合标准的代码

安装过程如下：

  1. 在Sublime Text中，按下Ctrl+Shift+P调出命令面板;2. 输入install 调出 Install Package 选项并回车;3. 输入pretty，并在列表中选择HTML-CSS-JS Prettify后回车即可安装

可能遇到的问题以及解决方案（全部安装正确但格式化不能使用）

1、Node.js路径配置不对（首先确保安装了Node.js），修改一下HTML-CSS-JS Prettify的用户配置即可（Preferences -> Package-settings -> HTML/CSS/JS Prettify -> Set Prettify Preferences）：

2、如果路径没有问题，查看是不是sublime打开的文件路径中有中文，由于HTML-CSS-JS Prettify不支持utf-8，打开文件路径如果有中文，也会报Node.js路径错误。
```
  解决办法如下：1、preferences->Browse Packages（打开sublime 的安装文件）  2、修改 HTML-CSS-JS Prettify 目录下的 HTMLPrettify.py 文件3、83行：node_path = PluginUtils.get_node_path() 改为：node_path = PluginUtils.get_node_path().encode("utf-8")4、85行：file_path = self.view.file_name() 改为：file_path = self.view.file_name().encode("utf-8")
```

2.Js和Css语法检查插件 `sublimelinter以及配套的插件`

启动Package Control安装sublimelinter 插件安装sublimelinter-jshint（备选安装 sublimelinter-jslint）安装sublimelinter-csslint安装node运行环境

注意不要使用jsxhint,这是针对于需要支持react语法的插件,想要安装react语法插件请参照后面的sublime 搭建react开发环境

全局安装 jshint /csslint

 安装命令:sudo npm install -g jshint 注意插件名称都为小写.:sudo npm install -g csslint

将下列代码复制到
Preference->package Settings->SublimeLinter->Setttings-User 中

 注意下面代码中的(第五行和第六行 sublimelinter_executable_map)JS和Css的路径问题：mac中可以再终端用 which node命令 查看node的安装路径windows 中找到实际的node安装位置复制路径即可。{"sublimelinter": "save-only","sublimelinter_popup_errors_on_save": true,"sublimelinter_executable_map": {"javascript": "/usr/local/bin/node","css": "/usr/local/bin/node"},"jshint_options": {"strict": false,"quotmark": "single", //只能使用单引号"noarg": true,"noempty": true, //不允许使用空语句块{}"eqeqeq": true, //!==和===检查"undef": true,"curly": true, //值为true时，不能省略循环和条件语句后的大括号"forin": true, //for in hasOwnPropery检查"devel": true,"jquery": true,"browser": true,"wsh": true,"evil": true,            "unused": "vars", //形参和变量未使用检查"latedef": true, //先定义变量，后使用"globals": {"grunt": true,"module": true,"window": true,"jQuery": true,"$": true,"global": true,"document": true,"console": true,"setTimeout": true,"setInterval": true}},"csslint_options": {"adjoining-classes": false,"box-sizing": false,"box-model": false,"compatible-vendor-prefixes": false,"floats": false,"font-sizes": false,"gradients": false,"important": false,"known-properties": false,"outline-none": false,"qualified-headings": false,"regex-selectors": false,"shorthand": false,"text-indent": false,"unique-headings": false,"universal-selector": false,"unqualified-attributes": false}}

sublimelinte 支持的语言截图(后续的语言支持需要用户自行配置)

sublimelinte 支持的语言截图

3. JSFormat 插件(只是针对于js文件有效,想要格式化HTML等文件,请参照第一点)

按下快捷键 Ctrl+Alt+p 打开Package Control命令面板
输入 jsformat 回车安装即可.
在你写javascript代码时,选中需要格式化的代码，按下 Ctrl+Alt+f 快捷键后,js代码自动格式化对齐,赶快试一试吧!
如果上面的快捷键使用无效可以使用命令格式化代码,你可以选中要格式化的代码 ,然后按下 Ctrl+Alt+P (mac 系统 command + shift +p) 输入命令: Format:javascript 回车即可格式化.

4. Emmet 是一个前端开发的利器用于自动完成HTML的代码书写

Emmet 的基本用法是：输入简写形式，然后按 Tab 键。
关于 Emmet 的更多用法，请看官方文档，这份速查表可以帮你快速记忆简写形式。
Emmet安装：在Package Control中 install Package -> Emmet 安装Emmet.
使用：输入特定含义的字符按 Tag 自动完成

5. Theme – Soda + sublime Text3 主题修改

安装：
Theme – Soda

配置：

 在 Preferences ->Setting - User 中的[]中括号中添加,(注意配置文是数组的形式)"theme": "Soda Light.sublime-theme"  或 "theme": "Soda Dark.sublime-theme"

6.Sublime Text 3安装React 开发环境插件

babel-sublime 支持ES6，React.js, jsx代码高亮，对 JavaScript, jQuery 也有很好的扩展
- 安装：PC上ctrl+shift+p（MacCmd+shift+p）打开面板输入babel安装
- 配置：打开.js, .jsx 后缀的文件;
```
  打开菜单view，Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)，选择babel为默认 javascript 打开syntax
```
sublimeLinter-jsxhint JSX 代码审查，实时提示语法错误, 帮助快速定位错误
- 安装PC上 ctrl+shift+p（MacCmd+shift+p）打开面板输入sublimeLinter-jsx安装(请先确保sublimeLinter安装成功)
- 必须有node.js环境支持安装node.js
- 安装node中安装jsxhint
  npm install -g jsxhint
修改Emmet兼容jsx 文件(使用Tag 快速完成react 代码书写)

JSX语法书写
- 安装PC上 ctrl+shift+p（MacCmd+shift+p）打开面板输入emmet安装
- 使用方法打开preferences -> Key bindings - Users，把下面代码复制到[ ]中括号内部(注意配置文件为数组形式)。
```
  {"keys": ["super+e"],"args": {"action":"expand_abbreviation"},"command":"run_emmet_action","context": [{"key":"emmet_action_enabled.expand_abbreviation"}]},{"keys": ["tab"],"command":"expand_abbreviation_by_tab","context": [{"operand":"source.js","operator":"equal","match_all": true,"key":"selector"}, {"key":"preceding_text","operator":"regex_contains","operand":"(\b(a\b|div|span|p\b|button)(\.\w*|>\w*)?({FNXX==XXFN}*?}$)?)","match_all": true}, {"key":"selection_empty","operator":"equal","operand": true,"match_all": true}]}
```
  - 使用super+e触发 emmet；
  - 正则判断用 a，div，span，p，button标签默认tab 触发；
  - 默认 class 修改为 className 注 supre+e 在 PC 上指的是win+e（pc 建议修改为emmet 默认按键 ctrl+e）,在 mac 上指的是cmd+e
  - 详细请参考规则来源StackOverflow，正则小有修改

Sublime Text3(mac版)上好用的插件相关推荐

Sublime Text3 Mac版去掉自动更新和添加中文
一.去掉自动更新 1.先看下没有去掉自动更新,每次启动后的弹框提示: 2.去掉方法: 2.1)点击菜单栏 -> Preferences -> Settings-User 进入个人参数设置页 ...
sublime text3安装、注册及常用插件
由于换电脑,重装系统等问题,总要重装sublime.每次都要查来查去,不如自己记下来,以后再装也方便. 一.下载官网下载安装包(http://www.sublimetext.com/) :然后直接点 ...
sublime text3 的PHP函数追踪定位插件ctags和codeBeautifier
一.下载ctags http://download.csdn.net/detail/xujunabc999/9604934 二.安装ctags和codeBeautifier插件: 1)按Ctrl+sh ...
如何在mac版chrome安装第三方插件
将下载的后缀为.crx的文件,后缀名改成.7z的文件,用keka或其他解压软件对文件进行解压,得到同名文件夹. e g.将 "chrome123.crx" 改为
sublime text3 破解版下载
百度网盘:链接: https://pan.baidu.com/s/1-L1eweMdrywMwbB09hPhXA
endnote一打开就自动关闭_word mac版如何彻底删除endnote插件？mac版word移除endnote加载项的方法...
有些朋友在使用word mac版会安装endnote插件,但是用户体验不好就想要卸载,但是很多朋友在卸载endnote插件时都遇到一些小bug,也不知道怎么解决,所以小编为大家带来一个可以彻底删除En ...
sublime text3安装emmet插件
sublime text3安装emmet插件很多人输入html:5然后按住Tab键并没有生成完整结构,这是因为没有安装emmet插件 sublime text3安装包(来自官网) 链接:https: ...
MAC版php开发工具推荐：10款最流行的mac版php开发工具
目前使用MAC ios系统的php开发者越来越多.那目前MAC下php开发都用哪些工具呢?可能对于php初学者不知道该用哪些或者哪些mac版的php开发工具比较好?php中文网特为PHP开发者推荐几款 ...
汇编语言编辑器：Sublime text3
汇编语言编辑器:Sublime text3 一.前言看到这个标题,你可能会感到疑惑,汇编语言不是用记事本就可以编辑吗?虽然用记事本就可以编写汇编语言,但是在我看来记事本和sublime text3在 ...

Sublime Text3(mac版)上好用的插件

1. 代码格式化的插件 (格式化HTML+CSS+JS+JSON代码的插件)

2.Js和Css语法检查插件 `sublimelinter以及配套的插件`

3. JSFormat 插件(只是针对于js文件有效,想要格式化HTML等文件,请参照第一点)

4. Emmet 是一个前端开发的利器用于自动完成HTML的代码书写

5. Theme – Soda + sublime Text3 主题修改

6.Sublime Text 3安装React 开发环境插件

Sublime Text3(mac版)上好用的插件相关推荐

最新文章

热门文章

Sublime Text3(mac版)上好用的插件

1. 代码格式化的插件 (格式化HTML+CSS+JS+JSON代码的插件)

2.Js和Css语法检查插件 sublimelinter以及配套的插件

3. JSFormat 插件(只是针对于js文件有效,想要格式化HTML等文件,请参照第一点)

4. Emmet 是一个前端开发的利器 用于自动完成HTML的代码书写

5. Theme – Soda + sublime Text3 主题修改

6.Sublime Text 3安装React 开发环境插件

Sublime Text3(mac版)上好用的插件相关推荐

最新文章

热门文章

2.Js和Css语法检查插件 `sublimelinter以及配套的插件`

4. Emmet 是一个前端开发的利器用于自动完成HTML的代码书写