03【WebStorm开发工具】

这篇具有很好参考价值的文章主要介绍了03【WebStorm开发工具】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


上一篇02【HTML快速入门】


下一篇04【】

目录【HTML5系列教程】


三、WebStorm开发工具

3.1 WebStorm简介

WebStorm是JetBrains公司旗下一款 JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
03【WebStorm开发工具】

  • 支持的语言和框架:

提供JavaScript、ECMAScript 6、TypeScript、CoffeeScript、Dart和Flow代码辅助功能
帮助编写HTML、CSS、Less、Sass和Stylus代码
支持Node.js和主流框架,如React、Angular、 Vue.js、Meteor等


除了WebStorm,另外市面上比较流行的开发工具还有很多,例如Visual Studio Code、Sublime Text、HbuilderX、Dreamweaver等,但无论是哪款开发工具都是用来辅助我们开发的;
下图是Jetbrains公司对JavaScript开发者使用的IDE统计情况(2021年):
03【WebStorm开发工具】

3.2 WebStorm安装

参考WebStorm安装手册

3.3 WebStorm基本使用

3.3.1 创建项目

1)打开WebStorm,点击Create New Project:
03【WebStorm开发工具】
2)选择Empty Project,并选择项目的路径:
03【WebStorm开发工具】
3)项目创建完毕:
03【WebStorm开发工具】
4)创建html文件:
03【WebStorm开发工具】
Demo01.html文件如下:
03【WebStorm开发工具】

3.3.2 调整字体大小

点击菜单栏上的 File->Settings->Editor->Color Scheme->Color Scheme Font 修改字体大小
03【WebStorm开发工具】
有的人习惯了按住Ctrl+滚轮上下来完成字体大小的缩放,WebStorm也支持该设置:
03【WebStorm开发工具】
以同样的方法添加放大字体快捷键:
03【WebStorm开发工具】

3.3.3 代码自动补全

在WebStorm工具中, Ctrl+空格的快捷键,可以帮助我们补全代码,但是这个快捷键和Windows中的输入法切换快捷键冲突,需要修改WebStorm中的快捷键。 File->Settings->keymap->Main menu->code->Completion->Basic
03【WebStorm开发工具】文章来源地址https://www.toymoban.com/news/detail-476329.html

