当前位置:首页 » 网页前端 » sublimetext3前端开发
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

sublimetext3前端开发

发布时间: 2022-07-16 00:59:02

❶ 如何sublime text3 开发php

我觉得1、下载PHP的集成安装环境WampServer,下载完成后运行exe点下一步、下一步进行安装
2、按win+R输入sysdm.cpl打开系统属性(或通过计算机右击->属性->高级系统配置)选择高级->环境变量,然后将PHP可执行程序路径(wampServer安装目录下,我这儿是安装在D盘所以就是下图中的路径)设置到环境变量 path 即可。后盾人就有类似的视频教程,你可以去学习下,也许会有不一样的效果

❷ sublime text 怎么写前端代码

编写html代码,一定要使用emmet(前身是zencoding),还有以下插件也是可以考虑的:
bracketHighter 高亮引号、括号等
code Aligment 代码对齐
DocBlockr 如果你写js,这个就很有用了
emmet 书写html必备
emmet css snippets 书写css必备
Encoding Helper 当你遇到加载的文件乱码时,这个插件就很有用了
jsFormat 格式化js代码
theme soda 软件主题,挺漂亮的
minifier 压缩js/css
sidebarenhance 增强型边栏

livereload 配合浏览器(firefox、chrome)上的livereload插件,就不用老是按F5了

❸ 前端开发常用哪些工具软件

前端开发的编译器在选择上还是很多的。在学校里,老师主要讲三个前端开发软件:

1、WebStorm

帮助编写HTML、CSS、Less、Sass和Stylus代码,并且支持Node.js和主流框架,如React、Angular、Vue.js、Meteor等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。但是付费软件。

2、IntelliJ idea

页面很简单,乍一看像是一个记事本,它也确实可以当记事本用。有很多特色插件可以使用,支持多种编程语言的语法高亮显示,具有代码折叠功能。

2、HBuilderX

HBuilderX是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本,具有轻便、适合vue框架的特点。

❹ sublime text 3 有什么插件

Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述。界面整洁美观、文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记。Sublime Text还支持Mac、Windows和Linux各大平台,方便用户使用。种类繁多、功能强大的插件更给Sublime Text 3锦上添花。下载Package Control后就可以迅速的开启插件之路。
1. Soda Theme
Sublime Text 3中较为常用的一款自定义编辑器主题,用过的人都说好。Soda Theme包含代码着色、标签、图标,拥有light和dark两种颜色主题便于用户在不同时间段使用。
Github:https://github.com/buymeasoda/soda-theme/

2. Sublime APICloud Plugins
Sublime APICloud Plugins是APICloud为开发者提供的一套开源的Sublime Text扩展插件,包括:应用管理、应用框架、页面模板、代码提示、代码管理、Widget打包、真机同步、日志输出、管理自定义AppLoader等功能,其他的功能插件也在不断增加,这些插件已被Package Control成功收录,开发者可以直接在Sublime Text3中下载安装;所有插件都已开源,开发者也可以在此基础上按需求扩展自己的插件。
插件下载:http://www.apicloud.com/devtools

3. ColorPicker
编辑CSS样式的时候, ColorPicker调色盘不仅可以查看颜色值,更可以轻松调好颜色。ColorPicker同时还是一个双向选择颜色的功能,既可以在调色板中选好颜色将其使用至文档中,也可以迅速定位文档中的某一种颜色值到调色板中。
插件下载:https://github.com/weslly/ColorPicker

4. Emmet
Emmet (前身是 Zen Coding)是一个前端开发不可缺少的插件,它让编写 HTML和CSS代码变得简单,节省大量时间。Emmet可使开发者用缩写形式书写代码,再用“扩展”功能自动将代码扩展至完整样式。
早在2009年,Zen Coding作为具有革命性的HTML和CSS代码编辑插件一经问世,直到现在帮助了无数的开发者,减少他们的时间,使得编写代码变得简便有趣。现在,Emmet已经超越了Zen Coding到达了更高层次,普适性的功能将给更多的开发者带来便利。
插件下载:https://github.com/sergeche/emmet-sublime

