前端开发神器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. 可是,环境是非常重要的,又能怎么样呢。
相关文章
|
29天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
1月前
|
前端开发 应用服务中间件 nginx
docker安装nginx,前端项目运行
通过上述步骤,你可以轻松地在Docker中部署Nginx并运行前端项目。这种方法不仅简化了部署流程,还确保了环境的一致性,提高了开发和运维的效率。确保按步骤操作,并根据项目的具体需求进行相应的配置调整。
125 25
|
1月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
122 26
|
30天前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
320 1
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
3月前
|
开发工具 git 开发者
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
本篇将专注于如何在 DevEco Studio 中安装和配置必要的插件,以增强开发功能和提升效率。通过正确配置插件,开发流程能够得到简化,开发体验也会更加顺畅。
180 1
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
|
4月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
257 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
3月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
110 6
|
3月前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
111 7

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