前端开发神器Sublime3的安装及配置(mac版本)

简介: 前端开发神器Sublime3的安装及配置(mac版本)

0x00 教程内容


  1. 下载并安装Sublime
  2. 推荐插件安装


0x01 下载并安装Sublime


1. 下载

a. 官网下载(http://www.sublimetext.com/3):

选择自己对应的版本,此处我下载OS X


image.png


2. 安装

a. 拖拉进去即是安装


image.png


0x02 推荐插件安装


1. 准备插件管理工具

a. 安装Package Control(此步不要操作,了解即可)

打开Sublime,按Ctrl + ` 调出console,粘贴下列安装代码到底部命令行并回车:


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


image.png


c. 校验是否安装成功

如果在Perferences->Package Settings中看到package control这一项,则表示安装成功。


image.png


可能出现的问题:


image.png


报错的话,可能是网络原因,切换网络或者自行搜索资料,用手动的方式来安装。

2. 用Package Control安装其他插件

a. 安装插件操作

按下Cmd + Shift + P 调出命令面板,输入install,会弹出Install Package选项,选中并回车。


image.png


b. 然后在搜索框中搜索想要安装的插件(下面滚动条在跳动…停了之后就可以了)


image.png


此插件装好后是这样子的(左边有各种功能,不装的话很简陋):


image.png


c. 此处再补充几个插件


MarkDown Editing:markdown写法插件

(在文档,按Ctrl + Shift + p,然后输入:ssm,回车。ssm <=> Set Syntax: Markdown)

Sublime Terminal:Sublime中直接使用终端打开你的项目文件夹,并支持使用快捷键

SublimeLinter插件:高亮不规范的JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十几种开发语言

Ctags插件:函数跳转

(Alt + ←)

参考文章:

如何优雅地使用Sublime Text3

sublime text 2(3)下的Markdown写作


0x03 Sublime快捷键总结


  1. 符号说明
符号说明
⌘:command 
⌃:control 
⌥:option 
⇧:shift 
↩:enter 
⌫:delete 
打开/关闭/前往


快捷键功能


⌘⇧N 打开一个新的sublime窗口 
⌘N 新建文件 
⌘⇧W 关闭sublime,关闭所有文件 
⌘W 关闭当前文件 
⌘P 跳转、前往文件、前往项目、命令提示、前往method等等(Goto anything) 
⌘⇧T 重新打开最近关闭的文件 
⌘T 前往文件 
⌘⌃P 前往项目 
⌘R 前往method 
⌘⇧P 命令提示 
⌃G 前往行 
⌘KB 开关侧栏 
⌃` 打开控制台 
⌃- 光标跳回上一个位置 
⌃⇧- 光标恢复位置 
编辑
⌘A 全选 
⌘L 选择行(重复按下将下一行加入选择) 
⌘D 选择词(重复按下时多重选择相同的词进行多重编辑) 
⌃⇧M 选择括号的内容 
⌘⇧↩ 在当前行前插入新行 
⌘↩ 在当前行后插入新行 
⌃⇧K 删除行 
⌘KK 从光标处删除至行尾 
⌘K⌫ 从光标处删除至行首 
⌘⇧D 复制(多)行 
⌘J 合并(多)行 
⌘KU 改为大写 
⌘KL 改为小写 
⌘C 复制 
⌘X 剪切 
⌘V 粘贴 
⌘/ 注释 
⌘⌥/ 块注释 
⌘Z 撤销 
⌘Y 恢复撤销 
⌘⇧V 粘贴并自动缩进 
⌘⌥V 从历史中选择粘贴 
⌃M 跳转至对应的括号 
⌘U 软撤销(可撤销光标移动) 
⌘⇧U 软重做(可重做光标移动) 
⌘⇧S 保存所有文件 
⌘] 向右缩进 
⌘[ 向左缩进 
⌘⌥T 特殊符号集 
⌘⇧L 将选区转换成多个单行选区 
查找/替换
⌘f 查找 
⌘⌥f 查找并替换 
⌘⌥g 查找下一个符合当前所选的内容 
⌘⌃g 查找所有符合当前选择的内容进行多重编辑 
⌘⇧F 在所有打开的文件中进行查找 
拆分窗口/标签页
⌘⌥[1,2,3,4] 单列、双列、三列、四列 
⌘⌥5 网格(4组) 
⌃[1,2,3,4] 焦点移动到相应的组(分屏编号) 
⌃⇧[1,2,3,4] 将当前文件移动到相应的组(分屏编号) 
⌘[1,2,3,4] 选择相应的标签页 
快捷操作
⌘⌃上下键 两行交换位置 
⌘KB 显示/隐藏侧边


0xFF 总结


  1. 精通各种软件的安装,说的就是我吧…
  2. 可是,环境是非常重要的,又能怎么样呢。
相关文章
|
前端开发
如何解决前端工程化中出现的版本冲突问题?
如何解决前端工程化中出现的版本冲突问题?
567 61
|
11月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
11082 23
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
832 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
11月前
|
监控 Shell Linux
Android调试终极指南:ADB安装+多设备连接+ANR日志抓取全流程解析,覆盖环境变量配置/多设备调试/ANR日志分析全流程,附Win/Mac/Linux三平台解决方案
ADB(Android Debug Bridge)是安卓开发中的重要工具,用于连接电脑与安卓设备,实现文件传输、应用管理、日志抓取等功能。本文介绍了 ADB 的基本概念、安装配置及常用命令。包括:1) 基本命令如 `adb version` 和 `adb devices`;2) 权限操作如 `adb root` 和 `adb shell`;3) APK 操作如安装、卸载应用;4) 文件传输如 `adb push` 和 `adb pull`;5) 日志记录如 `adb logcat`;6) 系统信息获取如屏幕截图和录屏。通过这些功能,用户可高效调试和管理安卓设备。
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
626 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
611 26
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
454 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
7176 4
|
开发工具 git 开发者
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
本篇将专注于如何在 DevEco Studio 中安装和配置必要的插件,以增强开发功能和提升效率。通过正确配置插件,开发流程能够得到简化,开发体验也会更加顺畅。
575 1
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
345 6