5. SublimeCodeIntel
SublimeCodeIntel 作为一个代码提示和补全插件,支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python3、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等所有语言,是 Sublime Text 自带代码提示功能基础上一个更好的扩展,自带代码提示功能只可提示系统代码,而SublimeCodeIntel则可以提示用户自定义代码。SublimeCodeIntel支持跳转到变量、函数定义的功能,另外还有自动补全的功能,十分方便。
插件下载:https://github.com/SublimeCodeIntel/SublimeCodeIntel

6. FileDiffs
FileDiffs插件可以让开发者比较两个不同文件的差异,比较的对象包括当前文件、另一文件、剪切板中的代码甚至未保存文件等。
插件下载:https://github.com/colinta/SublimeFileDiffs

7. SublimeLinter
SublimeLinter是少数几个能在sublime text 3工作的代码检查插件,SublimeLinter支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言,但前提是需要配置相应语言的环境,要检查JavaScript代码需要安装node.js,检查PHP代码需要安装PHP并配置环境等。SublimeLinter可以及时提示编写代码中存在的不规范和错误的写法,并培养我们良好的编码习惯和风格。
插件下载:https://github.com/SublimeLinter/SublimeLinter/tree/sublime-text-3

8. Alignment
Aligment插件让开发者自动对齐代码,包括PHP、CSS、JavaScript语言。使得代码看起来更整齐美观,更具可读性。
插件下载:https://github.com/wbond/sublime_alignment

Sublime Text 3中的插件种类繁复,功能强大,以上是开发者最常用的8大插件,希望给各位开发者节省插件选择的时间,提供编写代码的效率。

❺ sublime text 3编程怎么样

一直是Vim的用户,对于文本编辑来说确实无可挑剔。可是因为团队开发不可避免的也会使用别的一些IDE工具,相信会有很多Vim的爱好者会和我有同样的烦恼,在IDE里很顺手的按下快捷键,输出字符了,按ESC,再按命令,又输出字符了,再再按ESC……无语啊!

因为Vim的命令编辑模式的特殊性,大多数的IDE都无法配置自定义的Vim快捷键,最多是些标准的“hjkl”等。而且在日常工作中经常会和别人交流,用Vim确实太小众了,想想看,敏捷开发结对时,你用Vim,旁边坐着的哥们是纯Windowser……

终于下定决心,再学习一种文本编辑器,网上逛了一圈,选了Sulime Text。写下这篇文章,记录了学习的过程,后期会尽力不断更新修正……

快捷键查阅了Sublime Text3的keymap文件,实际试用后编写,Sublime Text2可能会有少许差异。

配置文件中字体是我在网上找到的“雅黑+Consolas”编程字体,自己修改了一些不喜欢的地方,见下图。你可以变更配置文件为自己喜欢的或直接注释即可。

Sublime Text 快捷键


1.1. 文件窗口面板

Ctrl+Shift+P: 打开命令面板

Ctrl+Alt+P: 打开项目切换面板

Ctrl+P: 打开文件切换面板