3.3.4 WebStorm常用快捷键

  1. ctrl + F12: 可以显示当前文件的结构
  2. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文件。
  3. ctrl + d: 行复制
  4. ctrl + x: 剪切行
  5. ctrl + r: 替换
  6. ctrl + / : 单行注释
  7. ctrl + shift + / : 块注释
  8. ctrl + shift + up: 行移动
  9. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
  10. ctrl + b: 跳到变量申明处
  11. ctrl + shift + ]/[: 选中块代码
  12. ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
  13. ctrl + ‘-/+’: 可以折叠项目中的任何代码块,它不是选中折叠,而是自动识别折叠。
  14. alt + ‘7’: 显示当前的函数结构。

到了这里,关于03【WebStorm开发工具】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 快速上手微信小程序(纯原生)基于微信开发者工具+云开发

    最近开发一个小程序。因为体量实在不大,两张表,几个接口。便打算写原生的代码。没有使用uniapp等框架。记录一下一个小程序从搭建到审核发布的那些坑和经验做为学习笔记。 几个网站请收藏 你的小程序需要开发工具: 保姆级传送门 你的小程序需要一个身份证: 微信公

    2024年02月10日
    浏览(30)
  • PicoNeo3开发坑点记录(一)☀️PreviewTool工具使用及开发环境快速搭建

    官方链接 你会得到一个.apk文件以及一个.7z压缩文件; 使用USB线将.apk文件复制到VR设备内,在VR设备中直接完成安装(与手机安装应用无异)。 这里提一下,官方文档是提示在设备端用AndroidDebugBridge(ADB)安装APK,不用管。 将.7z文件解压就行 这点很重要 在编辑器中打开Project

    2024年02月01日
    浏览(24)
  • 【Python入门】搭建开发环境-安装Pycharm开发工具

    前言 📕作者简介: 热爱跑步的恒川 ,致力于C/C++、Java、Python等多编程语言,热爱跑步,喜爱音乐的一位博主。 📗本文收录于Python零基础入门系列,本专栏主要内容为Python基础语法、判断、循环语句、函数、函数进阶、数据容器、文件操作、异常模块与包、数据可视化等,

    2024年02月04日
    浏览(25)
  • Postman工具使用一篇快速入门教程

    Postman 是一个用于构建和使用 API 的 API 平台,Postman 简化了 API 生命周期的每个步骤并简化了协作,可以更快地创建更好的 API。 版本说明: Postman官网下载链接:https://www.postman.com/,根据自己的操作系统选择。 找到下载到的目录直接双击.exe文件,会默认安装在C盘,安装完会

    2024年02月03日
    浏览(37)
  • 3D开发工具HOOPS Publish如何快速创建交互式3D PDF文档?

    HOOPS Publish是一款功能强大的SDK, 可以创作丰富的工程数据并将模型文件导出为各种行业标准格式,包括PDF、STEP、JT和3MF。 HOOPS Publish核心的3D数据模型是经过ISO认证的PRC格式(ISO 14739-1:2014),它为装配树、拓扑和几何、产品制造信息和视图等工程概念提供支持。 开发人员可以通

    2024年02月09日
    浏览(24)
  • VsCode开发工具的入门及基本使用

    大家好,我是[阿猫的故乡]。很高兴能有机会与大家分享关于VsCode开发工具的入门及基本使用的知识。 文章目录 文章目录 前言 一、VsCode是什么? 二、使用步骤 1.如何下载 2.如何使用 总结 在开发者社区中,Visual Studio Code(简称VS Code)已经成为最受欢迎的文本编辑器之一。作

    2024年02月02日
    浏览(46)
  • 使用一键安装工具快速搭建 ESP-IDF 开发环境 (Windows)

    我们收到用户对 ESP-IDF SDK 软件开发环境感到搭建难、门槛高的反馈。为解决用户在此方面的问题。为此,我们推出本期教程介绍在 Windows 操作系统下使用一键安装工具快速搭建 ESP-IDF 开发环境。 您可以观看下面的教程视频,也可以阅读接下来本篇的图文教程。 【乐鑫教程】

    2024年02月09日
    浏览(38)
  • MATLAB /Simulink 快速开发STM32(使用st官方工具 STM32-MAT/TARGET),以及开发过程

    配置好环境以后就是开发: stm32cube配置芯片,打开matlab添加ioc文件,写处理逻辑,生成代码,下载到板子中去。 配置需要注意事项: STM32CUBEMAX6.5.0 + MABLAB2022B+keilV5.2 Matlab生成的代码CTRL+B 其中关键的配置有哪些,如图: untitledtest_stm32是matlab生成的代码

    2024年02月14日
    浏览(26)
  • Java开发小白入门前的工具安装

    学习过程是痛苦的, 我们要学会苦中作乐! 关于java语言的基本介绍百度上都有,拉出来的都很详细,不做过多的介绍,我想写的主要是以干活为主,大家一起学习java 的知识。 编程的学习主要还是要靠自己勤劳的双手------敲代码,一遍又一遍的把代码敲出来,直到它成为你

    2024年04月16日
    浏览(20)
  • 微信小程序 ---在Vscode上编辑,微信开发者工具上预览,快速上手

    成功 导入一个已经在开发中项目 设置高亮 拷贝到 settings.json 重启 vscode 打开 wxml 文件 观察 有没有高亮 安装小程序开发插件 全局配置 app.json pages 字段 只能在微信开发者工具中 编辑 pages字段,按下保存 才生效!!! pages 快速创建页面的时候 在里面创建即可 作用 : 快速创

    2024年02月01日
    浏览(23)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包