Ctrl+`: 打开控制台

Ctrl+N: 新建文件

Ctrl+Shift+N: 新建窗口

Ctrl+Shift+T: 打开最后关闭的文件

Ctrl+O: 打开文件

Ctrl+S: 保存文件

*Ctrl+Shift+S: 另存文件(建议:保存所有文件)

Ctrl+W: 关闭文件

*Ctrl+Shift+W: 关闭窗口(建议:关闭所有文件)

Ctrl+K,Ctrl+B: 开关侧栏

F11: 全屏

Shift+F11: 全屏免打扰模式(只显示当前编辑文件)

Alt+Shift+Num: 分屏显示共Num个窗口

Alt+Num: 切换第Num个索引(默认文件)

Ctrl+Tab: 按文件浏览顺序切换文件

Ctrl+[PageUp,PageDown]: 切换上/下个文件

Ctrl+K,Ctrl+Up: 当前文件至分割窗口

Ctrl+K,Ctrl+Shift+Up: 新建文件至分割窗口

Ctrl+K,Ctrl+Down: 合并分割窗口

Ctrl+K,Ctrl+[Left,Right]: 焦点移动到上/下个窗口

Ctrl+K,Ctrl+Shift+[Left,Right]: 当前文件移动到上/下个窗口


1.2. 移动定位

Ctrl+P,#或Ctrl+;: 定位关键词

Ctrl+P,:或Ctrl+G: 定位行

Ctrl+P,@或Ctrl+R: 定位函数

Ctrl+Shift+R: 定位函数从项目

[Home,End]: 行首/行尾

Ctrl+[Home,End]: 页首/页尾

Ctrl+M: 跳转至对应的括号

Ctrl+[Left,Right]: 跳转至上/下一个词

Alt+[Left,Right]: 跳转至上/下一个子词(区分大小写)

Alt+-: 跳转至上一个光标位置

Alt+Shift+-: 跳转至下一个光标位置

Ctrl+[Up,Down]: 屏幕按行上/下滚动


1.3. 选择

❻ WebStorm和Sublime Text哪个更适合前端开发

都很适合,如果你追求速度和极致的流畅度,sublime是可选项, 如果你是一个初级前端,对于很多原生javascript的API都不甚了解,可以选择webstorm,它的提示更加全面。

❼ 如何使用sublime text 3

Sublime Text:款具代码高亮、语提示、自完且反应快速编辑器软件仅具华丽界面支持插件扩展机制用写代码绝种享受相比于难于手Vim浮肿沉重EclipseVS即便体积轻巧迅速启Editplus、Notepad++SublimeText面前略显失色疑款性比编辑器CodingWriting佳选择没 原文首链请移步何优雅使用Sublime Text;更新于2015.12.15晚 (能简书文章添加目录额折腾醉)目录结构: 何优雅使用Sublime Text 目录结构 Sublime Text 23比 Sublime Text 3安装插件 Sublime Text 3插件推荐 定制属于自快捷键 Sublime知实用技巧 定制属于自性化主题 Sublime锦添花些许设置 写路更结语 Sublime Text 23比 相比于2Sublime Text 3秒启项压倒性胜利叙述都Sublime Text 3主角并且3直断完善更新具体差异参看Sublime Blog.简单说: ST3支持项目目录面寻找变量 提供标签页更支持(更命令快捷键) 加快程序运行速度 更新API使用Python3.3 强烈推荐朋友使用3! 唯快破解释 Sublime Text 3安装插件 Sublime Text强拥强课扩展性您根据自需要安装同插件;使变比强同失轻便 插件安装式:直接安装: 安装Sublime text 3插件便直接载安装包解压缩Packages目录(菜单->preferences->packages) 插件安装式二:使用Package Control组件安装: 按Ctrl+`调console(注:安装QQ输入快捷键冲突输入属性设置-输入管理-取消热键切换至QQ拼音)粘贴代码底部命令行并车: 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( '中国sublime.wbond.net/' + pf.replace(' ','%20')).read()) 重启Sublime Text 3Perferences->package settings看package control项则安装功按Ctrl+Shift+P调命令面板输入install 调 Install Package 选项并车列表选要安装插件 PS:内使用SublimeText3经能遇安装用插件问题remove掉Package Control重新安装;遇连Package Control安装则别处拷贝份关于Package Control文件-(Package Control.sublime-package)存放于Installed Packages目录即 Sublime Text 3插件推荐 插件神器根据自需要定制属于自强插件集;作移端旧游Web端新游自墙裂推荐几款插件: MarkDown Editing SublimeText仅仅能够查看编辑 Markdown 文件视格式糟糕纯文本插件通适颜色高亮其功能更完些任务关于何SublimeText高效些东西参见文章:sublime text 2(3)Markdown写作 抑或前段间写追寻高效工作路折腾二 SideBarFolders 打文件夹都太? 用管理文件夹世界原美 SideBarFolders Sublime Terminal 插件让Sublime直接使用终端打项目文件夹并支持使用快捷键 ColorPicker 通想使用颜色选择器则能打 Photoshop 或 GIMP Sublime Text 使用内置颜色选择器安装完要按Ctrl / Cmd + Shift + C 快捷键 SublimeREPL 能程序员用插件SublimeREPL 允许 Sublime Text 运行各种语言(NodeJS PythonRuby Scala Haskell 等等) Ctags插件 童鞋抱怨Sublime Text能支持函数跳转(比像Eclipse按住Control点击该或者象即跳转定义; Alt+←即原处)其实Sublime Text借助插件实现(些情况:Can not find defination)毕竟借助则匹配完要求代码规范插件相讲些麻烦具体参见:Sublime Text ctags 配置. SublimeLinter插件 SublimeLinter 前端编码利器——Sublime Text 款插件用于高亮提示用户编写代码存规范错误写支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十种发语言篇文章介绍何 Windows 配置 SublimeLinter 进行 JS & CSS 校验 比写例像lua弱语言脚本代码规避掉该低级错误吧需要SublimeLinter安装完毕再安装SublimeLinter-lua即具体使用参见:借助 SublimeLinter 编写高质量 JavaScript & CSS 代码 SideBarEnhancements插件 SideBarEnhancements款实用右键菜单增强插件;安装该插件前Sublime Text左侧FOLDERS栏点击右键寥寥几简单功能;安装相于给其丰胸般 更强该插件能让我自定义快捷键呼某浏览器预览页面用项目目录寻找拖特定浏览器预览 安装插件点击菜单栏preferences->package setting->side bar->Key Building-User键入代码: [ { "keys": ["ctrl+shift+c"], "command": "_path" }, //chrome { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\\Users\\jeffj\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe", "extensions":".*" } } ] 设置按Ctrl+Shift+C复制文件路径按F2即Chrome浏览器预览效(需要根据自需要FirefoxSafariIEOpera等加)自定义喜欢快捷键注意代码浏览器路径要自电脑文件路径准 HTML-CSS-JS Prettify 款集格式化(美化)html、css、js三种文件类型插件即便html,js写PHP文件内插件依赖于nodejs需要事先安装nodejs才运行插件安装完快捷键ctrl+shift+H完前文件美化操作插件html、css文件美化非满意面说明何修改css美化脚本本用起超级爽鉴于篇幅赘述参见篇介绍 CSScomb CSS属性排序: 候看看自写CSS文件觉属性乱查找易维护难CSScomb按照定CSS属性排序规则杂乱章CSS属性进行重新排序选要排序CSS代码按Ctrl+Shift+C即CSS属性重新排序代码简洁序易维护款选代码则插件排序文件所CSS属性自自定义CSS属性排序规则打插件目录CSScomb.sublime-settings文件更改面CSS属性顺序行插件使用PHP写要使工作需要环境变量添加PHP路径具体请看github说明 SublimeTmpl 快速文件模板 直都奇怪sublime text 3没新建文件模板功能像html部DTD声明每都要复制粘贴用SublimeTmpl款插件终于解脱SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型文件模板所文件模板都插件目录templates文件夹自定义编辑文件模板 SublimeTmpl默认快捷键: ctrl+alt+h html ctrl+alt+j javascript ctrl+alt+c css ctrl+alt+p php ctrl+alt+r ruby ctrl+alt+shift+p python 想要新建其类型文件模板先自定义文件模板templates文件夹再别打Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings四文件照着面格式自定义想要新建类型详细介绍请各位自折腾哈~ Javascript-API-Completions: 支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示插件少数支持sublime text 3缀提示插件HTML5标签提示sublime text3自带JQuery提示用处设置要提示语

❽ 求大佬推荐一款好用的前端开发工具!!要mac版的,谢谢!!!最好是中文的!!

JetBrAIns WebStorm 2019 for Mac是一款知名的前端开发工具,提供JavaScript和编译到JavaScript语言,Node.js,HTML和CSS的智能编码辅助。

最聪明的编辑利用现代JavaScript生态系统的全部功能 - WebStorm为您提供帮助!享受智能代码完成,动态错误检测,JavaScript,TypeScript,样式表语言和最流行的框架的强大导航和重构。

调试器在IDE中轻松调试客户端和Node.js应用程序 - 在源代码中放置断点,探索调用堆栈和变量,设置监视,以及使用交互式控制台。

无缝工具集成利用linters,构建工具,测试运行器,REST客户端以及更多工具,这些工具都与IDE深度集成。但是,只要您需要终端,它也可以作为IDE工具窗口使用。

单元测试在WebStorm中使用Karma,mocha,Protractor和Jest运行和调试测试。立即在编辑器中或在方便的树视图中查看测试状态,您可以从中快速跳转到测试。

与VCS集成使用简单的统一UI来使用Git,github,Mercurial和其他VCS。使用IDE中的可视差异/合并工具提交文件,查看更改并解决冲突。

WebStorm为大多数版本控制系统提供支持,例如Git,github Mercurial,Perforce,Subversion和SVN,可用于创建各种网站和应用程序,强大而灵活!

推荐地址:JetBrAIns WebStorm 2019 for Mac